Using List Views
React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either
FlatList or
SectionList.
The
FlatList
component displays a scrolling list of changing, but similarly structured, data.
FlatList
works well for long lists of data, where the number of items might change over time. Unlike the more generic
ScrollView
, the
FlatList
only renders elements that are currently showing on the screen, not all the elements at once.
The FlatList
component requires two props: data
and renderItem
. data
is the source of information for the list. renderItem
takes one item from the source and returns a formatted component to render.
This example creates a basic FlatList
of hardcoded data. Each item in the data
props is rendered as a Text
component. The FlatListBasics
component then renders the FlatList
and all Text
components.
import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
export default class FlatListBasics extends Component {
render() {
return (
<View style={styles.container}>
<FlatList
data={[
{ key: 'Devin' },
{ key: 'Dan' },
{ key: 'Dominic' },
{ key: 'Jackson' },
{ key: 'James' },
{ key: 'Joel' },
{ key: 'John' },
{ key: 'Jillian' },
{ key: 'Jimmy' },
{ key: 'Julie' },
]}
renderItem={({ item }) => <Text style={styles.item}>{item.key}</Text>}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});
If you want to render a set of data broken into logical sections, maybe with section headers, similar to
UITableView
s on iOS, then a
SectionList is the way to go.
import React, { Component } from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';
export default class SectionListBasics extends Component {
render() {
return (
<View style={styles.container}>
<SectionList
sections={[
{ title: 'D', data: ['Devin', 'Dan', 'Dominic'] },
{ title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie'] },
]}
renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
renderSectionHeader={({ section }) => (
<Text style={styles.sectionHeader}>{section.title}</Text>
)}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
},
sectionHeader: {
paddingTop: 2,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 2,
fontSize: 14,
fontWeight: 'bold',
backgroundColor: 'rgba(247,247,247,1.0)',
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});