React Native FlatList: A Complete Guide To Creating the List

Introduction

Displaying lists is a common requirement in mobile apps. Whether you’re showing a list of products, contacts, or messages, handling large datasets efficiently is crucial. In React Native, FlatList is the go-to solution for rendering lists with optimal performance.

In this guide, we’ll cover what FlatList is, how it works, and how to use it efficiently in your React Native app.

What is FlatList?

FlatList is a performance-optimized list component in React Native designed for handling large datasets. Unlike basic methods like map(), FlatList only renders items that are currently visible on the screen, making it highly efficient.

Why Use FlatList?

Better Performance: Renders only visible items, reducing memory usage.
Built-in Optimization: Supports lazy loading and virtualized rendering.
Smooth Scrolling: Handles large lists without lag.
Customizable Layouts: Supports different list styles and structures.

Basic Usage of FlatList

1. Import FlatList

Before using FlatList, ensure you import it from react-native.

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

2. Define Your Data

Create an array containing the list items.

const DATA = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
];

3. Implement FlatList

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

✅ data – The array of items to be displayed.
✅ keyExtractor – Assigns a unique key to each item.
✅ renderItem – Defines how each item should be rendered.

Customizing FlatList

Adding a Separator Between Items

To add a separator line between list items, use ItemSeparatorComponent.

const MyList = () => {
  return (
    <FlatList
      data={DATA}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>{item.title}</Text>
        </View>
      )}
      ItemSeparatorComponent={() => <View style={{ height: 1, backgroundColor: '#ccc' }} />}
    />
  );
};

Displaying a Header and Footer

You can add headers and footers to a FlatList.

const MyList = () => {
  return (
    <FlatList
      data={DATA}
      keyExtractor={(item) => item.id}
      ListHeaderComponent={() => <Text style={{ fontSize: 20 }}>List Header</Text>}
      ListFooterComponent={() => <Text style={{ fontSize: 16 }}>List Footer</Text>}
      renderItem={({ item }) => (
        <View>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
};

✅ Headers – Useful for titles or category names.
✅ Footers – Great for adding additional information below the list.

Handling Empty Lists

What if the list is empty? You can use ListEmptyComponent to display a message.

const MyList = () => {
  return (
    <FlatList
      data={[]}
      ListEmptyComponent={() => <Text>No items available</Text>}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  );
};

Optimizing FlatList Performance

To make FlatList even faster, apply these optimizations:

1. Use `initialNumToRender`

This limits the number of items rendered initially.

<FlatList data={DATA} initialNumToRender={5} renderItem={...} />

2. Use `windowSize` for Better Memory Management

Adjusts how many items are kept in memory.

<FlatList data={DATA} windowSize={10} renderItem={...} />

3. Use `removeClippedSubviews` for Large Lists

Improves scrolling performance.

<FlatList data={DATA} removeClippedSubviews={true} renderItem={...} />

FlatList vs. ScrollView: Which One to Use?

Feature	FlatList	ScrollView
Best for Large Data	Yes	No
Lazy Loading	Yes	No
Performance	High	Low
Custom Layouts	Yes	No

📌 Use FlatList when handling long lists. ScrollView loads everything at once, which can cause performance issues.

Final Thoughts

FlatList is the best way to handle lists in React Native. It ensures smooth scrolling, better memory usage, and easy customization. Whether you’re building a chat app, product list, or news feed, FlatList makes list rendering effortless.

Try implementing it in your next React Native project and see how it improves performance!

📌 Further Reading: React Native FlatList Docs