react-native-fancy-navigation-bar v1.0.1

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:

Other constant:

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):

Custom Setting

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

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:

Credits

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