/react-native-pure-navigation-bar

A fully customizable navigation bar in React Native.

Primary LanguageJavaScriptMIT LicenseMIT

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:

  • Absolute position style.
  • Safe Area Inset style.
  • Portrait and Landscape mode.
  • Translucent property for Android.
  • Do go back action automatically.
  • Title center or uncenter.
  • Seperator under navigation bar.
  • Button type of string, number or react element.
  • Go back button with image or text.
  • Customize style globally and in each view.

ScreenShots

iPhone X

Android

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

Name Description
DEFAULT_NAVBAR_HEIGHT Default navigation bar height
GOBACK_BUTTON An identifier when you set 'leftElement' or 'rightElement' to identify the button as GoBack button
GOBACK_IMAGE An default image for GOBACK_BUTTON
forceInset A function to generate forceInset options easilly
getSafeAreaInset Get 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'.

PropName Description
title Title view of text style or user custom view
titleCenter Title is must at center or not
hasSeperatorLine Bottom of navigation bar has a seperator line or not
leftElement Left 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
rightElement Right buttons, same format as 'leftElement'
onLeft 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 Right button click function, same format as 'onLeft'
autoCloseKeyboard Auto dismiss keyboard when click button or not
autoHardwareBack Auto listen hardware back event on Android or not
disableLock Enable or disable button clicking lock to avoid clicking multi times
gobackImage Image of goback button
gobackText Text of goback button
isAbsolute Enable absolute style or not
isTranslucent Translucent mode in Android
safeOptions Safe area option of navigation bar. Use 'false' to disable
navbarHeight Navigation bar height. Default is DEFAULT_NAVBAR_HEIGHT
style A 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:

  • User custom style, passed by component props, is highest level.
  • Global setting style, set with defaultProps in InnerNaviBar, is medium level, can be override by User custom style.
  • Inner style, written in src/style.js, is lowest level, can be overrided by the two styles above.

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

Key Description
safeView Safe area view
absoluteView Absolute view
normalView Not safe area or absolute view
container The whole navigation bar
seperator Seperator line at the bottom
titleContainer Title container off center
title Inner title text
leftView Left view contains all left buttons
rightView Right view contains all right buttons
buttonView Text-type button touchable view
buttonText Text-type button text
gobackView Goback button touchable view
gobackImage Goback button image
gobackText Goback 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.