Skip to main content

ContentList

ContentList is a typed FlatList for grouped content. It does not own a content model, navigation action, or data fetching; the caller provides the list data and renderItem.

import { ContentList } from "@ovok/native";

<ContentList
  data={sections}
  renderItem={({ item }) => (
    <ContentList.Section>
      <ContentList.Header>
        <ContentList.Title>{item.category.title}</ContentList.Title>
        <ContentList.ViewAll onPress={() => openAll(item.category)} />
      </ContentList.Header>
      <ContentList.HorizontalList data={item.contents} renderItem={renderContent} />
    </ContentList.Section>
  )}
/>;

Root​

The root accepts FlatListProps<T> except renderItem, which is required. Its generic data must contain category and contents; the default data helper also expects each content item to have title and an optional imageUrl. The SDK adds a themed gap to contentContainerStyle.

Compound exports​

  • Section: a View with a themed gap; it accepts ViewProps.
  • Header: a row View with centered items and space-between justification; it accepts ViewProps.
  • Title: Paper Text with variant="titleLarge"; it accepts Paper text props.
  • ViewAll: Paper Text with variant="labelSmall", onPress, optional string children, and a themed disabled text color. Without children it uses content.view-all from the app's i18n resources.
  • HorizontalList: horizontal FlatList with hidden horizontal scroll indicator and a themed gap. It accepts FlatListProps except the fixed horizontal flags and renderItem, plus horizontalPadding.

HorizontalList behavior​

horizontalPadding defaults to 0 and is applied as list content padding and a matching negative horizontal margin. When renderItem is omitted, each item must have title and optional imageUrl; the SDK renders a ContentCard with an empty press handler. Provide renderItem for real navigation, actions, or a different item shape.

The default card width is derived from the window width and capped at 200. The current implementation's subtraction expression does not make the padding multiplier fully symmetric, so treat horizontalPadding as a visual hint and verify layout on target device sizes.

Localization and integration boundaries​

Only ViewAll supplies fallback text, through content.view-all. Titles, images, labels, selection state, and navigation belong to the integrating app. These primitives work for a single content type or a full catalog without assuming a particular backend or router.