LLEmojiSliderWidget
Pre-requisite
Make sure you initialise React Native SDK.
LLEmojiSliderWidget
LLEmojiSliderWidget
is a slider based widget UI component.
import { LLEmojiSliderWidget } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';
export function MyWidgetContainer() {
return (
<LLEmojiSliderWidget
programId="xxxxx"
widgetId="yyyyy"
/>
);
}
Hooks used by LLEmojiSliderWidget
LLEmojiSliderWidget
LLEmojiSliderWidget 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 |
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 { LLEmojiSliderWidget, LLWidgetHeaderProps } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';
function MyHeaderComponent(props: LLWidgetHeaderProps){
// your custom widget header component
}
function MyWidget() {
return (
<LLEmojiSliderWidget
programId="xxxxx"
widgetId="yyyyy"
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 { LLEmojiSliderWidget, LLWidgetFooterProps } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';
function MyFooterComponent(props: LLWidgetFooterProps){
// your custom widget footer component
}
function MyWidget() {
return (
<LLEmojiSliderWidget
programId="xxxxx"
widgetId="yyyyy"
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 LLEmojiSliderWidgetBody | LLEmojiSliderWidgetBody |
Refer LLEmojiSliderWidgetBody in below section for more details.
BodyComponentStyles
BodyComponentStyles
Type | Default |
---|---|
StyleSheet of type LLEmojiSliderWidgetBodyStyles | No Default, if present styles props would be applied on top of internal LLEmojiSliderWidgetBodyStyles |
BodyComponentStyles
prop that could be used to modify styles of default rendered LLEmojiSliderWidgetBody
component.
LLEmojiSliderWidgetBody
This is a body component for a emoji slider widget responsible for rendering slider and its interaction.
Hooks used by LLEmojiSliderWidgetBody
LLEmojiSliderWidgetBody
LLEmojiSliderWidgetBody
Props
LLEmojiSliderWidgetBody
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 LLEmojiSliderWidgetBodyStyles | No Default, if present styles props would be applied on top of internal LLEmojiSliderWidgetBodyStyles . |
styles
prop that could be used to modify styles of LLEmojiSliderWidgetBody
component.
SliderComponent
SliderComponent
Type | Default |
---|---|
Component of type LLEmojiSlider | LLEmojiSlider |
Refer LLEmojiSlider in below section for more details.
SliderComponentStyles
SliderComponentStyles
Type | Default |
---|---|
StyleSheet of type LLEmojiSliderStyles | No Default, if present styles props would be applied on top of internal LLEmojiSliderStyles |
SliderComponentStyles
prop that could be used to modify styles of default rendered LLEmojiSlider
component.
LLEmojiSlider
This is the slider component for a emoji slider widget responsible for rendering slider UI. Internally it renders react-native-slider
Hooks used by LLEmojiSlider
LLEmojiSlider
LLEmojiSlider
Props
LLEmojiSlider
PropsCustomisation
Refer customisation core concepts to understand different level of component customisation.
widgetId
widgetId
Type | Default |
---|---|
String (Required) | No Default |
onSlidingComplete
onSlidingComplete
Type | Default |
---|---|
(value: number) => void (Required) | No Default |
Function called with sliding input value when user sliding interaction is completed.
thumbImages
thumbImages
Type | Default |
---|---|
Array of {min: number; imageUrl: string} (Required) | No Default |
Array of thump images to be shown for a given value range of sliding input
value
value
Type | Default |
---|---|
Number (Required) | No Default |
Current value of the sliding UI input.
initialValue
initialValue
Type | Default |
---|---|
Number | No Default |
Initial value of the sliding UI input.
average
average
Type | Default |
---|---|
Number | No Default |
Average value of all the user interaction done so far on a given slider UI.
disabled
disabled
Type | Default |
---|---|
boolean | false |
styles
styles
Type | Default |
---|---|
Stylesheet of type LLEmojiSliderStyles | No Default, if present styles props would be applied on top of internal LLEmojiSliderStyles . |
styles
prop that could be used to modify styles of LLEmojiSlider
component.
sliderUIComponentProps
sliderUIComponentProps
Type | Default |
---|---|
slider props of type react-native-slider | No Default |
Extend or customise internal slider UI component using sliderUIComponentProps
, refer react-native-slider supported props for more details.
Updated 10 months ago