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.