Home

Awesome

react-native-pure-navigation-bar

npm version Build Status

中文说明

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.

It supports:

ScreenShots

iPhone X

<p float="left"> <img src="/resource/1-X.png" width="18%"> <img src="/resource/2-X.png" width="18%"> <img src="/resource/3-X.png" width="18%"> <img src="/resource/4-X.png" width="18%"> <img src="/resource/5-X.png" width="18%"> </p>

Android

<p float="left"> <img src="/resource/1-A.jpg" width="18%"> <img src="/resource/2-A.jpg" width="18%"> <img src="/resource/3-A.jpg" width="18%"> <img src="/resource/4-A.jpg" width="18%"> <img src="/resource/5-A.jpg" width="18%"> </p>

Install

Install by Yarn:

yarn add react-native-pure-navigation-bar

Install by NPM:

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

Usage

First import in the file:

import NaviBar from 'react-native-pure-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>
  );
}

Export

NameDescription
DEFAULT_NAVBAR_HEIGHTDefault navigation bar height
GOBACK_BUTTONAn identifier when you set 'leftElement' or 'rightElement' to identify the button as GoBack button
GOBACK_IMAGEAn default image for GOBACK_BUTTON
forceInsetA function to generate forceInset options easilly
getSafeAreaInsetGet safe area inset with landscape and translucent params

Global Settings

You can change the navigation bar settings at the startup, include navigation bar style, and other default props.

You can set options like this:

import {InnerNaviBar} from 'react-native-pure-navigation-bar';

InnerNaviBar.defaultProps.isTranslucent = true;
InnerNaviBar.defaultProps.style.titleContainer = {...};

Custom Setting

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

PropNameDescription
titleTitle view of text style or user custom view
titleCenterTitle is must at center or not
hasSeperatorLineBottom of navigation bar has a seperator line or not
leftElementLeft buttons, a string or a number means a button of text style, an element means a button view, an array means an array of button which maybe text or custom view
rightElementRight buttons, same format as 'leftElement'
onLeftLeft 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
onRightRight button click function, same format as 'onLeft'
autoCloseKeyboardAuto dismiss keyboard when click button or not
autoHardwareBackAuto listen hardware back event on Android or not
disableLockEnable or disable button clicking lock to avoid clicking multi times
gobackImageImage of goback button
gobackTextText of goback button
isAbsoluteEnable absolute style or not
isTranslucentTranslucent mode in Android
safeOptionsSafe area option of navigation bar. Use 'false' to disable
navbarHeightNavigation bar height. Default is DEFAULT_NAVBAR_HEIGHT
styleA custom style which has highest priority, object's key is in following 'Style' section

You can see index.d.ts for their types and src/index.js for their default values.

Style

The component style is consist of three part:

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

KeyDescription
safeViewSafe area view
absoluteViewAbsolute view
normalViewNot safe area or absolute view
containerThe whole navigation bar
seperatorSeperator line at the bottom
titleContainerTitle container off center
titleInner title text
leftViewLeft view contains all left buttons
rightViewRight view contains all right buttons
buttonViewText-type button touchable view
buttonTextText-type button text
gobackViewGoback button touchable view
gobackImageGoback button image
gobackTextGoback button text

FAQ

You can see Wiki for questions. And if not found, you can commit a issue to me.

Example Project

You can open the example project by following steps:

  1. Enter example. Use yarn or npm install to install the modules. Run npm start in a seperate terminal.
  2. Create a example project with entry file index and module name test.