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.