React Native FlatList

Summary: In this tutorial, you will learn how to use the React Native FlatList component to render a list of items efficiently.

Introduction to React Native FlatList component

The ScrollView component renders all nested components once even though some are not visible on the screen. This is not efficient when you have a large number of nested components.

To render a large list efficiently, you can use the FlatList component. The FlatList component renders nested components lazily as they appear on the screen.

Additionally, the FlatList component supports many useful features:

Display the list horizontally or vertically.
Render list items in multiple columns.
Support list header, list footer, and item separator.
Pull to refresh.
Scroll loading.
ScrollToIndex support.
Configurable viewability callbacks.

To use the FlatList component, you follow these steps:

First, import the FlatList component from the react-native library:

import { FlatList } from 'react-native';Code language: JavaScript (javascript)

Second, pass arguments to the data and renderItem props:

<FlatList
   data={items}
   renderItem={renderItem}
/>Code language: JavaScript (javascript)

FlatList requires only two props:

data is an array (or array-like) of items to render.
renderItem is a callback function that defines how to render each item.

The renderItem callback takes an object and returns a JSX element that defines how each item should be rendered:

renderItem({ item, index, separators})Code language: JavaScript (javascript)

In this renderItem function:

item is an item in the data array.
index stores the index of the item in the data array.
separators is an object that provides methods to handle the rendering of an item separator. In practice, you’ll rarely use this parameter.

The FlatList has an optional but important prop called keyExtrator.

The keyExtractor defines a function that extracts a unique key for a given item. React native uses the key for caching and tracking item re-ordering.

By default, the keyExtractor uses the key or id property of the item (item.id or item.key), and then falls back to using the index. So if the item in the list has either id or key property, you can ignore the keyExtractor prop.

We’ll demonstrate how to use the FlatList component to render the following items:

export const items = [
    { id: 1, name: 'Apple', emoji: '🍎' },
    { id: 2, name: 'Banana', emoji: '🍌' },
    { id: 3, name: 'Cherry', emoji: '🍒' },
    { id: 4, name: 'Grapes', emoji: '🍇' },
    { id: 5, name: 'Carrot', emoji: '🥕' },
    { id: 6, name: 'Potato', emoji: '🥔' },
    { id: 7, name: 'Broccoli', emoji: '🥦' },
    { id: 8, name: 'Spinach', emoji: '🥬' },
    { id: 9, name: 'Milk', emoji: '🥛' },
    { id: 10, name: 'Cheese', emoji: '🧀' },
    { id: 12, name: 'Butter', emoji: '🧈' }
];Code language: JavaScript (javascript)

Basic FlatList example

The following example illustrates how to use the FlatList component to render the items:

import { View, Text, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { items } from './data/items';


const App = () => {
    const renderItem = ({ item }) => {
        return <View style={styles.listItem}>
            <Text style={styles.listTitle}>{item.name}</Text>
            <Text style={styles.listTitle}>{item.emoji}</Text>
        </View>
    }

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                style={styles.list}
                data={items}
                renderItem={renderItem} />
        </SafeAreaView>
    )
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    list: {
        flex: 0.5,
        fontSize: 16,
    },
    listItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 8,
    },
    listTitle: {
        fontSize: 40
    },
});


export default App;Code language: JavaScript (javascript)

Output:

How it works.

First, use the FlatList component to render the items:

<FlatList
   style={styles.list}
   data={items}
   renderItem={renderItem} />Code language: HTML, XML (xml)

In this code, we pass the items array, renderItem function, and styles.list to the FlatList component.

Second, define the renderItem function to render each item:

const renderItem = ({ item }) => {
   return <View style={styles.listItem}>
            <Text style={styles.listTitle}>{item.name}</Text>
            <Text style={styles.listTitle}>{item.emoji}</Text>
        </View>
}Code language: JavaScript (javascript)

The renderItem function takes an item and renders its name and emjoi separately.

To display name and emoji as separate columns, we set the flexDirection to 'row' and justifyContent to 'space-between'.

Displaying a horizontal list

The following example uses the FlatList component to display a horizontal list:

import { View, Text, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { items } from './data/items';


const App = () => {

    const renderItem = ({ item }) => {
        return <View style={styles.listItem}>
            <Text style={styles.listEmoji}>{item.emoji}</Text>
            <Text style={styles.listTitle}>{item.name}</Text>
        </View>
    }

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                style={styles.list}
                horizontal
                data={items}
                renderItem={renderItem} />
        </SafeAreaView>
    )
}


const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    list: {
        fontSize: 16,

    },
    listItem: {
        alignItems: 'center',
        height: 120,
        padding: 16,
        backgroundColor: '#efefef',
        borderColor: '#ccc',
        borderRadius: 16,
        borderWidth: 1,
        marginHorizontal: 8,
        marginVertical: 4,

    },
    listEmoji: {
        fontSize: 48,
    },
    listTitle: {
        fontSize: 18,
    },
});


export default App;Code language: JavaScript (javascript)

Display multiple columns

The following example sets the number of columns of the FlatList components to three using the numColumns prop:

import { View, Text, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { items } from './data/items';


const App = () => {

    const renderItem = ({ item }) => {
        return <View style={styles.listItem}>
            <Text style={styles.listEmoji}>{item.emoji}</Text>

        </View>
    }

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                style={styles.list}
                data={items}
                keyExtractor={item => item.id}
                renderItem={renderItem}
                numColumns={3}

            />
        </SafeAreaView>
    )
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

    list: {
        fontSize: 16,
    },
    listItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 8,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 8,
        marginHorizontal: 8,
        marginVertical: 4,
    },
    listEmoji: {
        fontSize: 48,
    },

});

export default App;
Code language: JavaScript (javascript)

Output:

FlatList with header, footer, and item separator

The following example shows how to render a list header, list footer, and item separator for a FlatList:

import { View, Text, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { items } from './data/items';


const App = () => {

    const renderItem = ({ item }) => {
        return <View style={styles.item}>
            <Text style={styles.itemTitle}>{item.name}</Text>
            <Text style={styles.itemTitle}>{item.emoji}</Text>
        </View>
    }

    const header = () => (
        <Text style={styles.header}>My Favorite List</Text>

    );

    const footer = () => (
        <Text style={styles.footer}>Fruit, drinks and food.</Text>
    );

    const separator = () => (
        <View style={styles.separator} />
    );

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                style={styles.list}
                data={items}
                renderItem={renderItem}
                ListHeaderComponent={header}
                ListFooterComponent={footer}
                ItemSeparatorComponent={separator}
            />
        </SafeAreaView>
    )
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

    list: {
        flex: 0.5,
        fontSize: 16,
    },
    header: {
        fontSize: 32,
        marginVertical: 12,
        padding: 8,
    },
    footer: {
        padding: 8,
    },
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 8,
    },
    itemTitle: {
        fontSize: 24
    },
    separator: {
        height: 1,
        width: '100%',
        backgroundColor: '#ccc',
    },
});


export default App;Code language: JavaScript (javascript)

Output:

In this example, we use the ListHeaderComponent, ListFooterComponent, and ItemSeparatorComponent props to render the list header, list footer, and item separator for the FlatList.

Summary

Use the FlatList component to render a large list efficiently.
The FlatList component requires data and renderItem props. The data represent a list of items to render and renderItem defines how each item should be rendered.

Was this tutorial helpful ?