LLWidgetFooter

🚧

Pre-requisite

Make sure you initialise React Native SDK.

LLWidgetFooter is a fundamental atomic component that is used by various widget components. This component is rendered as a bottom component as part of default widget anatomy.

import { LLWidgetFooter } from '@livelike/react-native';

export function MyWidgetFooter() {
  return (
    <LLWidgetFooter
      widgetId="yyyyy"
    />
  );
}

Hooks used by LLWidgetFooter

• useWidgetInteractiveTimeout
• useWidgetExpiryEffect

Component Hierarchy

LLWidgetFooter Props

📘

Customisation

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

widgetId

styles

ActionInfoComponent

Renders widget action related components that comprises of:

• End phase label i.e Timed Out | Expired
• Rewards earned by user.
• submit button for single interaction based widgets.

Pass your own custom action info component or extend default LLWidgetActionInfo stock component by customising above sub components.
Refer LLWidgetActionInfo for more details.

Example usage:

import { LLWidgetFooter, LLWidgetActionInfoProps } from '@livelike/react-native';

// Widget footer with custom action info component

function MyActionInfoComponent(props: LLWidgetActionInfoProps){
  // your own custom action info implementation
  // you could reuse stock sub components and create your own container UI
}

export function MyWidgetFooter() {
  return (
    <LLWidgetFooter
      widgetId="yyyyy"
      ActionInfoComponent={MyActionInfoComponent}
    />
  );
}

ActionInfoComponentStyles

ActionInfoComponentStyles prop which could be used to modify styles of default rendered LLWidgetActionInfo component.

SponsorComponent

Renders sponsor component based on the sponsor selected for a given widget through our producer suite.

Example usage:

import { LLWidgetFooter, LLWidgetSponsorProps } from '@livelike/react-native';

// Widget footer with custom action info component

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

export function MyWidgetFooter() {
  return (
    <LLWidgetFooter
      widgetId="yyyyy"
      SponsorComponent={MySponsorComponent}
    />
  );
}

SponsorComponentStyles

LLWidgetSponsorStyles prop which could be used to modify styles of default rendered LLWidgetSponsor component.

LLWidgetActionInfo

Renders widget action related components that comprises of:

• End phase label i.e Timed Out | Expired
• Rewards earned by user.
• submit button for single interaction based widgets.

Hooks used by LLWidgetActionInfo

• useStyles

LLWidgetActionInfo Props

📘

Customisation

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

widgetId

styles

EndWidgetUIPhaseLabelComponent

Renders end phase label when widget is in either Timed out or Expired phase.

Example usage:

import { LLWidgetActionInfo, LLEndWidgetUIPhaseLabelProps } from '@livelike/react-native';

function MyEndPhaseUILabelComponent(props: LLEndWidgetUIPhaseLabelProps){
  // your own custom implementation
}

export function MyFooterActionInfo() {
  return (
    <LLWidgetActionInfo
      widgetId="yyyyy"
      EndWidgetUIPhaseLabelComponent={MyEndPhaseUILabelComponent}
    />
  );
}

EndWidgetUIPhaseLabelComponentStyles

EndWidgetUIPhaseLabelComponentStyles prop which could be used to modify styles of default rendered LLEndWidgetUIPhaseLabel component.

WidgetRewardsComponent

Render rewards earned based on user interaction provided reward has been setup for a given widget through producer suite. In case of multiple rewards earned, reward items are animated using slides in and out transition.

Example usage:

import { 
  LLWidgetActionInfo,
  LLWidgetRewards,
  LLWidgetRewardsProps
} from '@livelike/react-native';

function MyRewardsComponent(props: LLWidgetRewardsProps){
  // your own custom implementation
  // or extend stock rewards component
  return <LLWidgetRewards
    {...props}
    // customise reward item component
    RewardComponent={LLWidgetReward}
    // customise reward item styles
    RewardComponentStyles={<custom stylesheet of type LLWidgetRewardStyles>}
  />
}

export function MyFooterActionInfo() {
  return (
    <LLWidgetActionInfo
      widgetId="yyyyy"
      WidgetRewardsComponent={MyRewardsComponent}
    />
  );
}

WidgetRewardsComponentStyles

WidgetRewardsComponentStyles prop which could be used to modify styles of default rendered LLWidgetRewards component.

SubmitButtonComponent

Renders submit button component by a given widget whose on Submit behaviour is defined by corresponding widget.

Example usage:

import { LLWidgetActionInfo, LLWidgetSubmitButtonProps } from '@livelike/react-native';

function MySubmitComponent(props: LLWidgetSubmitButtonProps){
  // your own custom implementation
  // or extend stock LLWidgetSubmitButtonComponent
}

export function MyFooterSubmit() {
  return (
    <LLWidgetActionInfo
      widgetId="yyyyy"
      SubmitButtonComponent={MySubmitComponent}
    />
  );
}

SubmitButtonComponentStyles

SubmitButtonComponentStyles prop which could be used to modify styles of default rendered SubmitButtonComponent component.