From 62635ca7d7941e8d4c8011635e703c12ddebb50d Mon Sep 17 00:00:00 2001
From: Brad Bumbalough <brad@teamgantt.com>
Date: Fri, 12 Jul 2019 21:34:59 -0700
Subject: [PATCH] Update drawer navigation examples and add snacks

- Closes #346 and #114
---
 .../version-1.x/drawer-based-navigation.md    | 73 +++++++----------
 .../version-2.x/drawer-based-navigation.md    | 71 +++++++---------
 .../version-3.x/drawer-based-navigation.md    | 80 ++++++++-----------
 3 files changed, 93 insertions(+), 131 deletions(-)

diff --git a/website/versioned_docs/version-1.x/drawer-based-navigation.md b/website/versioned_docs/version-1.x/drawer-based-navigation.md
index cec25f73066..ab7a92ef281 100644
--- a/website/versioned_docs/version-1.x/drawer-based-navigation.md
+++ b/website/versioned_docs/version-1.x/drawer-based-navigation.md
@@ -6,64 +6,51 @@ original_id: drawer-based-navigation
 ---
 
 ```js
-class MyHomeScreen extends React.Component {
-  static navigationOptions = {
-    drawerLabel: 'Home',
-    drawerIcon: ({ tintColor }) => (
-      <Image
-        source={require('./chats-icon.png')}
-        style={[styles.icon, {tintColor: tintColor}]}
-      />
-    ),
-  };
-
+class HomeScreen extends React.Component {
   render() {
     return (
-      <Button
-        onPress={() => this.props.navigation.navigate('Notifications')}
-        title="Go to notifications"
-      />
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <TouchableOpacity
+          onPress={() => this.props.navigation.navigate('DrawerOpen')}>
+          <Text>Open Drawer</Text>
+        </TouchableOpacity>
+        <Text style={{ fontWeight: 'bold', marginTop: 20 }}>Home</Text>
+      </View>
     );
   }
 }
 
-class MyNotificationsScreen extends React.Component {
-  static navigationOptions = {
-    drawerLabel: 'Notifications',
-    drawerIcon: ({ tintColor }) => (
-      <Image
-        source={require('./notif-icon.png')}
-        style={[styles.icon, {tintColor: tintColor}]}
-      />
-    ),
-  };
-
+class SettingsScreen extends React.Component {
   render() {
     return (
-      <Button
-        onPress={() => this.props.navigation.goBack()}
-        title="Go back home"
-      />
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <TouchableOpacity
+          onPress={() => this.props.navigation.navigate('DrawerOpen')}>
+          <Text>Open Drawer</Text>
+        </TouchableOpacity>
+        <Text style={{ fontWeight: 'bold', marginTop: 20 }}>Settings</Text>
+      </View>
     );
   }
 }
 
-const styles = StyleSheet.create({
-  icon: {
-    width: 24,
-    height: 24,
+const MyDrawerNavigator = new DrawerNavigator(
+  {
+    Home: HomeScreen,
+    Settings: SettingsScreen,
   },
-});
+  {
+    drawerBackgroundColor: 'rgba(255,255,255,.9)',
+    contentOptions: {
+      activeTintColor: '#fff',
+      activeBackgroundColor: '#6b52ae',
+    },
+  }
+);
 
-const MyApp = DrawerNavigator({
-  Home: {
-    screen: MyHomeScreen,
-  },
-  Notifications: {
-    screen: MyNotificationsScreen,
-  },
-});
+export default MyDrawerNavigator;
 ```
+<a href="https://snack.expo.io/@react-navigation/basic-drawer-v1" target="blank" class="run-code-button">&rarr; Run this code</a>
 
 To open and close drawer, navigate to `'DrawerOpen'` and `'DrawerClose'` respectively.
 
diff --git a/website/versioned_docs/version-2.x/drawer-based-navigation.md b/website/versioned_docs/version-2.x/drawer-based-navigation.md
index 2bf1871fd94..ee6de9cd16b 100644
--- a/website/versioned_docs/version-2.x/drawer-based-navigation.md
+++ b/website/versioned_docs/version-2.x/drawer-based-navigation.md
@@ -6,64 +6,49 @@ original_id: drawer-based-navigation
 ---
 
 ```js
-class MyHomeScreen extends React.Component {
-  static navigationOptions = {
-    drawerLabel: 'Home',
-    drawerIcon: ({ tintColor }) => (
-      <Image
-        source={require('./chats-icon.png')}
-        style={[styles.icon, {tintColor: tintColor}]}
-      />
-    ),
-  };
-
+class HomeScreen extends React.Component {
   render() {
     return (
-      <Button
-        onPress={() => this.props.navigation.navigate('Notifications')}
-        title="Go to notifications"
-      />
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <TouchableOpacity onPress={this.props.navigation.openDrawer}>
+          <Text>Open Drawer</Text>
+        </TouchableOpacity>
+        <Text style={{ fontWeight: 'bold', marginTop: 20 }}>Home</Text>
+      </View>
     );
   }
 }
 
-class MyNotificationsScreen extends React.Component {
-  static navigationOptions = {
-    drawerLabel: 'Notifications',
-    drawerIcon: ({ tintColor }) => (
-      <Image
-        source={require('./notif-icon.png')}
-        style={[styles.icon, {tintColor: tintColor}]}
-      />
-    ),
-  };
-
+class SettingsScreen extends React.Component {
   render() {
     return (
-      <Button
-        onPress={() => this.props.navigation.goBack()}
-        title="Go back home"
-      />
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <TouchableOpacity onPress={this.props.navigation.openDrawer}>
+          <Text>Open Drawer</Text>
+        </TouchableOpacity>
+        <Text style={{ fontWeight: 'bold', marginTop: 20 }}>Settings</Text>
+      </View>
     );
   }
 }
 
-const styles = StyleSheet.create({
-  icon: {
-    width: 24,
-    height: 24,
+const DrawerNavigator = createDrawerNavigator(
+  {
+    Home: HomeScreen,
+    Settings: SettingsScreen,
   },
-});
+  {
+    drawerBackgroundColor: 'rgba(255,255,255,.9)',
+    contentOptions: {
+      activeTintColor: '#fff',
+      activeBackgroundColor: '#6b52ae',
+    },
+  }
+);
 
-const MyApp = createDrawerNavigator({
-  Home: {
-    screen: MyHomeScreen,
-  },
-  Notifications: {
-    screen: MyNotificationsScreen,
-  },
-});
+export default createAppContainer(DrawerNavigator);
 ```
+<a href="https://snack.expo.io/@react-navigation/basic-drawer-v2" target="blank" class="run-code-button">&rarr; Run this code</a>
 
 To open and close drawer, use the following helpers to open and close the drawer:
 
diff --git a/website/versioned_docs/version-3.x/drawer-based-navigation.md b/website/versioned_docs/version-3.x/drawer-based-navigation.md
index 6bc58f0c5d4..39a64463936 100644
--- a/website/versioned_docs/version-3.x/drawer-based-navigation.md
+++ b/website/versioned_docs/version-3.x/drawer-based-navigation.md
@@ -4,70 +4,58 @@ title: Drawer navigation
 sidebar_label: Drawer navigation
 original_id: drawer-based-navigation
 ---
+The drawer navigator allows you to present a navigation menu to your users. It can be customized out of the box, or you can completely control with a custom component.
+
 This guide covers [createDrawerNavigator](drawer-navigator.html). 
 
 ```js
-class MyHomeScreen extends React.Component {
-  static navigationOptions = {
-    drawerLabel: 'Home',
-    drawerIcon: ({ tintColor }) => (
-      <Image
-        source={require('./chats-icon.png')}
-        style={[styles.icon, {tintColor: tintColor}]}
-      />
-    ),
-  };
-
+class HomeScreen extends React.Component {
   render() {
     return (
-      <Button
-        onPress={() => this.props.navigation.navigate('Notifications')}
-        title="Go to notifications"
-      />
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <TouchableOpacity onPress={this.props.navigation.openDrawer}>
+          <Text>Open Drawer</Text>
+        </TouchableOpacity>
+        <Text style={{ fontWeight: 'bold', marginTop: 20 }}>Home</Text>
+      </View>
     );
   }
 }
 
-class MyNotificationsScreen extends React.Component {
-  static navigationOptions = {
-    drawerLabel: 'Notifications',
-    drawerIcon: ({ tintColor }) => (
-      <Image
-        source={require('./notif-icon.png')}
-        style={[styles.icon, {tintColor: tintColor}]}
-      />
-    ),
-  };
-
+class SettingsScreen extends React.Component {
   render() {
     return (
-      <Button
-        onPress={() => this.props.navigation.goBack()}
-        title="Go back home"
-      />
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <TouchableOpacity onPress={this.props.navigation.openDrawer}>
+          <Text>Open Drawer</Text>
+        </TouchableOpacity>
+        <Text style={{ fontWeight: 'bold', marginTop: 20 }}>Settings</Text>
+      </View>
     );
   }
 }
 
-const styles = StyleSheet.create({
-  icon: {
-    width: 24,
-    height: 24,
-  },
-});
-
-const MyDrawerNavigator = createDrawerNavigator({
-  Home: {
-    screen: MyHomeScreen,
+const DrawerNavigator = createDrawerNavigator(
+  {
+    Home: HomeScreen,
+    Settings: SettingsScreen,
   },
-  Notifications: {
-    screen: MyNotificationsScreen,
-  },
-});
+  {
+    hideStatusBar: true,
+    drawerBackgroundColor: 'rgba(255,255,255,.9)',
+    overlayColor: '#6b52ae',
+    contentOptions: {
+      activeTintColor: '#fff',
+      activeBackgroundColor: '#6b52ae',
+    },
+  }
+);
 
-const MyApp = createAppContainer(MyDrawerNavigator);
+export default createAppContainer(DrawerNavigator);
 ```
 
+<a href="https://snack.expo.io/@react-navigation/basic-drawer-v3" target="blank" class="run-code-button">&rarr; Run this code</a>
+
 To open and close drawer, use the following helpers to open and close the drawer:
 
 ```js
@@ -95,3 +83,5 @@ If you would like to determine if drawer is open or closed, you can do the follo
 const parent = this.props.navigation.dangerouslyGetParent();
 const isDrawerOpen = parent && parent.state && parent.state.isDrawerOpen;
 ```
+
+Additionally, you can automatically hide the status bar by passing the DrawerLayout prop of `hideStatusBar: true`.