0.0.1 • Published 5 years ago
@cipl/react-native-header-view v0.0.1
React Native Header
Customisable Header with consistent behaviour on iOS and Android.
Installation
Add the dependency
Pure React Native:
npm i @cipl/react-native-header-view
Peer Dependencies
Important! You need to install them
- "react": ">= 16.x"
- "react-native": ">= 0.61.x"
Usage
<HeaderComponent
text="Header Title"
backgroundColor="#fdfdfd"
leftIconOnPress={() => NavigationService.back()}
leftDisable = {false}
rightDisable = {false}
imageWidth = 20
imageHeight = 20
/>Header Props
| Property | Type | Default | Description | |
|---|---|---|---|---|
| height | string OR number | 70 | change the height of the header | |
| width | string OR number | "100%" | change the width of the header | |
| backgroundColor | string | #fff | change the background color of the header | |
| styles | styles | styles | use this to change main style of the header | |
| text | string | Header Title | set the header's title | |
| textStyle | style | style | set your own style for the header's text | |
| left | number | 16 | use this to set left icon's align | |
| right | number | 16 | use this to set right icon's align | |
| leftDisable | boolean | false | disable the left icon component | |
| rightDisable | boolean | false | disable | the right icon component |
| leftIconOnPress | function | function | set the function for left icon's onPress | |
| rightIconOnPress | function | function | set the function for right icon's onPress | |
| inputStyle | styles | styles | use this to change the text style | |
| leftImageUrl | string | bell-icon.png | pass left icon url for header | |
| rightImageUrl | string | menu-icon.png | pass right icon url for header | |
| imageWidth | number | 20 | use this to set the icon width of header | |
| imageHeight | number | 20 | use this to set the icon height of header |
0.0.1
5 years ago