Storyteller Home

StorytellerHome is a component that allows multiple Stories and Clips Rows or Grids to be embedded in a single screen in your application in a list.

How to Use

The code samples below show how to use the StorytellerHome component. It includes a pull-to-refresh (PTR) mechanism, but you can also use the reloadData method to refresh data to support your use case.

Props

export interface StorytellerHomeViewProps {
  configuration: StorytellerHomeConfiguration;
  style: ViewStyle;
}

export type StorytellerHomeConfiguration = {
  homeId?: string;
  theme?: Theme; // Theme has { light: Partial<ThemeType>, dark: Partial<ThemeType> }
  uiStyle?: UIStyle
};

To customize the layout of a component you can use the following props:

• configuration.homeId: an identifier of the home configuration you want to load
• configuration.theme: use this property to customize the appearance of the Storyteller Home. The Theme type has top-level light and dark keys, each a Partial<ThemeType>. See Themes for details.
• configuration.uiStyle sets if Storyteller is rendered in light or dark mode, it can be auto, light, or dark, the default value is auto.

Adding it in the layout

To put it in your custom view hierarchy you will need to add the following code:

v11.0.0+v10.x

const ref = useRef<StorytellerHomeViewInterface | null>(null);

return (
  <View style={styles.home}>
    <StorytellerHomeView
      ref={ref}
      configuration={{
        homeId: "your-home-id"
      }}
      style={styles.home}
    />
  </View>
);

// somewhere inside a react component
const ref = useRef<StorytellerHomeView | null>(null);

useEffect(() => {
  if (ref.current) {
    ref.current?.create();
  }
}, []);

return (
  <SafeAreaView style={styles.home}>
    <StorytellerHomeView
      configuration= {{
        identifier: this.state.identifier
      }}
      style={styles.home}
      ref={ref}
    />
  </SafeAreaView>
);

Reload Data

If you want to reload the data programmatically, you can use the following code:

v11.0.0+v10.x

const ref = useRef<StorytellerHomeViewInterface | null>(null);

const reloadData = () => {
  if (ref.current) {
    ref.current.reloadData();
  }
}

return (
  <SafeAreaView style={styles.container}>
    <StorytellerHomeView
      ref={ref}
      configuration={{
        homeId: "your-home-id"
      }}
      style={styles.home}
    />
  </SafeAreaView>
);

const ref = useRef<StorytellerHomeView | null>(null);

const reloadData = () => {
  if (ref.current) {
    ref.current.reloadData();
  }
}

render() {
  return (
    <SafeAreaView style={styles.container}>
      <StorytellerHomeView
        configuration= {{
          identifier: "id"
        }}
        style={styles.home}
        ref={ref}
      />
    </SafeAreaView>
  );
}