# List

Performant interface for rendering simple, flat lists. 

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

```jsx
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.

```jsx
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.                |