LLNumberPredictionWidget
Pre-requisite
Make sure you initialise React Native SDK.
LLNumberPredictionWidget
is a number prediction based widget UI component. This widget UI supports one kind of widget namely:
WidgetKind.IMAGE_NUMBER_PREDICTION
import { LLNumberPredictionWidget } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';
export function MyWidgetContainer() {
return (
<LLNumberPredictionWidget
programId="xxxxx"
widgetId="yyyyy"
widgetKind={WidgetKind.IMAGE_NUMBER_PREDICTION}
/>
);
}
Hooks used by LLNumberPredictionWidget
LLNumberPredictionWidget
LLNumberPredictionWidget Props
Customisation
Refer customisation core concepts to understand different level of component customisation.
programId
programId
Type | Default |
---|---|
String (Required) | No Default |
This is the Id of the program in which a given widget is published
widgetId
widgetId
Type | Default |
---|---|
String (Required) | No Default |
widgetKind
widgetKind
Type | Default |
---|---|
WidgetKind (Required) | No Default |
inlineFollowUp
inlineFollowUp
Type | Default |
---|---|
Boolean | false |
This prop when present would auto render (in place of prediction widget) its corresponding number prediction followup widget whenever it is published from producer suite.
onDismiss
onDismiss
Type | Default |
---|---|
Function | No 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
interactiveTimeout
Type | Default |
---|---|
Number | No 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
onInteractiveTimeout
Type | Default |
---|---|
Function | No Default |
Function that gets invoked whenever interactive timer gets elapsed. When interactiveTimeout
is set to null
, onInteractiveTimeout
function would never be called.
WidgetComponent
WidgetComponent
Type | Default |
---|---|
Component of type LLCoreWidget | LLCoreWidget |
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
WidgetComponentStyles
Type | Default |
---|---|
StyleSheet of type LLCoreWidgetStyles | No 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
HeaderComponent
Type | Default |
---|---|
Component of type LLWidgetHeader | LLWidgetHeader |
Refer LLWidgetHeader docs for more details.
Example usage:
import { LLNumberPredictionWidget, LLWidgetHeaderProps } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';
function MyHeaderComponent(props: LLWidgetHeaderProps){
// your custom widget header component
}
function MyWidget() {
return (
<LLNumberPredictionWidget
programId="xxxxx"
widgetId="yyyyy"
widgetKind={WidgetKind.IMAGE_NUMBER_PREDICTION}
HeaderComponent={MyHeaderComponent}
/>
);
}
HeaderComponentStyles
HeaderComponentStyles
Type | Default |
---|---|
StyleSheet of type LLWidgetHeaderStyles | No 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.
FooterComponent
FooterComponent
Type | Default |
---|---|
Component of type LLWidgetFooter | LLWidgetFooter |
Refer LLWidgetFooter docs for more details.
Example usage:
import { LLNumberPredictionWidget, LLWidgetFooterProps } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';
function MyFooterComponent(props: LLWidgetFooterProps){
// your custom widget footer component
}
function MyWidget() {
return (
<LLNumberPredictionWidget
programId="xxxxx"
widgetId="yyyyy"
widgetKind={WidgetKind.IMAGE_NUMBER_PREDICTION}
FooterComponent={MyFooterComponent}
/>
);
}
FooterComponentStyles
FooterComponentStyles
Type | Default |
---|---|
StyleSheet of type LLWidgetFooterStyles | No Default, if present styles props would be applied on top of internal LLWidgetFooterStyles |
FooterComponentStyles
prop that could be used to modify styles of default rendered LLWidgetHeader
component.
BodyComponent
BodyComponent
Type | Default |
---|---|
Component of type LLNumberPredictionWidgetBody | LLNumberPredictionWidgetBody |
Refer LLNumberPredictionWidgetBody in below section for more details.
BodyComponentStyles
BodyComponentStyles
Type | Default |
---|---|
StyleSheet of type LLNumberPredictionWidgetBodyStyles | No Default, if present styles props would be applied on top of internal LLNumberPredictionWidgetBodyStyles |
BodyComponentStyles
prop that could be used to modify styles of default rendered LLNumberPredictionWidgetBody
component.
LLNumberPredictionWidgetBody
This is a body component for a number prediction widget responsible for rendering all the option details and its interaction.
Hooks used by LLNumberPredictionWidgetBody
LLNumberPredictionWidgetBody
LLNumberPredictionWidgetBody
Props
LLNumberPredictionWidgetBody
PropsCustomisation
Refer customisation core concepts to understand different level of component customisation.
widgetId
widgetId
Type | Default |
---|---|
String (Required) | No Default |
styles
styles
Type | Default |
---|---|
Stylesheet of type LLNumberPredictionWidgetBodyStyles | No Default, if present styles props would be applied on top of internal LLNumberPredictionWidgetBodyStyles . |
styles
prop that could be used to modify styles of LLNumberPredictionWidgetBody
component.
OptionComponent
OptionComponent
Type | Default |
---|---|
Component of type LLNumberPredictionWidgetOption | LLNumberPredictionWidgetOption |
OptionComponentStyles
OptionComponentStyles
Type | Default |
---|---|
StyleSheet of type LLNumberPredictionWidgetOptionStyles | No Default, if present styles props would be applied on top of internal LLNumberPredictionWidgetOptionStyles |
OptionComponentStyles
prop that could be used to modify styles of default rendered LLNumberPredictionWidgetOption
component.
Updated 11 months ago