Installation
Add the dependency:
npm i react-native-modern-header-thecodingbeats
Peer Dependencies
IMPORTANT! You need install them
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-vector-icons": ">= 7.0.0",
"react-native-dynamic-vector-icons": ">= 1.0.0"
Usage
Import
import ModernHeader from "react-native-modern-header-thecodingbeats";
Fundamental Usage
<ModernHeader />
Configuration - Props
Modern 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 |
title | string | Header Title | set the header's title |
titleStyle | style | style | set your own style for the header's title |
left | number | 16 | use this to set left icon's align |
right | number | 16 | use this to set right icon's align |
leftIconName | string | ios-arrow-back | change the left icon depends on the React Native Vector Icons |
leftIconType | string | Ionicons | change the left icon's type |
leftIconSize | number | 25 | change the left icon's size |
leftIconColor | color | #bbbabe | change the left icon's color |
rightIconName | string | heart | change the right icon depends on the React Native Vector Icons |
rightIconType | string | Entypo | change the right icon's type |
rightIconSize | number | 25 | change the right icon's size |
rightIconColor | color | #23c4c1 | change the right icon's color |
leftIconComponent | component | Icon | use your own component instead of the integrated Icon component |
rightIconComponent | component | Icon | use your own component instead of the integrated Icon component |
leftIconOnPress | function | function | set the function for left icon's onPress |
rightIconOnPress | function | function | set the function for right icon's onPress |
leftDisable | boolean | false | disable the left icon component |
rightDisable | boolean | false | disable the right icon component |
Future Plans
- [x]
LICENSE
Author
The Coding Beats, thecodingbeats@gmail.com
License
React Native Modern Header is available under the MIT license. See the LICENSE file for more info.