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 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

widgetKind

TypeDefault
WidgetKind (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 { 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

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.

FooterComponent

TypeDefault
Component of type LLWidgetFooterLLWidgetFooter

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

TypeDefault
StyleSheet of type LLWidgetFooterStylesNo 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

Refer LLEmojiSliderWidgetBody in below section for more details.

BodyComponentStyles

TypeDefault
StyleSheet of type LLEmojiSliderWidgetBodyStylesNo 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 Props

πŸ“˜

Customisation

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

widgetId

TypeDefault
String (Required)No Default

styles

TypeDefault
Stylesheet of type LLEmojiSliderWidgetBodyStylesNo 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

TypeDefault
Component of type LLEmojiSliderLLEmojiSlider

Refer LLEmojiSlider in below section for more details.

SliderComponentStyles

TypeDefault
StyleSheet of type LLEmojiSliderStylesNo 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 Props

πŸ“˜

Customisation

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

widgetId

TypeDefault
String (Required)No Default

onSlidingComplete

TypeDefault
(value: number) => void (Required)No Default

Function called with sliding input value when user sliding interaction is completed.

thumbImages

TypeDefault
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

TypeDefault
Number (Required)No Default

Current value of the sliding UI input.

initialValue

TypeDefault
NumberNo Default

Initial value of the sliding UI input.

average

TypeDefault
NumberNo Default

Average value of all the user interaction done so far on a given slider UI.

disabled

TypeDefault
booleanfalse

styles

TypeDefault
Stylesheet of type LLEmojiSliderStylesNo 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

TypeDefault
slider props of type react-native-sliderNo Default

Extend or customise internal slider UI component using sliderUIComponentProps, refer react-native-slider supported props for more details.