react-native-fancy-navigation-bar

Here is a fully customizable navigation bar in React-Native. You can set the global unified style of navigation bar and add it as a react component in each page.

Install

Install by Yarn:

yarn add react-native-fancy-navigation-bar

Install by NPM:

npm install --save react-native-fancy-navigation-bar

Usage

First import in the file:

import NaviBar from 'react-native-fancy-navigation-bar';

Then add component in render() function:

render() {
  return (
    <View style={{flex: 1}}>
      <NaviBar
        title='CustomTitle'
        {/* other properties if you want to specify it */}
      />
      {/* other components */}
    </View>
  );
}

If you want to hide or show navigation bar dynamiclly, you can write these code:

render() {
  return (
    <View style={{flex: 1}}>
      {this.state.showNaviBar && (
        <NaviBar
          title='CustomTitle'
          {/* other properties if you want to specify it */}
        />
      )}
      {/* other components */}
    </View>
  );
}

This navigation bar is only a component with 'relative' position, not 'absolute' position. If you want to use absolute position, please use the 'style' property in following section.

Constant

You can import navigation bar height constant like this:

import {STATUSBAR_HEIGHT} from 'react-native-fancy-navigation-bar';

All constant about navigation bar height list below:

Name	iOS (X)	iOS (not X)	Android	Description
STATUSBAR_HEIGHT	44	20	0	Only status bar height
NAVBAR_HEIGHT	44	44	44	Only navigation bar height
TOTALBAR_HEIGHT	88	64	44	Total height of status bar and navigation bar

Other constant:

Name	Description
GOBACK_BUTTON	An identifier when you set 'leftElement' or 'rightElement' to identify the button as GoBack button

Global Settings

You can change the navigation bar settings at the startup, include navigation bar style, GoBack button image and function.

First, you should import methed from library:

import {setCustomStyle} from 'react-native-fancy-navigation-bar';

All the method list below (no return value):

Name	Description	Param Format
setCustomStyle	Set all the style include bar or button or title	(key, style): key: A style key which you can see the following 'Style' section style: A style object created by StyleSheet or only an javascript object
setGlobalGobackFunc	Set GoBack button function	(func): func: A function with no param and no return value
setGlobalGobackImage	Set GoBack button image	(image): image: A number which means a local image or a string which is a remote image url

Custom Setting

You can control the action or style of navigation bar by passing 'props'.

PropName	Type	DefaultValue	Description
title	string or element	''	Title view of text style or user custom view
titleCenter	bool	true	Title is must at center or not
hasSeperatorLine	bool	true	Bottom of navigation bar has a seperator line or not
leftElement	string or element or array	GOBACK_BUTTON	Left buttons, a string means a button of text style, an element means a button view, an array of string means an array of button which maybe text or custom view
rightElement	string or string array or element	null	Right buttons, same format as 'leftElement'
onLeft	function	undefined	Left button click function, param is button index in 'leftElement', from 0 on. If return is false and button is goback button, then do not call the default goback action
onRight	function	undefined	Right button click function, same format as 'onLeft'
autoCloseKeyboard	bool	true	Auto dismiss keyboard when click button or not
navigation	navigation object	null	A stack navigation object used for goback action
style	style object	{}	A custom style which has highest priority, object's key is in following 'Style' section

Style

The component style is consist of three part:

• User custom style, passed by component props, is highest level.
• Global setting style, set by method in 'Global Settings' sections, is medium level, can be override by User custom style.
• Inner style, written in library code, is lowest level, can be override by the two styles above.

All the key you can customize in Global or Custom settings list below:

Key	Description	DefaultValue
container	The whole navigation bar	justifyContent: 'space-between' flexDirection: 'row' alignItems: 'center' paddingTop: STATUSBAR_HEIGHT height: TOTALBAR_HEIGHT backgroundColor: 'white'
seperator	Seperator line at the bottom	borderBottomWidth: StyleSheet.hairlineWidth borderBottomColor: '#e6e6ea'
title	Inner title text	fontSize: 18 color: '#394352' textAlign: 'center' overflow: 'hidden'
titleContainer	Title container off center	flex: 1 justifyContent: 'center' alignItems: 'center'
titleCenterContainer	Title container at center	position: 'absolute' left: 0 right: 0 top: STATUSBAR_HEIGHT bottom: 0 justifyContent: 'center' alignItems: 'center'
buttonView	Text-type button touchable view	justifyContent: 'center' alignItems: 'center' minWidth: minWidth height: NAVBAR_HEIGHT paddingHorizontal: 8
buttonText	Text-type button text	color: '#394352' fontSize: 17
leftView	Left view contains all left buttons	flexDirection: 'row' justifyContent: 'center' alignItems: 'flex-start'
rightView	Right view contains all right buttons	flexDirection: 'row' justifyContent: 'center' alignItems: 'flex-end'
gobackView	Goback button touchable view	minWidth: minWidth height: NAVBAR_HEIGHT justifyContent: 'center' paddingHorizontal: 16
gobackImage	Goback button image	width: 18 height: 16

Credits

This Is A Slightly Modified Version React Native fancy Navigation Bar, All Credits To Gaoxiaosong