What's React Native's new FlatList?
Are you dealing with a scenario where you want to show a lot of data in a list? You should probably check React Native's new FlatList Component.
Subscribe to our awesome Newsletter.
ScrollViews & ListViews
Earlier in React Native, for showing a list of items we’ve used the
ListView component and sometimes for simplicity we’ve used
ScrollView as well.
But the problem arises when you’re handling a huge data set, say 1000s of items inside the page. These components are not that efficient to handle such a big list.
Thankfully the team has brought a new component
FlatList for handling bigger lists. The main idea behind this is that only the visible items are rendered and stored in the memory while others stay out of the memory, thus even if there are 1000s in terms of data, only 10 or 15 will be rendered at once.
Import the component from
react-native package just like any other React Native component.
Before heading to the actual implementation I’ll explain the basic key props that are necessary for using the component.
- data - The array of items that need to be listed.
- renderItem - Function that returns the component of each item.
- keyExtractor - Extract the key of each item: it can be the index or any unique field in the data.
Let’s build a conversation screen with FlatList, here assume that the guy is very popular and has a lot of conversations (say 1000)
The data that is passed as prop should be an array of objects. For example just like below.
Once you have the data you can now render the component like below and passing the corresponding props.
As you see in the above code it is a mix of both ScrollView and ListView, here we’re not creating any data source and it’s very straightforward, thus reducing the complexity of the rendering each element.
Item Render Function
The function that has been passed as
renderItem prop will be used to return the component that will be rendered for each item.
This function takes an object parameter that has the current instance item and the index as the fields. Thus we are extracting the item and the index and using it inside the return. Also if you notice we’re not creating
key prop here as it’s handled by
To make it look better we’ve added few styles.
Now if you see the list, it looks like this.
Scrolling through 1000 items
FlatList comes with more features like Header support, Footer support, Separator support, Pull to Refresh etc.
Let’s try adding these to our list.
Header & Footer
For creating a header and footer for the list you can use the custom components and pass it to the
Separators are usually built with border property, but if you want something more than just a line you can use
ItemSeparatorComponent to render custom separator.
I’ve created a simple line with a smaller width just to differentiate from border like below.
When you have a very highly dynamic list which will change over time, we should provide the user an ability to refresh the content whenever they wish. That’s why we have
RefreshControl component and it went well with FlatList as well. You can use it like the one below.
RefreshControl Component first.
And now I’ve created a function that will mock the refresh functionality with a timeout.
And finally, pass the RefreshControl component to FlatList as props.
Pull To Refresh
FlatList will support most of the ScrollView props as well, the few important things are.
So, if you’re looking for a list component that works even with large data set, FlatList is your right choice.
The complete source code of this sample application is here