react-native-header-view
Fully customizable Header View for React Native.
Installation
Add the dependency:
Pure React Native:
Peer Dependencies
IMPORTANT! You need install them.
"react": ">= 16.x",
"react-native": ">= 0.55.x",
"react-native-iphone-x-helper": ">= 1.2.x",
"react-native-dynamic-vector-icons": ">= x.x.x"
Basic Usage
Advanced Usage
Example Application
- check the code, and yes! :) all of the images, screenshots are directly taken
from the this example. Of course, you can simply clone the project and run the example on your own environment.
Configuration - Props
Property | Type | Default | Description |
---|---|---|---|
height | number | 50 | use this to change the header's height |
width | number | 100% | use this to change the header's width |
hitSlops | object | object: 30 | use this to change the header's left and right components' hitSlots |
bottomStick | boolean | false | stick the header to bottom side |
headerTitle | string | "" | use this to set header's title |
backgroundColor | color | #ffffff | use this to change the header's background color |
leftComponent | component | Icon | set the left component |
leftComponentStyle | style | style | set the left component's style |
leftComponentDisable | boolean | false | disable the left component |
leftComponentOnPress | function | null | set the left component's onPress function |
rightComponent | component | Icon | set the right component |
rightComponentStyle | style | style | set the right component's style |
rightComponentDisable | boolean | false | disable the right component |
rightComponentOnPress | function | null | set the right component's onPress function |
centerComponent | component | Icon | set the center component |
centerComponentStyle | style | style | set the center component's style |