Skip to content

Simple customizable navbar component for react-native

License

Notifications You must be signed in to change notification settings

weluse/react-native-navbar

 
 

Repository files navigation

Customizable navbar for react-native

Attention: this component has been designed for usage with Navigator.

Image of Yaktocat

Content

Installation

npm install react-native-navbar

Warning! From version 0.7.1 this package require react-native version 0.8 or higher!

Usage example

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

var ExampleProject = React.createClass({

  renderScene: function(route, navigator) {
    var Component = route.component;
    var navBar = route.navigationBar;

    if (navBar) {
      navBar = React.addons.cloneWithProps(navBar, {
        navigator: navigator,
        route: route
      });
    }

    return (
      <View style={styles.navigator}>
        {navBar}
        <Component navigator={navigator} route={route} />
      </View>
    );
  },

  render: function() {
    return (
      <Navigator
        style={styles.navigator}
        renderScene={this.renderScene}
        initialRoute={{
          component: InitialView,
          navigationBar: <NavigationBar title="Initial View"/>
        }}
      />
    );
  }
});

Also, you can take a look on examples folder

Custom elements

In the cases when you need some extra customization (like replacing title by image, adding extra buttons, etc), you can use custom components. Every custom component will receive navigator and route property from renderScene method.

Custom buttons

There are some cases when you need to use custom buttons and it's not hard at all:

var CustomPrevButton = require('./CustomPrevButton');
var CustomNextButton = require('./CustomNextButton');

var navigationBar = (
  <NavigationBar
    title="Custom buttons"
    customPrev={<CustomPrevButton/>}
    customNext={<CustomNextButton/>}
  />
);

In every button you'll receive a navigator property.

Custom title

If for some reason you want to customize a title (add image or whatever), you can use customTitle prop:

var CustomTitle = require('./CustomTitle');

var navigationBar = <NavigationBar customTitle={<CustomTitle />} />;

Component props

  • title (String) - Title of the navbar
  • titleColor (String) - Color of the navbar title (hex/rgb(a))
  • backgroundStyle (Object) - Style that would be applied to navbar background component (Status Bar + Navbar). Navbar container is wrapped by background container to allow customize those layers separately. In case you need to make this view transparent or change background color - this option for you
  • statusBarStyle (Object) - Style that would be applied to the Status Bar.
  • style (Object) - Style that would be applied to navbar container. That property is only about real container that wraps buttons and title
  • buttonsColor (String) - Color of the buttons
  • onPrev (Function (navigator, route)) - Callback on left navbar button click
  • onNext (Function (navigator, route)) - Callback on right navbar button click
  • hidePrev (Boolean) - Should prev button be hidden or not
  • prevTitle (String) - Caption of the "back" button
  • nextTitle (String) - Caption of the "next" button
  • customPrev (React.Element) - React element to use instead of standart prev button
  • customNext (React.Element) - React element to use instead of standart next button
  • customTitle (React.Element) - React element to use instead of standard title
  • statusBar (String) - Color of the status bar (lightContent/default)

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 in twitter or create an issue

About

Simple customizable navbar component for react-native

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%