Better List Views in React Native

Everybody Rejoice! Improved API and performances for List Views in React Native are coming!
The upcoming React Native March 2017 will introduce

FlatList

<FlatList
  data={[{title: 'Title Text', key: 'item1'}, ...]}
  renderItem={({item}) => <ListItem title={item.title}}
/>

SectionList

<SectionList
  renderItem={({item}) => <ListItem title={item.title}}
  renderSectionHeader={({section}) => <H1 title={section.key} />}
  sections={[ // homogenous rendering between sections
    {data: [...], key: ...},
    {data: [...], key: ...},
    {data: [...], key: ...},
  ]}
/>

<SectionList
  sections={[ // heterogeneous rendering between sections
    {data: [...], key: ..., renderItem: ...},
    {data: [...], key: ..., renderItem: ...},
    {data: [...], key: ..., renderItem: ...},
  ]}
/>

VirtualizedList

Features

Lists are used in many contexts, so we packed the new components full of features to handle the majority of use cases out of the box:

  • Scroll loading (onEndReached).
  • Pull to refresh (onRefresh / refreshing).
  • Configurable viewability (VPV) callbacks (onViewableItemsChanged / viewabilityConfig).
  • Horizontal mode (horizontal).
  • Intelligent item and section separators.
  • Multi-column support (numColumns) scrollToEnd, scrollToIndex, and scrollToItem
  • Better Flow typing.

Better List Views in React Native blog post