# 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.                |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.reactnativestarter.com/components/list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.