React Native Bottom Bar
Battle Tested ✅
Fully customizable Header View with multiple design options for React Native.
npm version
npm
Platform - Android and iOS
License: MIT
styled with prettier
React Native Header View
React Native Header View
React Native Header View

Gorgeous Header View

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-vector-icons": ">= 6.6.0",
"react-native-dynamic-vector-icons": ">= x.x.x"
"@freakycoder/react-native-helpers": ">= 0.0.2",

Options

  • GorgeousHeader
  • AppleHeader
  • ModernHeader
  • ClassicHeader

Usage

Gorgeous Header Usage

import { Gorgeous } from "@freakycoder/react-native-header-view";

<Gorgeous onChangeText={(text) => console.log(text)} />;

Apple Header Usage

import { AppleHeader } from "@freakycoder/react-native-header-view";

<AppleHeader />;

Modern Header Usage

import { ModernHeader } from "@freakycoder/react-native-header-view";

<ModernHeader />;

Advanced Usage

import { ModernHeader } from "@freakycoder/react-native-header-view";

<ModernHeader
  text="Profile"
  rightIconType="Ionicons"
  backgroundColor="#fdfdfd"
  rightIconName="ios-settings"
  rightIconColor={colors.light.primary}
  leftIconComponent={your - icon - component}
  rightIconComponent={your - icon - component}
  leftIconOnPress={() => NavigationService.back()}
/>;

Classic Header Usage

Basic Usage

import { ClassicHeader } from "@freakycoder/react-native-header-view";

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

Advanced Custom Usage

import { ClassicHeader } from "@freakycoder/react-native-header-view";

<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

Gorgeous Header Props

PropertyTypeDefaultDescription
titlestringOrderchange the title
subtitlestringHealthy food can keep you fit.change the subtitle
searchIconassetdefaultset your own icon for the search one
titleTextStylestyledefaultset your own style for title text
subtitleTextStylestyledefaultset your own style for subtitle text
searchInputStylestyledefaultset your own style for search text input
menuImageStylestyledefaultset your own style for hamburger menu image
menuImageSourceassetdefaultset your own image instead of default hamburger menu image
menuImageOnPressfunctionundefineduse this to set your own function for pressing the hamburger menu image
profileImageStylestyledefaultset your own style for profile image
profileImageSourceassetundefineduse this to set your own image for profile image
profileImageOnPressfunctionundefineduse this to set your own function for pressing the profile image

Apple Header Props

PropertyTypeDefaultDescription
dateTitlestringMONDAY, 27 NOVEMBERset your own string instead of date title
largeTitlestringFor Youset your own large title
imageSourceimageimageset your own image
onPressfunctionnulluse this to set onPress functionality
backgroundColorcolortransparentuse this to change the main container’s background color
borderColorcolor#EFEFF4use this to change the bottom border color
dateTitleFontColorcolor#8E8E93use this to change the date title’s font color
dateTitleFontSizenumber13use this to set the date title’s font size
dateTitleFontWeightstring“600”use this to set the date title’s font weight
largeTitleFontColorcolordefault coloruse this to change the large title’s font color
largeTitleFontSizenumber34use this to set the large title’s font size
largeTitleFontWeightstring“bold”use this to set the large title’s font weight
dateTitleStylestyledefault styleuse this to set your own style for date title (DO NOT RECOMMENDED!)
largeTitleStylestyledefault styleuse this to set your own style for large title (DO NOT RECOMMENDED!)
containerStylestyledefault styleuse this to set your own style for whole container (DO NOT RECOMMENDED!)
avatarStylestyledefault styleuse this to set your own style for avatar style (DO NOT FORGET TO ADD BORDER-RADIUS!)

Modern Header Props

PropertyTypeDefaultDescription
heightstring OR number70change the height of the header
widthstring OR number“100%”change the width of the header
backgroundColorstring#fffchange the background color of the header
stylesstylesstylesuse this to change main style of the header
textstringHeader Titleset the header’s title
textStylestylestyleset your own style for the header’s text
leftnumber16use this to set left icon’s align
rightnumber16use this to set right icon’s align
leftIconNamestringios-arrow-backchange the left icon depends on the React Native Vector Icons
leftIconTypestringIoniconschange the left icon’s type
leftIconSizenumber25change the left icon’s size
leftIconColorcolor#bbbabechange the left icon’s color
rightIconNamestringheartchange the right icon depends on the React Native Vector Icons
rightIconTypestringEntypochange the right icon’s type
rightIconSizenumber25change the right icon’s size
rightIconColorcolor#23c4c1change the right icon’s color
leftIconComponentcomponentIconuse your own component instead of the integrated Icon component
rightIconComponentcomponentIconuse your own component instead of the integrated Icon component
leftIconOnPressfunctionfunctionset the function for left icon’s onPress
rightIconOnPressfunctionfunctionset the function for right icon’s onPress
leftDisablebooleanfalsedisable the left icon component
rightDisablebooleanfalsedisable the right icon component

Classic Header Props

PropertyTypeDefaultDescription
stylesstylesstylesuse this to change main style of the header
heightnumber50use this to change the header’s height
widthnumber100%use this to change the header’s width
statusBarHiddenbooleanfalseuse this to let Header Component itself re-arrange depends on the status bar
hitSlopsobjectobject: 30use this to change the header’s left and right components’ hitSlots
bottomStickbooleanfalsestick the header to bottom side
headerTitlestring“”use this to set header’s title
backgroundColorcolor#ffffffuse this to change the header’s background color
leftComponentcomponentIconset the left component
leftComponentStylestylestyleset the left component’s style
leftComponentDisablebooleanfalsedisable the left component
leftComponentOnPressfunctionnullset the left component’s onPress function
rightComponentcomponentIconset the right component
rightComponentStylestylestyleset the right component’s style
rightComponentDisablebooleanfalsedisable the right component
rightComponentOnPressfunctionnullset the right component’s onPress function
centerComponentcomponentIconset the center component
centerComponentStylestylestyleset the center component’s style

Change Log

0.4.13 (2019-11-22)

Full Changelog

0.4.11 (2019-11-13)

Full Changelog

0.4.10 (2019-11-13)

Full Changelog

Implemented enhancements:

  • Apple header Bg colour options #6

0.4.7 (2019-10-04)

Full Changelog

0.4.6 (2019-10-04)

Full Changelog

Closed issues:

  • Request to Add product in Start React #5

Merged pull requests:

0.4.5 (2019-08-17)

Full Changelog

0.3.0 (2019-08-12)

Full Changelog

Merged pull requests:

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

Credits

Photo by Joanna Nix on Unsplash

Author

FreakyCoder, kurayogun@gmail.com

License

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