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. The demo video by Ahrens. Image link goes to YouTube. posted on Facebook Update 4: It’s stable enough now to be exported by default from react-native-immutable-list-view with React Native v0.43. No custom downloads needed! Keep reading for easy migration steps. 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. Update 1: The original ListView is planned to be deprecated . Earlier in February, an experimental new React Native called . It significantly improves memory usage and efficiency (especially for large or complex lists) while also significantly simplifying the props — no more necessary! Spencer Ahrens published component FlatList dataSource By default, 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 . This is extremely useful for non-standard data formats such as Immutable data or complex nesting. You’ll need to use the underlying component for this. FlatList getItem VirtualizedList Disclaimer: I’m the creator of , which to use Immutable data with the old as well as the new . [react-native-immutable-list-view](https://github.com/cooperka/react-native-immutable-list-view) makes it easier ListView VirtualizedList 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 , it’s even more straightforward: [ImmutableListView](https://github.com/cooperka/react-native-immutable-list-view) 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 They currently exist only on , so here’s a quick script that will download them straight into your project (assuming you’ve already installed using npm or Yarn). Copy this whole command into your terminal: [Update 4: this step is no longer necessary as of React Native v0.43]. [master](https://github.com/facebook/react-native/tree/master/Libraries/CustomComponents/Lists) react-native This will download the latest version of and its related dependencies into your app’s so you can refer to it as in the examples above, without needing to checkout React Native’s and build it from source. FlatList node_modules master You could, for example, add the above command to your package’s script to make sure the files exist for every developer and build pipeline on your team (thanks to for this tip). postinstall Bruno Lemos There’s a more extensive 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 that should work out of the box with no extra steps other than copying the files and running . Feel free to post an with any questions — I’m happy to help. [FlatListExample](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/FlatListExample.js) example app npm install issue Final note: intentionally will like ; for this there’s a separate component called , or you can use the lower-level directly. FlatList never support section headers [ListView](https://facebook.github.io/react-native/docs/listview.html#rendersectionheader) has SectionList VirtualizedList If you found this useful, please help by so others can find it too. Thank you! tapping the 👏 button as many times as you’d like Keep an eye out for more updates — I’ll keep this post updated.

Facebook

YouTube

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

React Native’s new FlatList component

Too Long; Didn't Read

Companies Mentioned

Kevin Cooper

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

React Native’s new FlatList component

Too Long; Didn't Read

Companies Mentioned

Kevin Cooper

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES