Storyteller Home

StorytellerHomeView is the exported React Native 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 StorytellerHomeView component. Initialize the SDK before mounting it and give it a bounded height, for example inside a parent with flex: 1. Provide a non-empty configuration.homeId; the Android bridge renders no Home content when it is omitted. 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

import type { StyleProp, ViewStyle } from 'react-native';
import { UIStyle, type Theme, type StorytellerAnalyticsContext } from '@getstoryteller/react-native-storyteller-sdk';

interface StorytellerHomeViewProps {
  configuration: StorytellerHomeConfiguration;
  style?: StyleProp<ViewStyle>;
}

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

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, use UIStyle.auto, UIStyle.light, or UIStyle.dark; the default is UIStyle.auto.
• configuration.context: optional string key/value analytics context attached to Home events.

Home exposes reloadData() through StorytellerHomeViewInterface. It does not expose onDataLoadStarted or onDataLoadCompleted callbacks in React Native; use the native Home UI for its content loading state and handle initialization failures in your app.

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

import { useEffect, useRef } from 'react';
import { View } from 'react-native';
import { StorytellerHomeView } from '@getstoryteller/react-native-storyteller-sdk';

// Mount after SDK initialization has succeeded.
function HomeScreen() {
  const ref = useRef<StorytellerHomeView | null>(null);
  useEffect(() => {
    ref.current?.create();
  }, []);
  return (
    <View style={{ flex: 1 }}>
      <StorytellerHomeView
        configuration={{ homeId: 'your-home-id' }}
        style={{ flex: 1 }}
        ref={ref}
      />
    </View>
  );
}

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

import { useEffect, useRef } from 'react';
import { Button, View } from 'react-native';
import { StorytellerHomeView } from '@getstoryteller/react-native-storyteller-sdk';

// Mount after SDK initialization has succeeded.
function ReloadableHomeScreen() {
  const ref = useRef<StorytellerHomeView | null>(null);
  useEffect(() => {
    ref.current?.create();
  }, []);
  return (
    <View style={{ flex: 1 }}>
      <StorytellerHomeView
        configuration={{ homeId: 'your-home-id' }}
        style={{ flex: 1 }}
        ref={ref}
      />
      <Button title="Reload" onPress={() => ref.current?.reloadData()} />
    </View>
  );
}