> 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/page-templates/animated-panel-list.md).

# Animated Panel List

## Preview

![](/files/-LGeAQmIcrkgCc9V-CKj)

## Code sample

```javascript
import { AnimatedPanelList } from '@dormakaba/digital-reactnative-visual';

 <AnimatedPanelList
    withSections
    navbarHeight={110}
    keyExtractor={(item, index) => item._id}
    data={getData(persons)}
    panel={
      <View style={{ flex: 1, justifyContent: 'flex-start', backgroundColor: colors.backgroundGray, padding: 10, paddingTop: 0 }}>
        <Textfield icon="icon-search" placeholder="search" noBorder />
        <Button primary block containerStyle={{ marginTop: 10 }}>Add Person</Button>
      </View>
    }
    renderItem={({ item }) => {
      return (
        <List.Item
          onPress={action('clicked-item')}
          success={item.firstname.charAt(0) === "J"}
          warning={item.firstname.charAt(0) === "L"}
          title={`${item.firstname} ${item.lastname}`}
          text="lorem ipsum dolores opsi quantum oretasi."
          icon="icon-badge"
          rightIcon="icon-profile"
        />
      );
    }}
  /> 
```

## Props

| **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)                                                         |