FlatList Component in React Native

FlatList is React Native's performance-optimized, recommended default component for displaying long lists – the direct successor to ListView.

1. Description

Unlike ScrollView, FlatList only renders the currently visible (or soon-to-be-visible) items at any given time – not the entire list immediately. This is called "virtualization" and keeps even lists with thousands of items scrolling smoothly.

2. Short example

<FlatList
  data={['Apple', 'Pear', 'Cherry']}
  keyExtractor={(item) => item}
  renderItem={({ item }) => <Text>{item}</Text>}
/>

3. Complete project

npx create-expo-app flatlist-demo
cd flatlist-demo

App.js

import { View, Text, FlatList, StyleSheet } from 'react-native';

const TASKS = Array.from({ length: 50 }, (_, i) => ({
  id: String(i + 1),
  title: `Task number ${i + 1}`,
}));

export default function App() {
  return (
    <View style={styles.container}>
      <FlatList
        data={TASKS}
        keyExtractor={(item) => item.id}
        renderItem={({ item, index }) => (
          <View style={styles.row}>
            <Text style={styles.number}>{index + 1}.</Text>
            <Text>{item.title}</Text>
          </View>
        )}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
        ListHeaderComponent={<Text style={styles.header}>50 Tasks</Text>}
        ListEmptyComponent={<Text>No tasks.</Text>}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60 },
  header: { fontSize: 20, fontWeight: 'bold', padding: 16 },
  row: { flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 16 },
  number: { width: 32, color: '#6b7280' },
  separator: { height: 1, backgroundColor: '#e5e7eb', marginHorizontal: 16 },
});

4. Explanation

data – the array of raw data.
keyExtractor – turns each item into a unique string key; essential for correctly redrawing on changes.
renderItem – receives an object {{ item, index }} and returns the JSX to display.
ItemSeparatorComponent – rendered BETWEEN (not before or after) each pair of items.
ListHeaderComponent/ListEmptyComponent – a header, or what to show when the data array is empty.

5. Outputs

Ausgabe

A heading "50 Tasks", below it a scrollable, numbered list ("1. Task number 1" through "50. Task number 50"), each row separated from the next by a thin gray line.

Tipp: While scrolling through a very long FlatList, items far off-screen get removed from memory and recreated as needed – so expensive calculations inside renderItem should be avoided where possible or guarded with useMemo (see the React for Beginners tutorial's useMemo/useCallback chapter).