Including: How to migrate from
ListView (soon to be deprecated), and how to try it in your own app without building React Native from source.
Update 3: It’s no longer experimental as of March 1. Everything below is still up-to-date and accurate.
Update 2: There are now multiple new components: FlatList, SectionList, VirtualizedList, and VirtualizedSectionList. Their locations have moved several times, but the links below should be up-to-date.
Earlier in February, Spencer Ahrens published an experimental new React Native component called
FlatList. It significantly improves memory usage and efficiency (especially for large or complex lists) while also significantly simplifying the props — no more
FlatList expects your data to be a simple array of values. One big advantage of the new API, however, is the ability to provide your own implementation of
getItem. This is extremely useful for non-standard data formats such as Immutable data or complex nesting. You’ll need to use the underlying
VirtualizedList component for this.
Here’s a migration guide from the old component if you want to try it yourself. As you can see, your code should get a lot simpler (red means delete, green means add):
Or if you were previously using
ImmutableListView, it’s even more straightforward:
The only caveat here is that you need to actually get the source code for the new React Native components in order to use them [Update 4: this step is no longer necessary as of React Native v0.43]. They currently exist only on
master, so here’s a quick script that will download them straight into your project (assuming you’ve already installed
react-native using npm or Yarn). Copy this whole command into your terminal:
This will download the latest version of
FlatList and its related dependencies into your app’s
node_modules so you can refer to it as in the examples above, without needing to checkout React Native’s
master and build it from source.
You could, for example, add the above command to your package’s
postinstall script to make sure the files exist for every developer and build pipeline on your team (thanks to Bruno Lemos for this tip).
There’s a more extensive
FlatListExample in React Native’s repo if you want to get a feel for the full set of props and how powerful the new component can be. I also have my own example app that should work out of the box with no extra steps other than copying the files and running
npm install. Feel free to post an issue with any questions — I’m happy to help.
FlatList intentionally will never support section headers like
ListView has; for this there’s a separate component called
SectionList, or you can use the lower-level
If you found this useful, please help by tapping the 👏 button as many times as you’d like so others can find it too. Thank you!
Keep an eye out for more updates — I’ll keep this post updated.
Create your free account to unlock your custom reading experience.