simple react-native navigator template

index.js

/**
 * Created by sospartan on 11/18/15.
 */

'use strict';

var React = require('react-native');
var {
    StyleSheet,
    Text,
    View,
    Navigator,
    TouchableOpacity,
    Platform
    } = React;

/**
 * define a global.routes as route map
 * for example:
 * {
 *  getTitle:()=>'welcome',
 *  getScene:(navigator)=>(<Text>Hello world</Text>)
 * }
 */
require('./routes');

var NavigationBarRouteMapper = {

    LeftButton: function(route, navigator, index, navState) {
        if (index === 0) {
            return null;
        }

        var previousRoute = navState.routeStack[index - 1];
        return (
            <TouchableOpacity
                onPress={() => navigator.pop()}
                style={styles.navBarLeft}
            >
                <Text >
                    &lt;return
                </Text>
            </TouchableOpacity>
        );
    },

    RightButton: function(route, navigator, index, navState) {
        return null;
    },

    Title: function(route, navigator, index, navState) {
        return (
            <View style={styles.navBarTitle}>
                <Text style={styles.navBarTitleText}>
                    {route.getTitle()} [{index}]
                </Text>
            </View>
        );
    },

};


var app = React.createClass({
    render: function() {
        return (
            <Navigator
                configureScene={()=>Platform.OS==='ios'?Navigator.SceneConfigs.FloatFromRight:Navigator.SceneConfigs.FadeAndroid}//android's floatfromright animation is terrible
                initialRoute={routes.home}
                renderScene={(route,navigator)=>{
                    return route.getScene(navigator);
                }}

                navigationBar={
                  <Navigator.NavigationBar
                    routeMapper={NavigationBarRouteMapper}
                    style={styles.navBar}
                  />
                }

                sceneStyle={styles.scene}
            />
        );
    }
});

var styles = StyleSheet.create({
    scene:{
        flex:1,
        paddingTop:Navigator.NavigationBar.Styles.General.NavBarHeight
    },
    navBar:{
        backgroundColor:'grey'
    },
    navBarLeft:{justifyContent:'center',flex:1},
    navBarTitle:{
        justifyContent:'center',
        flex:1
    },
    navBarTitleText:{
        fontWeight:'bold'
    }

});

module.exports = app;