Merge pull request #2 from GantMan/add_drawer_stacks

drawer stacks in place

App.js

@@ -36,8 +36,6 @@ export default class App extends React.Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: '#fff'
   },
 })

Containers/ForgottenPasswordScreen.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>I am Forgotten Password
+        </Text>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

Containers/LoginScreen.js

@@ -5,7 +5,25 @@ export default class App extends React.Component {
   render() {
     return (
       <View style={styles.container}>
-        <Text>HIYA!!!!!</Text>
+        <Text>I am Login Screen</Text>
+
+        <Text
+          style={styles.linky}
+          onPress={() => this.props.navigation.navigate('signupScreen')} >
+          Go to Signup
+        </Text>
+
+        <Text
+          style={styles.linky}
+          onPress={() => this.props.navigation.navigate('forgottenPasswordScreen')} >
+          Go to Forgot Password
+        </Text>
+
+        <Text
+          style={styles.linky}
+          onPress={() => this.props.navigation.navigate('drawerStack')} >
+          Pretend we logged in
+        </Text>
       </View>
     )
   }
@@ -18,4 +36,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  linky: {
+    color: 'blue',
+    paddingTop: 10
+  }
 })

Containers/Screen1.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+export default class App extends React.Component {
+  static navigationOptions = {
+    drawerLabel: 'Screen One'
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Screen 1</Text>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

Containers/Screen2.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+export default class App extends React.Component {
+  static navigationOptions = {
+    drawerLabel: 'Screen Two'
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Screen2</Text>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

Containers/Screen3.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+export default class App extends React.Component {
+  static navigationOptions = {
+    drawerLabel: 'Screen Three'
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Screen3</Text>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

Containers/SignupScreen.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>I am Signup Screen</Text>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

Navigation/AppNavigation.js

@@ -1,13 +1,56 @@
-import { StackNavigator } from 'react-navigation'
+import React from 'react'
+import { Text } from 'react-native'
+import { StackNavigator, DrawerNavigator } from 'react-navigation'
 import LoginScreen from '../Containers/LoginScreen'
+import SignupScreen from '../Containers/SignupScreen'
+import ForgottenPasswordScreen from '../Containers/ForgottenPasswordScreen'
+import Screen1 from '../Containers/Screen1'
+import Screen2 from '../Containers/Screen2'
+import Screen3 from '../Containers/Screen3'
+
+// drawer stack
+const DrawerStack = DrawerNavigator({
+  screen1: { screen: Screen1 },
+  screen2: { screen: Screen2 },
+  screen3: { screen: Screen3 },
+}, {
+  gesturesEnabled: false
+})
+
+const DrawerNavigation = StackNavigator({
+  DrawerStack: { screen: DrawerStack }
+}, {
+  headerMode: 'float',
+  navigationOptions: ({navigation}) => ({
+    headerStyle: {backgroundColor: 'green'},
+    title: 'Logged In to your app!',
+    gesturesEnabled: false,
+    headerLeft: <Text onPress={() => navigation.navigate('DrawerOpen')}>Menu</Text>
+  })
+})
+
+// login stack
+const LoginStack = StackNavigator({
+  loginScreen: { screen: LoginScreen },
+  signupScreen: { screen: SignupScreen },
+  forgottenPasswordScreen: { screen: ForgottenPasswordScreen, navigationOptions: { title: 'Forgot Password' } }
+}, {
+  headerMode: 'float',
+  navigationOptions: {
+    headerStyle: {backgroundColor: 'red'},
+    title: 'You are not logged in'
+  }
+})
 
 // Manifest of possible screens
 const PrimaryNav = StackNavigator({
-  LoginScreen: { screen: LoginScreen }
+  loginStack: { screen: LoginStack },
+  drawerStack: { screen: DrawerNavigation }
 }, {
   // Default config for all screens
   headerMode: 'none',
-  initialRouteName: 'LoginScreen'
+  title: 'Main',
+  initialRouteName: 'loginStack'
 })
 
 export default PrimaryNav