LLWidgetFooter

🚧

Pre-requisite

Make sure you initialise React Native SDK.

Widget footer Anatomy

Widget Footer Anatomy

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

Component Hierarchy

Footer component hierarchy

LLWidgetFooter Props

πŸ“˜

Customisation

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

widgetId

TypeDefault
String (Required)No Default

styles

TypeDefault
StyleSheet of type LLWidgetFooterStylesNo Default, if present styles props would be applied on top of internal LLWidgetFooterStyles

ActionInfoComponent

TypeDefault
Component of type LLWidgetActionInfoLLWidgetActionInfo

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

TypeDefault
StyleSheet of type LLWidgetActionInfoStylesNo Default, if present styles props would be applied on top of internal LLWidgetActionInfoStyles

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

SponsorComponent

TypeDefault
Component of type LLWidgetSponsorLLWidgetSponsor

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

TypeDefault
StyleSheet of type LLWidgetSponsorStylesNo Default, if present styles props would be applied on top of internal LLWidgetSponsorStyles

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

LLWidgetActionInfo Props

πŸ“˜

Customisation

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

widgetId

TypeDefault
String (Required)No Default

styles

TypeDefault
StyleSheet of type LLWidgetActionInfoStylesNo Default, if present styles props would be applied on top of internal LLWidgetActionInfoStyles

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

TypeDefault
StyleSheet of type LLEndWidgetUIPhaseLabelStylesNo Default, if present styles props would be applied on top of internal LLEndWidgetUIPhaseLabelStyles

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

WidgetRewardsComponent

TypeDefault
Component of type LLWidgetRewardsLLWidgetRewards

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

TypeDefault
StyleSheet of type LLWidgetRewardsStylesNo Default, if present styles props would be applied on top of internal LLWidgetRewardsStyles

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

SubmitButtonComponent

TypeDefault
Component of type Prop LLWidgetSubmitButtonPropsBy default there no component rendered

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

TypeDefault
StyleSheet of type LLWidgetSubmitButtonStylesNo Default, if present styles props would be applied on top of internal LLWidgetSubmitButtonStyles

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