Merge pull request #3 from GantMan/custom_drawer

add custom container and logout

Containers/DrawerContainer.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import { StyleSheet, Text, View, Image } from 'react-native'
+import { NavigationActions } from 'react-navigation'
+
+export default class DrawerContainer extends React.Component {
+
+  logout = () => {
+    // This will reset back to loginStack
+    // https://github.com/react-community/react-navigation/issues/1127
+    const actionToDispatch = NavigationActions.reset({
+      index: 0,
+      key: null,  // black magic
+      actions: [NavigationActions.navigate({ routeName: 'loginStack' })]
+    })
+    this.props.navigation.dispatch(actionToDispatch)
+  }
+
+  render() {
+    const { navigation } = this.props
+    return (
+      <View style={styles.container}>
+        <Text
+          onPress={() => navigation.navigate('screen1')}
+          style={styles.uglyDrawerItem}>
+          Screen 1
+        </Text>
+        <Text
+          onPress={() => navigation.navigate('screen2')}
+          style={styles.uglyDrawerItem}>
+          Screen 2
+        </Text>
+        <Text
+          onPress={() => navigation.navigate('screen3')}
+          style={styles.uglyDrawerItem}>
+          Screen 3
+        </Text>
+        <Text
+          onPress={this.logout}
+          style={styles.uglyDrawerItem}>
+          Log Out
+        </Text>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#ccc',
+    paddingTop: 40,
+    paddingHorizontal: 20
+  },
+  uglyDrawerItem: {
+    fontSize: 20,
+    color: 'blue',
+    padding: 15,
+    margin: 5,
+    borderRadius: 10,
+    borderColor: 'blue',
+    borderWidth: 1,
+    textAlign: 'center',
+    backgroundColor: 'white',
+    overflow: 'hidden'
+  }
+})

Navigation/AppNavigation.js

@@ -7,6 +7,7 @@ import ForgottenPasswordScreen from '../Containers/ForgottenPasswordScreen'
 import Screen1 from '../Containers/Screen1'
 import Screen2 from '../Containers/Screen2'
 import Screen3 from '../Containers/Screen3'
+import DrawerContainer from '../Containers/DrawerContainer'
 
 // https://github.com/react-community/react-navigation/issues/1254
 const noTransitionConfig = () => ({
@@ -23,7 +24,8 @@ const DrawerStack = DrawerNavigator({
   screen2: { screen: Screen2 },
   screen3: { screen: Screen3 },
 }, {
-  gesturesEnabled: false
+  gesturesEnabled: false,
+  contentComponent: (props) => <DrawerContainer {...props} />
 })
 
 const DrawerNavigation = StackNavigator({