Installation

Add the dependency:

npm i react-native-modern-header-thecodingbeats

Peer 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

• [x] ~~LICENSE~~

Author

The Coding Beats, [email protected]

License

React Native Modern Header is available under the MIT license. See the LICENSE file for more info.