react-native-header-view

Fully customizable Header View with multiple design options for React Native.

react-native-header-viewv

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

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

GitHub