react-native-modern-header-thecodingbeats

Fully customizable Modern Header View for React Native With The Coding Beats

Usage no npm install needed!

<script type="module">
  import reactNativeModernHeaderThecodingbeats from 'https://cdn.skypack.dev/react-native-modern-header-thecodingbeats';
</script>

README

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

  • 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.