Scribd
Upload
29 views3 pages

Using List Views React Native

The document discusses list views in React Native, specifically the FlatList and SectionList components. It states that FlatList is used for long lists of similarly structured changing data, as it only renders visible items. SectionList is for dividing data into logical sections with headers. Examples are provided to demonstrate basic usage of each component.

Uploaded by

Brubaker Brubake
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views3 pages

Using List Views React Native

The document discusses list views in React Native, specifically the FlatList and SectionList components. It states that FlatList is used for long lists of similarly structured changing data, as it only renders visible items. SectionList is for dividing data into logical sections with headers. Examples are provided to demonstrate basic usage of each component.

Uploaded by

Brubaker Brubake
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like