Awesome Open Source
Awesome Open Source
React Native Classic Header

Battle Tested ✅

React Native Classic Header

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Classic Header

Installation

Add the dependency:

npm i react-native-classic-header

Peer Dependencies

IMPORTANT! You need install them
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-vector-icons": ">= 7.0.0",
"react-native-dynamic-vector-icons": ">= 1.0.0",
"@freakycoder/react-native-helpers": ">= 1.0.0"

Usage

Import

import ClassicHeader from "react-native-classic-header";

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

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

Future Plans

  • [x] LICENSE

Author

FreakyCoder, [email protected]

License

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

Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Java (391,896
Icons (15,053
Boolean (8,311