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}
/>
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 2yr ago