Storyteller List Component

The Storyteller SDK provides two components: StorytellerRowView and StorytellerGridView. The props for these components are nearly identical - any differences are discussed in the relevant sections below.

Props

The shared props between StorytellerRowView and StorytellerGridView are:

interface StorytellerListViewProps {
  categories?: Array<string>;
  cellType?: string;
  theme?: Theme;
  uiStyle?: UIStyle;
  onDataLoadStarted?: () => void;
  onDataLoadCompleted?: (
    success: boolean,
    error: Error,
    dataCount: number
  ) => void;
  onStoryDismiss?: () => void;
  onTileBecameVisible?: (index: number) => void;
  onOpenDeeplinkResult?: (result: boolean) => void;
  style: ViewStyle;
}

To customize layout of component you can use following props:

• categories: assigns list of stories category to be displayed inside row
• cellType: the style of cell, it can be either round or square. default is square
• uiStyle sets whether Storyteller should be rendered in light or dark mode, it can be auto, light, or dark, the default value is auto.
• theme: Use this property customize the appearance of the Storyteller List and its various UI elements. You can read more about the various properties in our specifics Themes document. There is also an example of this in the sample project.
• uiStyle sets whether Storyteller should be rendered in light or dark mode, it can be auto, light, or dark, the default value is auto.

The uiStyle property can be used to set the overall color schemes, suitable for dark or light modes. This is optional and can be adjusted for additional UI mode control.

• ListViewStyle.auto - default value, the SDK will adjust its color scheme automatically according to the current system UI mode
• ListViewStyle.light - force the SDK to use the light theme
• ListViewStyle.dark - force the SDK to use the dark theme

Callbacks used for StorytellerListViewDelegate methods are following props:

• onDataLoadStarted: called when the SDK begins loading stories data - this could be used as a trigger to show a loading spinner in your app, for example
• onDataLoadCompleted: called when the SDK finishes loading story data. This callback includes a count of the number of stories about to be rendered
• onStoryDismiss: called when a user exits the story player view
• onTileBecameVisible: called when a tile in the row becomes visible
• onOpenDeeplinkResult: called when the SDK opens a deep link - this will be true if successful, otherwise false

You can find more information about StorytellerListViewDelegate on iOS and Android

The uiStyle property can be used to set the overall color schemes, suitable for dark or light modes. This is optional and can be adjusted for additional UI mode control.

• UIStyle.auto - default value, the SDK will adjust its color scheme automatically according to the current system UI mode
• UIStyle.light - force the SDK to use the light theme
• UIStyle.dark - force the SDK to use the dark theme