@freakycoder/react-native-header-view

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"

Options

• AppleHeader
• ModernHeader
• ClassicHeader

Usage

Apple Header Usage

<AppleHeader />

Modern Header Usage

<ModernHeader />

Advanced Usage

<ModernHeader
  text="Profile"
  rightIconType="Ionicons"
  rightIconName="ios-settings"
  rightIconColor={colors.light.primary}
  leftIconOnPress={() => NavigationService.back()}
/>

Classic Header Usage

Basic Usage

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

Advanced Custom Usage

<ClassicHeader
  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>
  }
/>

Configuration - Props

Apple Header Props

Property	Type	Default	Description
dateTitle	string	MONDAY, 27 NOVEMBER	set your own string instead of date title
largeTitle	string	For You	set your own large title
imageSource	image	image	set your own image
onPress	function	null	use this to set onPress functionality
backgroundColor	color	transparent	use this to change the main container's background color
borderColor	color	#EFEFF4	use this to change the bottom border color
dateTitleFontColor	color	#8E8E93	use this to change the date title's font color
dateTitleFontSize	number	13	use this to set the date title's font size
dateTitleFontWeight	string	"600"	use this to set the date title's font weight
largeTitleFontColor	color	default color	use this to change the large title's font color
largeTitleFontSize	number	34	use this to set the large title's font size
largeTitleFontWeight	string	"bold"	use this to set the large title's font weight
dateTitleStyle	style	default style	use this to set your own style for date title (DO NOT RECOMMENDED!)
largeTitleStyle	style	default style	use this to set your own style for large title (DO NOT RECOMMENDED!)
containerStyle	style	default style	use this to set your own style for whole container (DO NOT RECOMMENDED!)
avatarStyle	style	default style	use this to set your own style for avatar style (DO NOT FORGET TO ADD BORDER-RADIUS!)

Modern Header Props

Property	Type	Default	Description
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
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

Classic Header 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.4.7 (2019-10-04)

Implemented enhancements:

• Apple header Bg colour options #6

Full Changelog

0.4.6 (2019-10-04)

Full Changelog

Closed issues:

• Request to Add product in Start React #5

Merged pull requests:

• Bump eslint-utils from 1.4.0 to 1.4.2 in /example #4 (dependabot[bot])

0.4.5 (2019-08-17)

Full Changelog

0.3.0 (2019-08-12)

Full Changelog

⚠️ BREAKING CHANGE ON WHOLE LIBRARY ! PLEASE READ !

🚀Now, It has two Header which are :

• ClassicHeader (Old One)
• ModernHeader (New One)

Usage is not changed however import method is changed. Please check the example ✌️

Merged pull requests:

• Bump lodash from 4.17.11 to 4.17.14 in /examples #3 (dependabot[bot])
• Bump handlebars from 4.1.0 to 4.1.2 in /examples #2 (dependabot[bot])
• Bump js-yaml from 3.12.1 to 3.13.1 in /examples #1 (dependabot[bot])

0.2.61 (2019-03-19)

Full Changelog

0.2.6 (2019-03-05)

Full Changelog

0.2.5 (2019-03-05)

Full Changelog

0.2.4 (2019-03-05)

Full Changelog

0.2.3 (2019-03-05)

Full Changelog

0.2.2 (2019-03-05)

Full Changelog

0.2.0 (2019-02-23)

* This Change Log was automatically generated by github_changelog_generator

Author

FreakyCoder, [e-mail]

License

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