FlatList in React Native

FlatList is a React Native component designed for displaying lists of data.

It provides features such as:

• Efficient list rendering.
• Scrolling.
• Item rendering.
• Item separators.
• Headers and footers.
• Pull-to-refresh support.
• End-of-list handling.

Import FlatList from React Native.

import {
    FlatList
} from 'react-native';

You can use it inside a functional component after importing it.

<FlatList
    data={items}
    renderItem={({ item }) => (

        <Text>
            {item}
        </Text>

    )}
/>

The data prop provides the list data and renderItem defines how each item should appear.

const students = [
    'Rahul',
    'Amit',
    'Priya',
    'Neha'
];

This array can be passed to the data prop.

const students = [
    'Rahul',
    'Amit',
    'Priya'
];

<FlatList
    data={students}
    renderItem={({ item }) => (

        <Text>
            {item}
        </Text>

    )}
/>

The renderItem prop defines the UI for each item in the list.

renderItem={({ item }) => (

    <Text>
        {item}
    </Text>

)}

Here, item represents the current list item.

Real applications usually contain objects instead of simple strings.

const students = [
    {
        id: '1',
        name: 'Rahul',
        course: 'React Native'
    },
    {
        id: '2',
        name: 'Amit',
        course: 'JavaScript'
    }
];

<FlatList
    data={students}
    renderItem={({ item }) => (

        <View>

            <Text>
                {item.name}
            </Text>

            <Text>
                {item.course}
            </Text>

        </View>

    )}
/>

The keyExtractor prop provides a unique key for each list item.

<FlatList
    data={students}
    keyExtractor={
        item => item.id
    }
    renderItem={({ item }) => (

        <Text>
            {item.name}
        </Text>

    )}
/>

Unique keys help React Native identify individual list items when the list changes.

A database ID is often a good choice:

keyExtractor={
    item => item.id
}

Avoid using unstable values as keys when a reliable unique ID is available.

const renderItem = ({
    item
}) => (

    <View style={styles.item}>

        <Text style={styles.name}>
            {item.name}
        </Text>

        <Text>
            {item.course}
        </Text>

    </View>

);

The item UI can be styled just like any other React Native component.

ItemSeparatorComponent can be used to display a separator between list items.

const Separator = () => (

    <View
        style={{
            height: 1,
            backgroundColor: '#CBD5E1'
        }}
    />

);

<FlatList
    data={students}
    renderItem={renderItem}
    ItemSeparatorComponent={Separator}
/>

The ListHeaderComponent displays content before the list items.

const Header = () => (

    <Text
        style={{
            fontSize: 24,
            fontWeight: 'bold'
        }}
    >
        Student List
    </Text>

);

<FlatList
    data={students}
    renderItem={renderItem}
    ListHeaderComponent={Header}
/>

The ListFooterComponent displays content after the list items.

const Footer = () => (

    <Text>
        End of Student List
    </Text>

);

<FlatList
    data={students}
    renderItem={renderItem}
    ListFooterComponent={Footer}
/>

ListEmptyComponent displays content when the data array is empty.

const EmptyList = () => (

    <Text>
        No students found.
    </Text>

);

<FlatList
    data={[]}
    renderItem={renderItem}
    ListEmptyComponent={
        EmptyList
    }
/>

Set horizontal to display list items from left to right.

<FlatList
    data={courses}
    horizontal
    renderItem={({ item }) => (

        <View style={styles.card}>

            <Text>
                {item.name}
            </Text>

        </View>

    )}
/>

The numColumns prop can display items in multiple columns.

<FlatList
    data={courses}
    numColumns={2}
    renderItem={({ item }) => (

        <View style={styles.gridItem}>

            <Text>
                {item.name}
            </Text>

        </View>

    )}
/>

This can be useful for simple grid layouts.

Each list item can be made interactive using Pressable.

<FlatList
    data={students}
    renderItem={({ item }) => (

        <Pressable
            onPress={() =>
                console.log(item.name)
            }
        >

            <Text>
                {item.name}
            </Text>

        </Pressable>

    )}
/>

FlatList can display data stored in component state.

const [students, setStudents] =
    useState([
        {
            id: '1',
            name: 'Rahul'
        },
        {
            id: '2',
            name: 'Amit'
        }
    ]);

<FlatList
    data={students}
    keyExtractor={
        item => item.id
    }
    renderItem={({ item }) => (

        <Text>
            {item.name}
        </Text>

    )}
/>

When the list data is stored in state, new items can be added by creating a new array.

setStudents([
    ...students,
    {
        id: '3',
        name: 'Priya'
    }
]);

FlatList will render the updated data.

setStudents(
    students.filter(
        student =>
            student.id !== '2'
    )
);

The item with ID 2 is removed from the data array.

The refreshing and onRefresh props can be used to implement pull-to-refresh behavior.

const [refreshing, setRefreshing] =
    useState(false);

const onRefresh = () => {

    setRefreshing(true);

    // Load updated data

    setRefreshing(false);

};

<FlatList
    data={students}
    renderItem={renderItem}
    refreshing={refreshing}
    onRefresh={onRefresh}
/>

The onEndReached event can run when the user scrolls near the end of the list.

const loadMore = () => {

    console.log(
        'Load more data'
    );

};

<FlatList
    data={students}
    renderItem={renderItem}
    onEndReached={loadMore}
/>

This is commonly used for loading additional data.

A loading indicator can be displayed while list data is being loaded.

const [loading, setLoading] =
    useState(true);

return (

    <View>

        {loading ? (

            <ActivityIndicator
                size="large"
            />

        ) : (

            <FlatList
                data={students}
                renderItem={renderItem}
            />

        )}

    </View>

);

FlatList can be used for many real-world screens.

• Student lists.
• Course lists.
• Product catalogs.
• Chat messages.
• Notifications.
• Attendance records.
• Payment history.
• Search results.
• News feeds.

• Forgetting to provide the data prop.
• Forgetting renderItem.
• Using duplicate or unstable keys.
• Mutating list data directly.
• Rendering unnecessarily complex components.
• Using FlatList incorrectly for very small static content.
• Not handling an empty list.
• Not providing loading feedback when data takes time to load.
• Adding expensive operations directly inside renderItem.

import React, {
    useState
} from 'react';

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

export default function App() {

    const [students] = useState([
        {
            id: '1',
            name: 'Rahul',
            course: 'React Native'
        },
        {
            id: '2',
            name: 'Amit',
            course: 'JavaScript'
        },
        {
            id: '3',
            name: 'Priya',
            course: 'Python'
        }
    ]);

    const handleStudentPress = (
        student
    ) => {

        console.log(
            student.name
        );

    };

    const renderItem = ({
        item
    }) => (

        <Pressable
            style={styles.card}
            onPress={() =>
                handleStudentPress(item)
            }
        >

            <Text style={styles.name}>
                {item.name}
            </Text>

            <Text style={styles.course}>
                {item.course}
            </Text>

        </Pressable>

    );

    return (

        <View style={styles.container}>

            <Text style={styles.title}>
                Student List
            </Text>

            <FlatList
                data={students}
                keyExtractor={
                    item => item.id
                }
                renderItem={renderItem}
                ItemSeparatorComponent={() => (
                    <View
                        style={
                            styles.separator
                        }
                    />
                )}
                ListEmptyComponent={() => (
                    <Text>
                        No students found.
                    </Text>
                )}
            />

        </View>

    );

}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        padding: 20
    },

    title: {
        fontSize: 28,
        fontWeight: 'bold',
        marginBottom: 20
    },

    card: {
        padding: 16,
        borderRadius: 10,
        backgroundColor: 'white',
        borderWidth: 1,
        borderColor: '#CBD5E1'
    },

    name: {
        fontSize: 20,
        fontWeight: 'bold'
    },

    course: {
        marginTop: 5,
        fontSize: 16
    },

    separator: {
        height: 10
    }

});

• Provide a stable unique key for each item.
• Keep renderItem simple and efficient.
• Use FlatList for larger or dynamic lists.
• Handle empty states.
• Show loading indicators when appropriate.
• Use pull-to-refresh when useful.
• Use pagination or incremental loading for large datasets.
• Avoid unnecessary calculations during item rendering.
• Keep list item components reusable.
• Use suitable list configuration for the application's requirements.

Create Data
        ↓
Import FlatList
        ↓
Pass Data to FlatList
        ↓
Create renderItem
        ↓
Display Each Item
        ↓
Add keyExtractor
        ↓
Style List Items
        ↓
Handle Item Press
        ↓
Handle Empty State
        ↓
Add Refresh or Pagination
        ↓
Optimize the List

FlatList is an essential component for building mobile applications that display collections of data. It works well with state, props, events, Pressable, API data and reusable components.