List

Performant interface for rendering simple, flat lists.

Lists should render ListItem components by providing them through renderItem property to provide a useful component.

import { FlatList } from 'react-native';
import { List, ListItem } from '../components'
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const renderItem = ({ item }) => (
<List>
<ListItem title={item.title} />
</List>
);
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>

Using ListItem is helpful for basic lists, but not required. For example, Card may be used.

import { FlatList } from 'react-native';
import { List, ListItem, Card } from '../components'
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
content: 'Today we are going to provide you with excellent articles to read in December. Enjoy fresh ideas, tips, and tricks from the JavaScript world.',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
content: 'Today we are going to provide you with excellent articles to read in December. Enjoy fresh ideas, tips, and tricks from the JavaScript world.',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
content: 'Today we are going to provide you with excellent articles to read in December. Enjoy fresh ideas, tips, and tricks from the JavaScript world.',
},
];
const renderItem = ({ item }) => (
<List>
<ListItem>
<Card title={item.title}>{item.content}</Card>
</ListItem>
</List>
);
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>

Properties

Name

Type

Description

data

array

An array of anything to be rendered within the list

renderItem

(ListRenderItemInfo) => ReactElement

Takes an item from data and renders it into the list.

...FlatListProps

FlatListProps

Any props applied to FlatList component.