Full commented example

'use strict';import React, {Component} from 'react';import ReactNative from 'react-native';const {AppRegistry,StyleSheet,Text,View,Navigator,Alert,TouchableHighlight} = ReactNative;//This is the app container that contains the navigator stuffclass AppContainer extends Component {renderScene(route, navigator) {switch(route.name) {case "Home"://You must pass route as a prop for this trick to work properlyreturn <Home route={route} navigator={navigator} {...route.passProps}  />default:return (<Text route={route}style={styles.container}>Your route name is probably incorrect {JSON.stringify(route)}</Text>);}}render() {return (<NavigatornavigationBar={<Navigator.NavigationBarstyle={ styles.navbar }routeMapper={ NavigationBarRouteMapper } />}initialRoute={{ name: 'Home' }}renderScene={ this.renderScene }/>);}}//Nothing fancy here, except for checking for injected buttons.//Notice how we are checking if there are injected buttons inside the route object.//Also, we are showing a "Back" button when the page is not at index-0 (e.g. not home)var NavigationBarRouteMapper = {LeftButton(route, navigator, index, navState) {if(route.leftNavButton) {return (<TouchableHighlightstyle={styles.leftNavButton}underlayColor="transparent"onPress={route.leftNavButton.onPress}><Text style={styles.navbarButtonText}>{route.leftNavButton.text}</Text></TouchableHighlight>);}else if(route.enableBackButton) {return (<TouchableHighlightstyle={styles.leftNavButton}underlayColor="transparent"onPress={() => navigator.pop() }><Text style={styles.navbarButtonText}>Back</Text></TouchableHighlight>);}},RightButton(route, navigator, index, navState) {if(route.rightNavButton) {return (<TouchableHighlightstyle={styles.rightNavButton}underlayColor="transparent"onPress={route.rightNavButton.onPress}><Text style={styles.navbarButtonText}>{route.rightNavButton.text}</Text></TouchableHighlight>);}},Title(route, navigator, index, navState) {//You can inject the title aswell.  If you don't we'll use the route name.return (<Text style={styles.navbarTitle}>{route.navbarTitle || route.name}</Text>);}};//This is considered a sub-page that navigator is showingclass Home extends Component {//This trick depends on that componentWillMount fires before the navbar is createdcomponentWillMount() {this.props.route.navbarTitle = "Home";this.props.route.rightNavButton = {text: "Button",onPress: this._doSomething.bind(this)};}//This method will be invoked by pressing the injected button._doSomething() {Alert.alert('Awesome, eh?',null,[{text: 'Indeed'},])}render() {return (<View style={styles.container}><Text>You are home</Text></View>);}}var styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',marginTop: 66},navbar: {backgroundColor: '#ffffff',},navbarTitle: {marginVertical: 10,fontSize: 17},leftNavButton: {marginVertical: 10,paddingLeft: 8,},rightNavButton: {marginVertical: 10,paddingRight: 8,},navbarButtonText: {fontSize: 17,color: "#007AFF"}});AppRegistry.registerComponent('AppContainer', () => AppContainer);