Refreshing a FlatList in React Native

Reading time: < 1 minute

If we remove or add a new item to a FlatList in React Native, we need to follow these steps:

First, we need to create a boolean state:

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

Then, we assign it to the FlatList using the extraData attribute:

<FlatList
    data={itemList}
    extraData={refreshing}
    renderItem={({ item }) =>
        <Row
            element={item}
        />
    }
/>

When we want to refresh the list, we do the following:

setRefreshing(!refreshing);

And that’s it! The list will re-render and display the updated content on the screen.

DevCodeLight