List
Performant interface for rendering simple, flat lists.
Lists should render ListItem components by providing them through renderItem property to provide a useful component.
1
import { FlatList } from 'react-native';
2
import { List, ListItem } from '../components'
3
4
const DATA = [
5
{
6
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
7
title: 'First Item',
8
},
9
{
10
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
11
title: 'Second Item',
12
},
13
{
14
id: '58694a0f-3da1-471f-bd96-145571e29d72',
15
title: 'Third Item',
16
},
17
];
18
19
const renderItem = ({ item }) => (
20
<List>
21
<ListItem title={item.title} />
22
</List>
23
);
24
25
26
<FlatList
27
data={DATA}
28
renderItem={renderItem}
29
keyExtractor={item => item.id}
30
/>
Copied!
Using ListItem is helpful for basic lists, but not required. For example, Card may be used.
1
import { FlatList } from 'react-native';
2
import { List, ListItem, Card } from '../components'
3
4
const DATA = [
5
{
6
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
7
title: 'First Item',
8
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.',
9
},
10
{
11
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
12
title: 'Second Item',
13
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.',
14
},
15
{
16
id: '58694a0f-3da1-471f-bd96-145571e29d72',
17
title: 'Third Item',
18
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.',
19
},
20
];
21
22
const renderItem = ({ item }) => (
23
<List>
24
<ListItem>
25
<Card title={item.title}>{item.content}</Card>
26
</ListItem>
27
</List>
28
);
29
30
31
<FlatList
32
data={DATA}
33
renderItem={renderItem}
34
keyExtractor={item => item.id}
35
/>
Copied!

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.
Last modified 1yr ago
Copy link
Contents
Properties