FlatList Component

Efficient List Rendering

When you need to display a long list of items — like a social media feed, chat messages, or a list of products — FlatList is the way to go. Unlike ScrollView which renders everything at once, FlatList only renders the items currently visible on screen. This makes it much more efficient for large datasets.

Think of FlatList like a window — it only shows you what you're looking at, and loads more as you scroll. This means you can have thousands of items in your list without slowing down the app.

Basic FlatList

Here's how to create a simple list with FlatList:

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

const DATA = [
  { id: '1', title: 'First Item' },
  { id: '2', title: 'Second Item' },
  { id: '3', title: 'Third Item' },
  { id: '4', title: 'Fourth Item' },
  { id: '5', title: 'Fifth Item' },
];

function MyList() {
  return (
    <FlatList
      data={DATA}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.title}>{item.title}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  item: { padding: 20, borderBottomWidth: 1, borderBottomColor: '#eee' },
  title: { fontSize: 18 },
});

export default MyList;

FlatList requires two key props: data (your array of items) and renderItem (a function that returns what each item looks like). The keyExtractor tells React Native how to uniquely identify each item — this helps with performance and updates.

Adding Headers and Footers

FlatList makes it easy to add content before and after your list items. This is useful for section headers, loading indicators, or end-of-list messages.

<FlatList
  data={DATA}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Text>{item.title}</Text>}
  ListHeaderComponent={() => <Text style={{ fontSize: 24 }}>My List</Text>}
  ListFooterComponent={() => <Text>End of list</Text>}
  ListEmptyComponent={() => <Text>No items found</Text>}
/>

The ListHeaderComponent appears above all items, ListFooterComponent appears below, and ListEmptyComponent shows when the data array is empty. These props keep your list organized and informative.

Pull to Refresh and Infinite Scroll

Two common patterns in mobile apps are pull-to-refresh and loading more content as you scroll. FlatList supports both natively.

<FlatList
  data={DATA}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Text>{item.title}</Text>}
  refreshing={isRefreshing}
  onRefresh={handleRefresh}
  onEndReached={loadMore}
  onEndReachedThreshold={0.5}
/>

The refreshing and onRefresh props handle pull-to-refresh — set refreshing to true while loading and call your refresh function in onRefresh. The onEndReached fires when the user scrolls near the end, and onEndReachedThreshold controls how close to the end before triggering (0.5 means 50% from the end).