@cipl/react-native-header-view

Add the dependency

Usage no npm install needed!

<script type="module">
  import ciplReactNativeHeaderView from 'https://cdn.skypack.dev/@cipl/react-native-header-view';
</script>

README

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