Skip to content

Storyteller Home#

StorytellerHome is a component which 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 in both Compose and Fragment. It includes a pull-to-refresh (PTR) mechanism, but you can also use the reloadData method to refresh data on your side.

Defaults: If theme is not provided, the global theme set via Storyteller.theme will be used. If uiStyle is not provided, it defaults to StorytellerListViewStyle.AUTO, which follows the system's light/dark mode setting.

context - optional context data that will be included in analytics callbacks for attribution. This allows you to track which sources drive engagement with your home content. See Analytics for more details.

Compose#

// without reload data outside sdk
StorytellerHome(
  homeId = "home",
  theme = yourTheme,
  uiStyle = StorytellerListViewStyle.AUTO,
  context = mapOf("placementId" to "home_screen", "location" to "Home"),
  modifier = Modifier
)

// with reload data outside sdk
val state = rememberStorytellerHomeState()

StorytellerHome (
  homeId = "home",
  theme = yourTheme,
  uiStyle = StorytellerListViewStyle.AUTO,
  context = mapOf("placementId" to "home_screen", "location" to "Home"), // Optional analytics context
  state = state,
  modifier = Modifier
)

// ...

// call for reload data outside sdk
suspend fun reloadData() {
  state.reloadData()
}

Fragment#

val fragment = StorytellerHomeFragment.create(
  homeId = "home",
  context = mapOf("placementId" to "home_screen", "location" to "Home"), // Optional analytics context
  // theme = yourTheme, // Optional: Defaults to Storyteller.theme
  // uiStyle = StorytellerListViewStyle.AUTO, // Optional: Defaults to AUTO
  )

// call for reload data outside sdk
fragment.reloadData()