Attention: this component has been designed for usage with Navigator.
npm install react-native-navbar
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"/>
}}
/>
);
}
});
In the cases when you need some extra customization (like replacing title by image, adding extra buttons, etc), you can use custom components.
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 = { <View style={styles.navBarLeftButton}></View> }
customPrev={<CustomPrevButton/>}
customNext={<CustomNextButton/>}
/>
);
In every button you'll receive a navigator
property.
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} />
);
title
(String) - Title of the navbartitleColor
(String) - Color of the navbar title (hex/rgb(a))buttonsColor
(String) - Color of the buttonsbackgroundColor
(String) - Color of the navbar's backgroundonPrev
(Function) - Callback on left navbar button clickonNext
(Function) - Callback on right navbar button clickhidePrev
(Boolean) - Shouldprev
button be hidden or notprevTitle
(String) - Caption of the "back" buttonnextTitle
(String) - Caption of the "next" buttoncustomPrev
(React.Component) - Component to use instead of standart prev buttoncustomNext
(React.Component) - Component to use instead of standart next buttoncustomTitle
(React.Component) - Component to use instead of standart title
Feel free to contact me in twitter or create an issue