28/2/24, 11:33 Using List Views · React Native
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.
https://reactnative.dev/docs/using-a-listview 1/3
28/2/24, 11:33 Using List Views · React Native
FlatList Basics
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'},
]}
Preview My Device Android iOS Web
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.
https://reactnative.dev/docs/using-a-listview 2/3
28/2/24, 11:33 Using List Views · React Native
SectionList Basics
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']}
Preview My Device Android iOS Web
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.
Is this page useful?
Edit this page
Last updated on Dec 8, 2023
https://reactnative.dev/docs/using-a-listview 3/3
