@freakycoder/react-native-header-view

[

Fully customizable Header View for React Native.

Installation

Add the dependency:

Pure React Native:

npm i @freakycoder/react-native-header-view

Peer Dependencies

IMPORTANT! You need install them.

"react": ">= 16.x",
"react-native": ">= 0.55.x",
"react-native-iphone-x-helper": ">= 1.x.x",
"react-native-dynamic-vector-icons": ">= x.x.x"

Basic Usage

<Header
  headerTitle="Header"
  rightComponentDisable
  leftComponentOnPress={() => {}}
  hitSlops={
    top: 30,
    bottom: 30,
    left: 30,
    right: 30
  }
/>

Advanced Usage

<Header
  headerTitle="Header"
  leftComponent={
    <TouchableOpacity
      onPress={() => {}}>
      <Icon name="ios-arrow-back" type="Ionicons" size={30} color="blue" />
    </TouchableOpacity>
  }
  rightComponent={
    <TouchableOpacity
      onPress={() => {}}>
      <Icon name="github" type="AntDesign" size={30} color="purple" />
    </TouchableOpacity>
  }
/>

Example Application

• check the code, and yes! :) all of the images, screenshots are directly taken from the this example. Of course, you can simply clone the project and run the example on your own environment.

Configuration - Props

Property	Type	Default	Description
height	number	50	use this to change the header's height
width	number	100%	use this to change the header's width
hitSlops	object	object: 30	use this to change the header's left and right components' hitSlots
bottomStick	boolean	false	stick the header to bottom side
headerTitle	string	""	use this to set header's title
backgroundColor	color	#ffffff	use this to change the header's background color
leftComponent	component	Icon	set the left component
leftComponentStyle	style	style	set the left component's style
leftComponentDisable	boolean	false	disable the left component
leftComponentOnPress	function	null	set the left component's onPress function
rightComponent	component	Icon	set the right component
rightComponentStyle	style	style	set the right component's style
rightComponentDisable	boolean	false	disable the right component
rightComponentOnPress	function	null	set the right component's onPress function
centerComponent	component	Icon	set the center component
centerComponentStyle	style	style	set the center component's style

Change Log

0.2.0 (2019-02-23)

Author

FreakyCoder, [e-mail]

License

React Native Header View Library is available under the MIT license. See the LICENSE file for more info. ](

Fully customizable Header View for React Native.

Installation

Add the dependency:

Pure React Native:

npm i @freakycoder/react-native-header-view

Peer Dependencies

IMPORTANT! You need install them.

"react": ">= 16.x",
"react-native": ">= 0.55.x",
"react-native-iphone-x-helper": ">= 1.2.x",
"react-native-dynamic-vector-icons": ">= x.x.x"

Basic Usage

<Header
  headerTitle="Header"
  rightComponentDisable
  leftComponentOnPress={() => {}}
  hitSlops={
    top: 30,
    bottom: 30,
    left: 30,
    right: 30
  }
/>

Advanced Usage

<Header
  statusBarHidden
  headerTitle="Header"
  leftComponent={
    <TouchableOpacity
      onPress={() => {}}>
      <Icon name="ios-arrow-back" type="Ionicons" size={30} color="blue" />
    </TouchableOpacity>
  }
  hideRightComponent
/>

Example Application

• check the code, and yes! :) all of the images, screenshots are directly taken from the this example. Of course, you can simply clone the project and run the example on your own environment.

Configuration - Props

Property	Type	Default	Description
styles	styles	styles	use this to change main style of the header
height	number	50	use this to change the header's height
width	number	100%	use this to change the header's width
statusBarHidden	boolean	false	use this to let Header Component itself re-arrange depends on the status bar
hitSlops	object	object: 30	use this to change the header's left and right components' hitSlots
bottomStick	boolean	false	stick the header to bottom side
headerTitle	string	""	use this to set header's title
backgroundColor	color	#ffffff	use this to change the header's background color
leftComponent	component	Icon	set the left component
leftComponentStyle	style	style	set the left component's style
leftComponentDisable	boolean	false	disable the left component
leftComponentOnPress	function	null	set the left component's onPress function
rightComponent	component	Icon	set the right component
rightComponentStyle	style	style	set the right component's style
rightComponentDisable	boolean	false	disable the right component
rightComponentOnPress	function	null	set the right component's onPress function
centerComponent	component	Icon	set the center component
centerComponentStyle	style	style	set the center component's style

Change Log

0.2.0 (2019-02-23)

Author

FreakyCoder, [e-mail]

License

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