Repository files navigation

• Installation
• Examples
• Getting started
• API
• Usage with webpack
• Questions?

• Basic
• Custom Elements
• Routing

• Installreact-native-navbar:

  • By usingyarn:

    $ yarn add react-native-navbar

  • By usingnpm:

    $ npm install react-native-navbar --save

• Import it in the file where you want to use it:

  importNavigationBarfrom'react-native-navbar';

• Add it to your React element tree:

conststyles={container:{flex:1,},};constrightButtonConfig={title:'Next',handler:()=>alert('hello!'),};consttitleConfig={title:'Hello, world',};functionComponentWithNavigationBar(){return(<Viewstyle={styles.container}><NavigationBartitle={titleConfig}rightButton={rightButtonConfig}/></View>);}

That's it, you're ready to go!

• style - (Object, Array) - Style object or array of style objects
• containerStyle - (Object) - Style object for styling navbar container
• tintColor - (String) - NavigationBar's tint color
• statusBar - (Object):
  • style - ('light-content' or 'default') - Style of statusBar
  • hidden - (Boolean)
  • tintColor - (String) - Status bar tint color
  • hideAnimation - ('fade', 'slide', 'none') - Type of statusBar hide animation
  • showAnimation - ('fade', 'slide', 'none') - Type of statusBar show animation
• leftButton / rightButton - (Object, React Element) - Either plain object with configuration, or React Element which will be used as a custom left/right button element. Configuration object has following keys:
  • title - (String) - Button's title
  • tintColor - (String) - Button's text color
  • style - (Object, Array) - Style object or array of style objects
  • handler - (Function) - onPress function handler
  • disabled - (Boolean) - If true, disable interactions for this button.
  • accessible - (Boolean) - Indicates that the view is an accessibility element
  • accessibilityLabel - (String, React Element) - Overrides the text that's read by the screen reader for the button.
• title - (Object, React Element) - Either plain object with configuration, or React Element which will be used as a custom title element. Configuration object has following keys:
  • title - (String) - Button's title
  • style - (Object, Array, Number) - Style object or array of style objects
  • tintColor - (String) - Title's text color
  • ellipsizeMode - ('head', 'middle', 'tail', 'clip') - How todisplay the text
  • numberOfLines - (Number) - How totruncate the text

This module uses JSX syntax and requires a compiler such asbabel.React Native's packager runs this automatically but if you use Webpack be sureto compile this module from your dependencies

loaders:[{test:/\.js$/,include:[path.resolve(__dirname,"src"),path.resolve(__dirname,"node_modules/react-native-navbar")],loader:'babel',query:{stage:0,plugins:[]}}]

Feel free to ping me ontwitterIf you want to report a bug, pleasesubmit an issue!