1.0.5 • Published 4 years ago
react-native-modern-header-thecodingbeats v1.0.5
Installation
Add the dependency:
npm i react-native-modern-header-thecodingbeatsPeer Dependencies
"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
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.