Navbar component for React Native
JavaScript
Latest commit a2e1b65 Aug 18, 2016 @BilalBudhani BilalBudhani committed with Kureev Adds containerStyle prop

README.md

Customizable navbar for react-native

react-native-side-menu demo

Content

Installation

First of all, make sure you're using npm3+ and babel6 for version 1.1.1 or above.

npm i react-native-navbar --save

Examples

Getting started

First of all, I assume you've already made a react-native project by running react-native init project-name and installed react-native-navbar component by npm.

In your index.ios.js file require react-native-navbar component:

var NavigationBar = require('react-native-navbar');

or, if you use ES2015 syntax:

import NavigationBar from 'react-native-navbar';

Inside your component's render method, use NavigationBar:

render: function() {
  var rightButtonConfig = {
    title: 'Next',
    handler: function onNext() {
      alert('hello!');
    }
  };

  var titleConfig = {
    title: 'Hello, world',
  };

  return (
    <View style={{ flex: 1, }}>
      <NavigationBar
        title={titleConfig}
        rightButton={rightButtonConfig} />
    </View>
  );
}

or, if you use ES2015:

render() {
  const rightButtonConfig = {
    title: 'Next',
    handler: () => alert('hello!'),
  };

  const titleConfig = {
    title: 'Hello, world',
  };

  return (
    <View style={{ flex: 1, }}>
      <NavigationBar
        title={titleConfig}
        rightButton={rightButtonConfig} />
    </View>
  );
}

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

API

  • 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.
  • 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

Usage with Webpack

This module uses JSX syntax and requires a compiler such as babel. React Native's packager runs this automatically but if you use Webpack be sure to 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: [] }
}]

Questions?

Feel free to contact me via

  • Twitter
  • Slack (@kureev on #reactiflux channel)

If you want to report a bug, please submit an issue!