react-native-collapsible-bar-flatlist

Collabsible bar flatlist component for React Native.

Usage no npm install needed!

<script type="module">
  import reactNativeCollapsibleBarFlatlist from 'https://cdn.skypack.dev/react-native-collapsible-bar-flatlist';
</script>

README

react-native-collapsible-bar-flatlist

Getting Started

Installation

$ yarn add react-native-collapsible-bar-flatlist
  or
$ npm install react-native-collapsible-bar-flatlist

Usage

<CollapsibleBarFlatList
  BarElement={<Bar/>}
  barHeight={80}
  data={this.data}
  ListFooterComponent={<View style={styles.footer}/>}
  keyExtractor={(item) => item.toString()}
  renderItem={(info) => (
    <View style={styles.item}>
      <Text>{info.item.toString()}</Text>
    </View>
  )}/>

|Property|Description| |:-|:-| |BarElement: ReactElement|A ReactElement that is shown on the top of the FlatList. | |barHeight: number|A height of the bar element. It should be same with BarElement element's height.| |isShowBar?: boolean|If you want to switch visibility of the bar, you can set it on this prop. The default value is true.| |flatListRef?: (ref: FlatList | null) => void|You can get a ref of the FlatList like View.ref.|

and other props are same with FlatListProps.