SectionList

Learn how to use SectionList with Uniwind className props

Overview

The SectionList component is a performant interface for rendering sectioned lists. Uniwind provides className prop support for styling various parts of this component.

Styling Convention

For style props: Use regular Tailwind classes directly (e.g., className="p-4").

For non-style props (like color): Use the accent- prefix (e.g., colorClassName="accent-blue-500").

Since 1.6.2: Passing a className without the accent- prefix to a color prop will log a warning to the development console.

Uniwind Bindings

className · string

Maps to the style prop. Use any Tailwind utility classes.

contentContainerClassName · string

Maps to the contentContainerStyle prop. Use regular Tailwind classes (no accent- prefix needed).

ListFooterComponentClassName · string

Maps to the ListFooterComponentStyle prop. Use regular Tailwind classes (no accent- prefix needed).

ListHeaderComponentClassName · string

Maps to the ListHeaderComponentStyle prop. Use regular Tailwind classes (no accent- prefix needed).

endFillColorClassName · string

Maps to the endFillColor prop. Requires accent- prefix for color values.

Usage Example

import { SectionList, Text } from 'react-native'

<SectionList
  sections={[
    { title: 'Section 1', data: ['Item 1', 'Item 2'] },
    { title: 'Section 2', data: ['Item 3', 'Item 4'] }
  ]}
  renderItem={({ item }) => <Text className="p-4">{item}</Text>}
  renderSectionHeader={({ section }) => (
    <Text className="bg-gray-100 p-2 font-bold">{section.title}</Text>
  )}
  className="flex-1"
  contentContainerClassName="p-4"
  endFillColorClassName="accent-gray-100 dark:accent-gray-900"
/>