ThemeFlatList

A themed wrapper around React Native's FlatList component that supports styling with Tailwind CSS classes and automatic theme adaptation.

Import

import ThemeFlatList from '@/components/ThemeFlatList';

Features

Full FlatList functionality with typing support
Tailwind CSS styling capabilities
Automatic light/dark mode adaptation
Configurable styling via className prop
Type-safe generic implementation

Props

Prop	Type	Default	Description
`className`	`string`	`''`	Tailwind CSS classes to apply
`...props`	`FlatListProps<T>`	—	All standard FlatList props

Basic Usage

// Basic list of strings
<ThemeFlatList
  data={['Item 1', 'Item 2', 'Item 3']}
  renderItem={({ item }) => (
    <ThemedText className="p-4">{item}</ThemedText>
  )}
  className="bg-light-primary dark:bg-dark-primary"
/>
 
// List of objects with styling
<ThemeFlatList
  data={users}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <View className="p-4 border-b border-gray-200 dark:border-gray-700">
      <ThemedText className="font-bold">{item.name}</ThemedText>
      <ThemedText className="text-sm">{item.email}</ThemedText>
    </View>
  )}
  className="bg-light-primary dark:bg-dark-primary"
  contentContainerStyle={{ paddingBottom: 20 }}
/>
 
// With section headers and separators
<ThemeFlatList
  data={items}
  renderItem={({ item }) => (
    <ThemedText className="p-4">{item.title}</ThemedText>
  )}
  ItemSeparatorComponent={() => (
    <View className="h-px bg-gray-200 dark:bg-gray-700" />
  )}
  ListHeaderComponent={() => (
    <ThemedText className="p-4 font-bold text-lg">My Items</ThemedText>
  )}
  className="bg-light-primary dark:bg-dark-primary"
/>
 
// With refreshing capability
<ThemeFlatList
  data={data}
  renderItem={renderItem}
  refreshing={isRefreshing}
  onRefresh={handleRefresh}
  className="bg-light-primary dark:bg-dark-primary"
/>

ThemeFlatList

ThemeFlatList

Import

Features

Props

Basic Usage

On this page