import ThemeFlatList from '@/components/ThemeFlatList';

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