🚧

Pre-requisite

Make sure you initialise React Native SDK.

LLWidgets is a timeline based widget container component that would render set of widgets based on WidgetMode (POPUP or INTERACTIVE_TIMELINE) where the mode defines how those set of widgets (published from our producer suite) would be rendered.

Let us understand different types of widget mode.

Popup Mode:

In popup mode (i.e WidgetMode.POPUP), widgets appear for a limited time and then disappear. They are interactive until the timer animation runs out. It is typically used for live interactive experiences.

import { LLWidgets, WidgetMode } from '@livelike/react-native';

export function MyWidgetsContainer() {
  return (
    <LLWidgets
      programId="xxxxx"
      mode={WidgetMode.POPUP}
    />
  );
}

Interactive Timeline Mode:

In interactive timeline mode (i.e WidgetMode.INTERACTIVE_TIMELINE),

• previously published widgets are displayed newest to oldest
• then new widgets appear above the old ones.
• All the widgets are interactive for infinite time. There is no timer attached to any of the widgets.
• Each "page" of widgets in the timeline contain up to the 20 most recent widgets.
• If there are more than 20 past widgets available, there will be a customisable "Load More" button at the end of the widget list that will load up to the next 20 widgets at a time.

import { LLWidgets, WidgetMode } from '@livelike/react-native';

export function MyWidgetsContainer() {
  return (
    <LLWidgets
      programId="xxxxx"
      mode={WidgetMode.INTERACTIVE_TIMELINE}
    />
  );
}

📘

Snack expo playground

Refer LLWidgets snack to play around with the widget

Hooks used by LLWidgets

• useLoadTimelineWidgetEffect
• useTimelineWidgets
• useTimelineWidgetActions

LLWidgets Props

📘

Customisation

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

programId

This is the Id of the program in which a given set of widgets are published from producer suite.

mode

This prop defines in which mode LLWidgets component to be rendered.

styles

onLoadMore

Function that called whenever more widgets are loaded in interactive-timeline mode.

LoadingComponent

Component to render whenever set of widgets are being loaded in interactive-timeline mode.

Example usage:

import React from 'react';
import { LLWidgets, WidgetMode } from '@livelike/react-native';
import { View, Text } from 'react-native';

const CustomLoadingComponent = () => {
  return (
		<View>
    	<Text> Loading... </Text>
    </View>
  );
};

export function MyApp() {
  return (
    <LLWidgets
      programId="xxxxx"
      mode={WidgetMode.INTERACTIVE_TIMELINE}
      LoadingComponent={CustomLoadingComponent}
    />
  );
}

ErrorComponent

Component to render whenever there's an error in loading widgets in interactive-timeline mode.

Example usage:

import React from 'react';
import { LLWidgets, WidgetMode } from '@livelike/react-native';
import { View, Text } from 'react-native';

const CustomErrorComponent = () => {
  return (
		<View>
    	<Text style={{ color: 'red' }}> Ohh snap! widgets not loaded </Text>
    </View>
  );
};

export function MyApp() {
  return (
    <LLWidgets
      programId="xxxxx"
      mode={WidgetMode.INTERACTIVE_TIMELINE}
      ErrorComponent={CustomErrorComponent}
    />
  );
}

LoadMoreComponent

Pressable component which when pressed loads next set of widgets in interactive-timeline mode.

Example usage:

import React from 'react';
import { LLWidgets, WidgetMode, LLWidgetsLoadMoreButtonProps } from '@livelike/react-native';
import { Button } from 'react-native';

const CustomLoadMoreComponent = ({onPress}: LLWidgetsLoadMoreButtonProps) => {
  return (
    	<Button onPress={onPress}>Roll more widgets</Text>
  );
};

export function MyApp() {
  return (
    <LLWidgets
      programId="xxxxx"
      mode={WidgetMode.INTERACTIVE_TIMELINE}
      LoadMoreComponent={CustomLoadMoreComponent}
    />
  );
}

LoadMoreComponentStyles

LoadMoreComponentStyles styles prop which could be used to modify styles of default rendered LoadMoreComponent component.

WidgetSeparatorComponent

Component to render between widgets (as a separator)

Example usage:

import React from 'react';
import { LLWidgets, WidgetMode } from '@livelike/react-native';
import { View, Text } from 'react-native';

const CustomSeparatorComponent = () => {
  return (
		// your custom separator
  );
};

export function MyApp() {
  return (
    <LLWidgets
      programId="xxxxx"
      mode={WidgetMode.INTERACTIVE_TIMELINE}
      WidgetSeparatorComponent={CustomSeparatorComponent}
    />
  );
}

WidgetSeparatorComponentStyles

WidgetSeparatorComponentStyles styles prop which could be used to modify styles of default rendered WidgetSeparatorComponent component.

Example usage:

import React from 'react';
import { LLWidgets, WidgetMode } from '@livelike/react-native';
import { View, Text } from 'react-native';

const CustomLoadingComponent = () => {
  return (
		<View>
    	<Text> Loading... </Text>
    </View>
  );
};

export function MyApp() {
  return (
    <LLWidgets
      programId="xxxxx"
      mode={WidgetMode.INTERACTIVE_TIMELINE}
			LoadingComponent={CustomLoadingComponent}
    />
  );
}

WidgetComponent

WidgetComponent is responsible for rendering widget UI based on its kind. Internally it render LiveLike stock UI widgets. You can pass a custom component to render your own widget UI or pass an extended LLWidget component customising a given set of widget kinds.

Example usage:

Render your own custom Alert widget or customise stock Poll widget.

import React from 'react';
import { 
  LLWidgets,
  LLWidget,
  LLWidgetProps, 
  LLPollWidgetProps,
  LLWidgetHeaderProps,
  useWidget,
  WidgetMode
} from '@livelike/react-native';
import { View, Text } from 'react-native';

function CustomPollHeaderComponent(props: LLWidgetHeaderProps){
  return (
    // tour custom poll header UI
  )
}

function CustomPollComponent({ widgetId, ...rest }: LLPollWidgetProps){
  return (
  	<LLPollWidget
    	{...rest}
			widgetId={widgetId}
			HeaderComponent={CustomPollHeaderComponent}
    />
  ) 
}

function CustomAlertComponent({ widgetId }){
	const widgetDetails = useWidget({ widgetId });
  return (
     // your alert UI
  )
}

function CustomWidget(props: LLWidgetProps) {
  return <LLWidget
  				{...props} 
  				PollComponent={CustomPollComponent}
  				AlertComponent={CustomAlertComponent}
  			/>;
}

export function MyApp() {
  return (
    <LLWidgets
      programId="xxxxx"
      mode={WidgetMode.INTERACTIVE_TIMELINE}
			WidgetComponent={CustomWidget}
    />
  );
}

LLWidget

This component renders widget UI based on widget kind which is used by LLWidgets component. You can pass corresponding widget kind prop to render your own custom Widget UI.

LLWidget Props:

widgetKind

PollWidgetComponent

Component rendered for text or image poll widget kind, you can pass your own custom component or pass a customised LLPollWidget component.

Example usage:

import React from 'react';
import { LLWidgets, WidgetMode } from '@livelike/react-native';
import { View, Text } from 'react-native';

const CustomLoadingComponent = () => {
  return (
		<View>
    	<Text> Loading... </Text>
    </View>
  );
};

export function MyApp() {
  return (
    <LLWidgets
      programId="xxxxx"
      mode={WidgetMode.INTERACTIVE_TIMELINE}
			LoadingComponent={CustomLoadingComponent}
    />
  );
}

QuizWidgetComponent

Component rendered for text or image quiz widget kind, you can pass your own custom component or pass a customised LLQuizWidget component.

PredictionWidgetComponent

Component rendered for text or image prediction widget kind, you can pass your own custom component or pass a customised LLPredictionWidget component.

PredictionFollowUpWidgetComponent

Component rendered for text or image prediction follow up widget kind, you can pass your own custom component or pass a customised LLPredictionFollowUpWidget component.

NumberPredictionWidgetComponent

Component rendered for text or image number prediction widget kind, you can pass your own custom component or pass a customised LLNumberPredictionWidget component.

NumberPredictionFollowUpWidgetComponent

Component rendered for text or image number prediction follow up widget kind, you can pass your own custom component or pass a customised LLNumberPredictionFollowUpWidget component.

EmojiSliderWidgetComponent

Component rendered for emoji slider widget kind, you can pass your own custom component or pass a customised LLEmojiSliderWidget component.

CheerMeterWidgetComponent

Component rendered for cheer meter widget kind, you can pass your own custom component or pass a customised LLEmojiSliderWidget component.

TextAskComponent

Component that could be rendered for text ask widget kind, you can pass your own custom component or pass a customised LLTextAskWidget component.

AlertComponent

Component that could be rendered for alert widget kind, you can pass your own custom component or pass a customised LLAlertWidget component.

VideoAlertComponent

Component that could be rendered for video alert widget kind, you can pass your own custom component.

SocialEmbedComponent

Component that could be rendered for social embed widget kind, you can pass your own custom component.

🚧

Widgets in development

Currently text ask, alert, video alert and social embed stock widget UI is in development. So by default there's no stock widget UI rendered by LLTimelineWidget.