Navigation

Author: dfejgelis

src/App.js

@@ -0,0 +1,17 @@
+'use strict'
+
+import React from 'react-native'
+import Navigator from './nav/Navigator'
+
+const initialRoute = { id: 'home', title: "Discover App1" }
+
+class App extends React.Component {
+  render() {
+    return (
+      <Navigator initialRoute={initialRoute} />
+    )
+  }
+}
+
+export default App
+// export default HomeSelf

src/app.js

@@ -0,0 +1,12 @@
+'use strict'
+
+import React from 'react-native'
+import NavigationBarRouteMapper from './NavigationBarRouteMapper'
+
+import styles from './NavigationBarStyles'
+
+const NavigationBar = <React.Navigator.NavigationBar
+          routeMapper={NavigationBarRouteMapper}
+          style={styles.navBar} />
+
+export default NavigationBar

src/nav/NavigationBar.js

@@ -0,0 +1,63 @@
+import React, {
+  TouchableHighlight,
+  Text,
+} from 'react-native'
+
+
+const NavigationBarRouteMapper = {
+  LeftButton(route, navigator, index, navState) {
+    if (index === 0) {
+      return null;
+    } else {
+      return (
+        <TouchableHighlight onPress={() => {
+          if (index > 0) {
+            navigator.pop();
+          }
+        }} style={styles.navButtonLeft}>
+         <Text style={styles.navBarText}>Back</Text>
+       </TouchableHighlight>
+      )
+    }
+  },
+
+  RightButton() {
+    <Text style={styles.navBarText}>
+      RightButton
+    </Text>
+  },
+
+  Title(route, navigator, index, navState) {
+    return (
+      <Text style={styles.navBarTitleText}>
+        {(route.title) ? route.title : "Discover App"}
+      </Text>
+    )
+  },
+}
+
+
+const styles = React.StyleSheet.create({
+  navBarButtonText: {
+    fontSize: 10,
+    textAlign: 'center',
+    margin: 10,
+  },
+  navBarTitleText: {
+    fontSize: 12,
+    textAlign: 'center',
+    margin: 10,
+  },
+  navBarText: {
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+  },
+  navButtonLeft: {
+    marginTop: 10,
+    marginLeft: 10,
+  },
+});
+
+
+export default NavigationBarRouteMapper

src/nav/NavigationBarRouteMapper.js

@@ -0,0 +1,30 @@
+'use strict'
+
+import { StyleSheet } from 'react-native'
+
+
+export default StyleSheet.create({
+  navBar: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+    borderBottomWidth: 1,
+    borderBottomColor: "#CCC",
+  },
+  navBarButtonText: {
+    fontSize: 10,
+    textAlign: 'center',
+    margin: 10,
+  },
+  navBarTitleText: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+  navBarText: {
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+  },
+})

src/nav/NavigationBarStyles.js

@@ -0,0 +1,29 @@
+import React from 'react-native'
+import NavigationBar from './NavigationBar'
+import NavigationRenderScene from './RenderScene'
+
+// const paddingTop = React.Navigator.NavigationBar.Styles.General.NavBarHeight
+const paddingTop = 64
+
+
+class Navigator extends React.Component {
+  render() {
+    return (
+      <React.Navigator
+          style={{flex:1}}
+          initialRoute={this.props.initialRoute}
+          renderScene={NavigationRenderScene}
+          navigationBar={NavigationBar}
+          sceneStyle={{paddingTop}}
+      />
+    )
+  }
+}
+
+Navigator.propTypes = {
+  initialRoute: React.PropTypes.shape({
+    id: React.PropTypes.string.isRequired,
+  }).isRequired,
+}
+
+export default Navigator

src/nav/Navigator.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import React from 'react-native'
+import HomeView from '../views/Home'
+import LoginView from '../views/Login'
+
+
+export default function renderScene(route, navigator) {
+    switch (route.id) {
+      case 'login':
+        return (<LoginView navigator={navigator} {...route.data} />)
+      case 'home':
+        return (<HomeView navigator={navigator} />)
+      default:
+        return (
+          <React.Text style={{fontSize: 40, color: 'red'}}>
+            Oops, route error '{route.id}'
+          </React.Text>
+        )
+    }
+  }

src/nav/RenderScene.js

@@ -3,25 +3,38 @@
 import React, {
   Text,
   View,
+  TouchableHighlight,
 } from 'react-native';
 
 import styles from './HomeStyles'
 
-export default class Home extends React.Component {
+class Home extends React.Component {
+  _AuthWithSpotify() {
+    this.props.navigator.push({
+      id: 'login',
+      title: 'Login in first'
+    })
+  }
+
   render() {
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>
           Welcome to React Native!
         </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
+        <TouchableHighlight style={styles.partyBtn}
+                            underlayColor={'#669694'}
+                            onPress={this._AuthWithSpotify.bind(this)}>
+          <Text style={styles.simpleText}>
+            Authenticate with spotify
+          </Text>
+        </TouchableHighlight>
       </View>
     );
   }
 }
+
+Home.propTypes = {
+  navigator: React.PropTypes.object.isRequired,
+}
+export default Home

src/views/Home/Home.js

@@ -0,0 +1,12 @@
+'use strict'
+
+import React from 'react-native'
+
+
+export default class Login extends React.Component {
+  render() {
+    return (
+      <React.Text style={{fontSize: 30, flex:1}}>Mono!!!</React.Text>
+    )
+  }
+}

src/views/Login/Login.js

@@ -0,0 +1,5 @@
+{
+  "name": "Login",
+  "private": true,
+  "main": "./Login.js"
+}