Added navigation bar

app/components/app.js

@@ -1,15 +1,39 @@
 import React from 'react-native';
 
 import RouteMaster from './routes/RouteMaster';
+import RouteMapper from './navigation/RouteMapper';
 
 const {
   Navigator,
+  StyleSheet,
+  Platform,
+  View
 } = React;
 
+const styles = StyleSheet.create({
+  navbar: {
+    backgroundColor: '#888',
+    flexDirection:'row',
+    justifyContent: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: (Platform.OS === 'ios' ? 64 : 56)
+  }
+});
+
 export default class extends React.Component {
   renderScene(route, nav) {
+    const Component = route.component;
     const props = route.props || {};
-    return <route.component nav={nav} {...props}/>;
+    return (
+      <View style={styles.container}>
+        <Component
+          nav={nav}
+          currentRoute={props.route}
+          {...props} />
+      </View>
+    );
   }
 
   componentWillMount() {
@@ -21,6 +45,11 @@ export default class extends React.Component {
       <Navigator
         renderScene={this.renderScene}
         initialRoute={this.initialRoute}
+        navigationBar={
+          <Navigator.NavigationBar
+            style={styles.navbar}
+            routeMapper={RouteMapper} />
+        }
         configureScene={(route) => {
           if (route.sceneConfig) {
             return route.sceneConfig;

app/components/navigation/BackButton.js

@@ -0,0 +1,40 @@
+import React from 'react-native';
+
+var {
+  StyleSheet,
+  TouchableHighlight,
+  View,
+  Text
+} = React;
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  toolbarButton: {
+    paddingHorizontal: 10,
+  },
+});
+
+export default class NavigationButton extends React.Component {
+  _goBack() {
+    this.props.nav.pop();
+  }
+
+  render() {
+    if (this.props.nav.getCurrentRoutes().length <= 1) {
+      return <View />;
+    }
+    return (
+      <View style={styles.container}>
+        <TouchableHighlight
+          style={styles.toolbarButton}
+          underlayColor="#FFF"
+          onPress={this._goBack.bind(this)}>
+          <Text>B</Text>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+}

app/components/navigation/RouteMapper.js

@@ -0,0 +1,29 @@
+import React from 'react-native'; // eslint-disable-line no-unused-vars
+
+import NavigationTitle from './Title';
+import NavigationBackButton from './BackButton';
+
+import { View } from 'react-native';
+
+
+export default {
+
+  LeftButton(route, nav, index, navState) {
+    return (
+      <NavigationBackButton nav={nav} direction="left" />
+    );
+  },
+
+  RightButton(route, nav, index, navState) {
+    return (
+      <View />
+    );
+  },
+
+  Title(route, nav, index, navState) {
+    return (
+      <NavigationTitle route={route} />
+    );
+  },
+
+};

app/components/navigation/Title.js

@@ -0,0 +1,30 @@
+import React from 'react-native';
+
+var {
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 18,
+    textAlign: 'center',
+    color: '#000'
+  }
+});
+
+export default class NavigationTitle extends React.Component {
+  render() {
+    const title = this.props.route.title || 'Sphere';
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>{ title }</Text>
+      </View>
+    );
+  }
+}