Skip to main content

​
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"
/>