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.
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;
style: ViewStyle;
}
To customize the layout of a component you can use the following props:
categories
: assigns a list of Story categories to be displayed inside a rowcellType
: the style of a cell, it can be either round
or square
. default is square
uiStyle
sets if Storyteller is rendered in light or dark mode, it can be auto
, light
, or dark
, the default value is auto
.theme
: use this property to customize the appearance of the Storyteller List and its various UI elements. You can read more about the various properties in Themes. There is also an example of this in the sample project.Callbacks used for StorytellerListViewDelegate
methods are the following props:
onDataLoadStarted
: called when the SDK begins loading Story data - this could be used as a trigger to show a loading spinner in your app, for exampleonDataLoadCompleted
: called when the SDK finishes loading Story data. This callback includes a count of the number of Stories about to be renderedonStoryDismiss
: called when a user exits the Story player viewonTileBecameVisible
: called when a tile in the row becomes visibleYou 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 modeUIStyle.light
- force the SDK to use the light themeUIStyle.dark
- force the SDK to use the dark theme