diff --git a/app/components/app.js b/app/components/app.js
index 187c852..212c4d4 100644
--- a/app/components/app.js
+++ b/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 ;
+ return (
+
+
+
+ );
}
componentWillMount() {
@@ -21,6 +45,11 @@ export default class extends React.Component {
+ }
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
diff --git a/app/components/navigation/BackButton.js b/app/components/navigation/BackButton.js
new file mode 100644
index 0000000..67b4a1d
--- /dev/null
+++ b/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 ;
+ }
+ return (
+
+
+ B
+
+
+ );
+ }
+}
diff --git a/app/components/navigation/RouteMapper.js b/app/components/navigation/RouteMapper.js
new file mode 100644
index 0000000..d0645cf
--- /dev/null
+++ b/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 (
+
+ );
+ },
+
+ RightButton(route, nav, index, navState) {
+ return (
+
+ );
+ },
+
+ Title(route, nav, index, navState) {
+ return (
+
+ );
+ },
+
+};
diff --git a/app/components/navigation/Title.js b/app/components/navigation/Title.js
new file mode 100644
index 0000000..b7cb01f
--- /dev/null
+++ b/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 (
+
+ { title }
+
+ );
+ }
+}