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