Skip to content

FlatList Migration

Vito Chen edited this page Aug 8, 2017 · 7 revisions

There are only a few steps to migrate to FlatList

  • Make sure your itemComponent extends to PureComponent instead of Component
  • Make sure you have keyExtractor, this is important to render your item quickly
  • If you want to use grid layout, just set numColumns > 1 to build your new layout

Example:

<UltimateListView
  keyExtractor={(item, index) => `${this.state.layout} - ${item}`}  //this is required when you are using FlatList
  refreshableMode="advanced" //basic or advanced
  item={this.renderItem}  //this takes two params (item, index)
  numColumns={this.state.layout === 'list' ? 1 : 3} //to use grid layout, simply set gridColumn > 1
/>

That's all you need to do, enjoy it! If you are still in trouble, please take a look at my Example.

Clone this wiki locally