LLAlertWidget

🚧

Pre-requisite

Make sure you initialise React Native SDK.

LLAlertWidget is a info based read only widget UI component.

import { LLAlertWidget } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';

export function MyWidgetContainer() {
  return (
    <LLAlertWidget
      programId="xxxxx"
      widgetId="yyyyy"
    />
  );
}

Hooks used by LLAlertWidget

LLAlertWidget Props

πŸ“˜

Customisation

Refer customisation core concepts to understand different level of component customisation.

programId

TypeDefault
String (Required)No Default

This is the Id of the program in which a given widget is published

widgetId

TypeDefault
String (Required)No Default

onDismiss

TypeDefault
FunctionNo Default

Function that gets invoked whenever user dismisses the widget by clicking on dismiss Icon.
Pass onDismiss prop (with no op function) to make widget dismissible.

interactiveTimeout

TypeDefault
NumberNo default

Interactive timeout in epoch. Once the timeout gets elapsed, widget transition into Timed Out phase where it is in disabled state.
When setting interactiveTimeout as null, this overrides widget interactive timeout (that is set from producer suite) and widget becomes always interactive.

onInteractiveTimeout

TypeDefault
FunctionNo Default

Function that gets invoked whenever interactive timer gets elapsed. When interactiveTimeout is set to null, onInteractiveTimeout function would never be called.

WidgetComponent

TypeDefault
Component of type LLCoreWidgetLLCoreWidget

This is the core widget component that is responsible for loading widget details and rendering other part of widget UI (passed as children).
Refer LLCoreWidget docs for more details.

WidgetComponentStyles

TypeDefault
StyleSheet of type LLCoreWidgetStylesNo Default, if present styles props would be applied on top of internal LLCoreWidgetStyles

WidgetComponentStyles prop that could be used to modify styles of default rendered LLCoreWidget component.

HeaderComponent

TypeDefault
Component of type LLWidgetHeaderLLWidgetHeader

Refer LLWidgetHeader docs for more details.

Example usage:
import { LLAlertWidget, LLWidgetHeaderProps } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';

function MyHeaderComponent(props: LLWidgetHeaderProps){
  // your custom widget header component
}

function MyWidget() {
  return (
    <LLAlertWidget
      programId="xxxxx"
      widgetId="yyyyy"
      HeaderComponent={MyHeaderComponent}
    />
  );
}

HeaderComponentStyles

TypeDefault
StyleSheet of type LLWidgetHeaderStylesNo Default, if present styles props would be applied on top of internal LLWidgetHeaderStyles

HeaderComponentStyles prop that could be used to modify styles of default rendered LLWidgetHeader component.

SponsorComponent

TypeDefault
Component of type LLWidgetSponsorLLWidgetSponsor

Component responsible for rendering widget sponsor (based on sponsor selected in producer suite for a given widget).

Example usage:
import { LLAlertWidget, LLWidgetSponsorProps } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';

function MySponsorComponent(props: LLWidgetSponsorProps){
  // your custom widget sponsor component
}

function MyWidget() {
  return (
    <LLAlertWidget
      programId="xxxxx"
      widgetId="yyyyy"
      SponsorComponent={MySponsorComponent}
    />
  );
}

SponsorComponentStyles

TypeDefault
StyleSheet of type LLWidgetSponsorStylesNo Default, if present styles props would be applied on top of internal LLWidgetSponsorStyles

SponsorComponentStyles prop that could be used to modify styles of default rendered LLWidgetSponsor component.

BodyComponent

TypeDefault
Component of type LLAlertWidgetBodyLLAlertWidgetBody

Refer LLVoteWidgetBody in below section for more details.

BodyComponentStyles

TypeDefault
StyleSheet of type LLAlertWidgetBodyStylesNo Default, if present styles props would be applied on top of internal LLAlertWidgetBodyStyles

BodyComponentStyles prop that could be used to modify styles of default rendered LLAlertWidgetBody component.


LLAlertWidgetBody

This is a body component for a alert widget responsible for rendering alert text, image and links.

Hooks used by LLAlertWidgetBody

LLAlertWidgetBody Props

widgetId

TypeDefault
String (Required)No Default

onLinkPress

TypeDefault
({url: string}) => voidNo Default

styles

TypeDefault
Stylesheet of type LLAlertWidgetBodyStylesNo Default, if present styles props would be applied on top of internal LLAlertWidgetBodyStyles.

styles prop that could be used to modify styles of LLAlertWidgetBody component.

DetailComponent

TypeDefault
Component of type LLAlertWidgetDetailLLAlertWidgetDetail

Component responsible for rendering alert widget text (if present) and image (if present).

DetailComponentStyles

TypeDefault
StyleSheet of type LLAlertWidgetDetailStylesNo Default, if present styles props would be applied on top of internal LLAlertWidgetDetailStyles

DetailComponentStyles prop that could be used to modify styles of default rendered LLAlertWidgetDetail component.

LinkComponent

TypeDefault
Component of type LLAlertWidgetLinkLLAlertWidgetLink

Component responsible for rendering alert widget link (if present). When user presses link, onLinkPress prop function gets invoked.

LinkComponentStyles

TypeDefault
StyleSheet of type LLAlertWidgetLinkStylesNo Default, if present styles props would be applied on top of internal LLAlertWidgetLinkStyles

LinkComponentStyles prop that could be used to modify styles of default rendered LLAlertWidgetLink component.