react-native-navbar

Navigation bar component for react native

Download from npm

     npm i react-native-navbar-wrapper

Example Use:-

     import NavbarWrapper from 'react-native-navbar-wrapper';

Inside render function

     <NavbarWrapper
        hasBack={true}   // true or false
        backPressed={this.backPressed}
        show={true}   //  true or false
        title={"App title "}
        openMenu={this.openMenu}
        closeMenu = {this.closeMenu}
        initialRoute={{name:'PageOne', title:'Page One'}}
        renderScene={this.renderScene}
        setNavigator={ this._setNavigator} //use this function if you want to get navigator reference
        configureScene={this.configureScene}
        menuItemSelected = {this._menuItemSelected}
        isMenuOpen = {true} // true or false
        backIcon = {backIcon}  // left button icon
        menuIcon = {menuIcon}  // right button icon
        menuItems = {["button1" , "button2" , "button3"]}  // buttons in menu
        sceneStyle={{}}  // style
      />

#Required Properties:- #

renderScene

renderScene function, something like->
renderScene = (route, navigator) =>{ switch(route.name) { case "pageOne": return (); case "pageTwo": return (); } };
#

configureScene

configureScene function , example
configureScene = () => { return Navigator.SceneConfigs.FloatFromRight; }; #

initialRoute

initialRoute, example
initialRoute = {name: 'pageOne'} #

sceneStyle

scene style, eg:
sceneStyle={{flex:1, backgroundColor:'white'}}
#Optional Properties:-

#

hasBack

True to enable back button otherwise false
#

backPressed

Handler function for back button clicked

#

setNavigator

setNavigator function , use this as callback function to set navigator reference for example:

_setNavigator = (nav) =>{ this.navigator = nav; };

style for navigation bar can be passed through this property

navbarStyle : {{}}

Use this to change statusBar color in Android

statusBarColor :  'cyan'

Use this to change status bar style in iOS , Check possible values in official react native doc https://facebook.github.io/react-native/docs/statusbar.html#barstyle

statusBarStyle ={"light-content"}

Menu in right side is optional to set menuIcon pass reference of image in this parameter

 menuIcon = {menuIconRef}

List of action button in menu

menuItems = {["button1" , "button2" , "button3"]}

immidi / react-native-navbar-wrapper Goto Github PK

react-native-navbar-wrapper's Introduction

react-native-navbar

renderScene

renderScene function, something like-> renderScene = (route, navigator) =>{ switch(route.name) { case "pageOne": return (); case "pageTwo": return (); } }; #

configureScene

configureScene function , example configureScene = () => { return Navigator.SceneConfigs.FloatFromRight; }; #

initialRoute

initialRoute, example initialRoute = {name: 'pageOne'} #

sceneStyle

scene style, eg: sceneStyle={{flex:1, backgroundColor:'white'}} #Optional Properties:- #

hasBack

True to enable back button otherwise false #

backPressed

Handler function for back button clicked #

setNavigator

react-native-navbar-wrapper's People

Contributors

Watchers

Recommend Projects

Recommend Topics