Animated Panel List

Used to add a top panel to a list for filtering, ... which gets out of the way when scrolling.

Preview

Code sample

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