# ContentList

Canonical page: https://docs.ovok.com/native-sdk/guide/components/content/content-list

`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`.

```tsx
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 [#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 [#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 [#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 [#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.