Skip to content
master
Switch branches/tags
Code

React Native Bottom Bar

Battle Tested ✅

Collection of Header Views for React Native

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

Apple Header Gorgeous Header
React Native Apple Header View React Native Gorgeous Header View
Elegant Header Modern Header
React Native Elegant Header View React Native Modern Header View
Profile Header Classic Header
React Native Profile Header View React Native Classic Header View

Finally Version 1.0.0 🥳

Finally, this library got the version 1.0.0. More than 5k downloads and it is separated by each header view. This library contains the collection of each header view. If you do not need to use them all, you can reach and install header views on its own repository.

Options

Installation

You can use each Header View separately if you do not want to use the collection.

Add the dependency:

Pure React Native

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

Peer Dependencies

IMPORTANT! You need install them.
"react-native-gorgeous-header": ">= 0.1.0",
"react-native-classic-header": ">= 0.1.0",
"react-native-modern-header": ">= 0.1.0",
"react-native-apple-header": ">= 0.1.0",
"react-native-profile-header": ">= 0.1.0",

Usage

Gorgeous Header Usage

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

<GorgeousHeader 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>
  }
/>;

Profile Header Usage

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

<ProfileHeader />;

Configuration - Props

Gorgeous Header Props

Property Type Default Description
title string Order change the title
subtitle string Healthy food can keep you fit. change the subtitle
searchIcon asset default set your own icon for the search one
titleTextStyle style default set your own style for title text
subtitleTextStyle style default set your own style for subtitle text
searchBarStyle style default set your own style for search text input container
searchInputStyle style default set your own style for search text input
menuImageStyle style default set your own style for hamburger menu image
menuImageSource asset default set your own image instead of default hamburger menu image
menuImageOnPress function undefined use this to set your own function for pressing the hamburger menu image
profileImageStyle style default set your own style for profile image
profileImageSource asset undefined use this to set your own image for profile image
profileImageOnPress function undefined use this to set your own function for pressing the profile image

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
height string OR number 70 change the height of the header
width string OR number "100%" change the width of the header
backgroundColor string #fff change the background color of the header
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

ProfileHeader Props

Property Type Default Description
onLeftButtonPress function undefined set the logic for left aligned button
onProfilePicPress function undefined set the logic for profile picture
onFirstIconPress function undefined set the logic for first icon button
onSecondIconPress function undefined set the logic for second icon button
onThirdIconPress function undefined set the logic for third icon button
profileImageSource image default change the profile image source
leftAlignedButtonImageSource image default change the left aligned button image source
firstIconImageSource image default change the first icon image source
secondIconImageSource image default change the second icon image source
thirdIconImageSource image default change the third icon image source
titleText string undefined change the title text
height number 50 change the profile header's height
backgroundColor color #fff change the profile header's background color
leftButtonComponent component Image set your own component instead of default left aligned Button Image
disableFirstIcon boolean false disable the first icon
disableSecondIcon boolean false disable the second icon
disableThirdIcon boolean false disable the third icon
disableLeftAlignedButton boolean false disable the left aligned icon
ImageComponent component Image set your own Image component instead of default react native Image such as; FastImage

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.