react-native-flatlist-header

Custom FlatlistHeader

Component based 100% on React-Native's own Flatlist

| Props | Value Type | Description | Default | |--|--|--|--| | navBar | Number | Size the Nav bar should be when scrolling up | 79 | | height | Number | Size at which the component must occupy when scrolling down | 150 | | image | Image path to be used | require if image local or {uri: url} from image web | null | | imageSize | Sets value for image size with end navBar | Number | 35 | | marginImage | Number | fine adjustments to the image left when scrolling up | 280 | | rightItem | Component RN | If you want to insert a component in the right corner | null | | color | Color Hexadecimal | Component background color | #333 |

Install

npm i react-native-flatlist-header

Usage :

1- add below import in your code :

import { FlatlistHeader } from "react-native-flatlist-header";

2- Define the props according to the documentation above or copy the example below.

<FlatlistHeader
   data={data}
   renderItem={({item}) => <Item item={item} />}
   keyExtractor={item  =>  item.id}
   
   rightItem={<Icon type='Feather' name='bell' />}
   image={require('./src/assets/logo.png')}
   navBar={80}
   height={150}
   color={'#d13636'}
   marginImage={270}
/>