Customizable navbar for react-native

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

Content

Installation
Usage example
Custom elements
- Custom buttons
- Custom title
Component props
Questions?

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. 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
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 standart title
statusBar (String) - Color of the status bar (lightContent/default)

Questions?

Feel free to contact me in twitter or create an issue

License

kietsy/react-native-navbar

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages