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' sectionstyle: 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_HEIGHTheight: TOTALBAR_HEIGHTbackgroundColor: 'white' | | seperator | Seperator line at the bottom | borderBottomWidth: StyleSheet.hairlineWidthborderBottomColor: '#e6e6ea' | | title | Inner title text | fontSize: 18color: '#394352'textAlign: 'center'overflow: 'hidden' | | titleContainer | Title container off center | flex: 1justifyContent: 'center'alignItems: 'center' | | titleCenterContainer | Title container at center | position: 'absolute'left: 0right: 0top: STATUSBAR_HEIGHTbottom: 0justifyContent: 'center'alignItems: 'center' | | buttonView | Text-type button touchable view | justifyContent: 'center'alignItems: 'center'minWidth: minWidthheight: NAVBAR_HEIGHTpaddingHorizontal: 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: minWidthheight: NAVBAR_HEIGHTjustifyContent: 'center'paddingHorizontal: 16 | | gobackImage | Goback button image | width: 18height: 16 |

Credits

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