List - React Native Starter

Search…
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.
Card
Top Navigation
Last modified 1yr ago
Copy link
Contents
Properties