> For the complete documentation index, see [llms.txt](https://dormakaba-digital.gitbook.io/reactnative-visual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dormakaba-digital.gitbook.io/reactnative-visual/components/list-listitem.md).

# List, ListItem

## Preview

![Simple list items](https://3422846761-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGP0U4aBj2zuNdsU1Qu%2F-LGzFhwS5vR-DNfMR0hG%2F-LGzFsROXmG471Lll1_R%2Flist_1.png?alt=media\&token=489a5fdc-7d09-4343-b8ff-5dec44b9c5d5)

![with sections](https://3422846761-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGP0U4aBj2zuNdsU1Qu%2F-LGzFhwS5vR-DNfMR0hG%2F-LGzFwx6muH6LraRykuZ%2Flist_2.png?alt=media\&token=92c080f2-7ace-4b9b-a422-2eedc27363e7)

![list item with more informations](https://3422846761-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGP0U4aBj2zuNdsU1Qu%2F-LGzFhwS5vR-DNfMR0hG%2F-LGzG1H5kAlqPfodtSnk%2Flist_full.png?alt=media\&token=522f660c-be24-49ce-8ac5-801b3742bf11)

## Code sample

```jsx
import { List, Text } from '@dormakaba/digital-reactnative-visual';

<List
  withSections
  keyExtractor={(item, index) => item._id}
  data={getData(persons)}
  renderItem={({ item }) => {
    return (
      <List.Item onPress={() => {}} icon="icon-persons">
        <Text>{`${item.firstname} ${item.lastname}`}</Text>
      </List.Item>
    );
  }}
/>
```

## Props

### List

| **Name**            | **Type** | **Description**                                                                                                                                       |
| ------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| data                | array    | Array of items to render or array of sections. Learn more about react-native [SectionList](https://facebook.github.io/react-native/docs/sectionlist). |
| renderItem          | function | render function based on react-native list                                                                                                            |
| renderSectionHeader | function | override default section header rendering                                                                                                             |
| renderSeparator     | node     | override default rendering of separator line                                                                                                          |
| panel               | node     | The content of the panel to show/hide on scroll                                                                                                       |
| navbarHeight        | integer  | height of the panel (needed to calculate animations upfront)                                                                                          |
| withSections        | boolean  | toggles rendering of section headers                                                                                                                  |
| keyExtractor        | function | used to get key to set per list item                                                                                                                  |
| ...                 |          | props of react-native [SectionList](https://facebook.github.io/react-native/docs/sectionlist)                                                         |

### ListItem

| **Name**    | **Type** | **Description**                                |
| ----------- | -------- | ---------------------------------------------- |
| title       | string   | main content of the list item                  |
| text        | string   | text below main content (second line)          |
| multiline   | boolean  | allow multiline title, text                    |
| icon        | string   | left icon name                                 |
| rightIcon   | string   | right icon name                                |
| figure      | element  | react element to display instead of left icon  |
| rightFigure | element  | react element to display instead of right icon |
| onPress     | function | action to handle on pressing the list item     |
| style       | object   | style override                                 |