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 from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});
const FlatListBasics = () => {
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>
);
};
export default FlatListBasics;
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 from 'react';
import {SectionList, StyleSheet, Text, View} from 'react-native';
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,
},
});
const SectionListBasics = () => {
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 => `basicListEntry-${item}`}
/>
</View>
);
};
export default SectionListBasics;
One of the most common uses for a list view is displaying data that you fetch from a server. To do that, you will need to learn about networking in React Native.
Last updated: Sep 30, 2025