Skip to main content

​
Overview

The VirtualizedList component is the base implementation for FlatList and SectionList, providing highly performant list rendering. 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-bg-blue-500").

​
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).
​
endFillColorClassName
string
Maps to the endFillColor prop. Requires accent- prefix for color values.
​
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).

​
Usage Example

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

<VirtualizedList
  data={items}
  getItem={(data, index) => data[index]}
  getItemCount={(data) => data.length}
  renderItem={({ item }) => <Text className="p-4">{item.name}</Text>}
  className="flex-1"
  contentContainerClassName="p-4"
  endFillColorClassName="accent-bg-gray-100 dark:accent-bg-gray-900"
/>
⌘I