Skip to main content

​
Overview

The FlatList component is a performant interface for rendering long 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.
​
columnWrapperClassName
string
Maps to the columnWrapperStyle prop. Use regular Tailwind classes (no accent- prefix needed).
​
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 { FlatList, Text } from 'react-native'

<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  className="flex-1"
  contentContainerClassName="p-4 gap-2"
  endFillColorClassName="accent-gray-100 dark:accent-gray-900"
/>