Learn about React Native’s experimental new FlatList component:  #ReactJS #JavaScript
  • React Native’s experimental new FlatList componentIncluding: How to migrate from ListView, and how to try it in your own app without building React Native from source.The demo video posted on Facebook by Ahrens.
  • Image link goes to YouTube.Earlier this month, Spencer Ahrens published an experimental new React Native component called FlatList.
  • You’ll need to use the underlying VirtualizedList component for this.Disclaimer: I’m the creator of which makes it easier to use Immutable data with the old ListView as well as the new 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 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.
  • Copy this 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.Keep in mind, the new components are not yet ready for production use, and the API could change at any time — again, it’s experimental — but give it a try!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.

Read more


@ReactiveConf: “Learn about React Native’s experimental new FlatList component: #ReactJS #JavaScript” open tweet »

Show your support

Clapping shows how much you appreciated ReactJS News’s story.