Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
github.com/gaoxiaosong/react-native-pure-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.
It supports:
Install by Yarn:
yarn add react-native-pure-navigation-bar
Install by NPM:
npm install --save react-native-pure-navigation-bar
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>
);
}
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 |
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 = {...};
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.
The component style is consist of three part:
defaultProps
in InnerNaviBar
, is medium level, can be override by User custom style.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 |
You can see Wiki for questions. And if not found, you can commit a issue to me.
You can open the example project by following steps:
example
. Use yarn
or npm install
to install the modules. Run npm start
in a seperate terminal.index
and module name test
.FAQs
Unknown package
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.