diff --git a/docs/buildingDrawerNavigation.md b/docs/buildingDrawerNavigation.md
index aa78a13c7..75fd6fe20 100644
--- a/docs/buildingDrawerNavigation.md
+++ b/docs/buildingDrawerNavigation.md
@@ -9,16 +9,14 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f
 
 Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB.
 
-```SnackPlayer name=Drawer-Navigation dependencies=@react-navigation/stack@5.1.0,@react-navigation/drawer,@react-navigation/native@5.0.8,react-native-vector-icons,react-native-gesture-handler@1.10.2,react-native-linear-gradient,@react-native-community/masked-view@0.1.10,react-native-screens@3.0.0,react-native-reanimated@2.1.0
+```SnackPlayer name=Drawer-Navigation dependencies=@react-navigation/stack@6.0.2,@react-navigation/drawer@6.1.3,@react-navigation/native@6.0.2,react-native-vector-icons,react-native-gesture-handler@~1.10.2,react-native-linear-gradient,@react-native-community/masked-view@0.1.10,react-native-screens@~3.4.0,react-native-reanimated@~2.2.0
 import * as React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import {
   createDrawerNavigator,
   DrawerContentScrollView,
 } from '@react-navigation/drawer';
-import {
-  MaterialCommunityIcons
-} from '@expo/vector-icons';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import {
   NativeBaseProvider,
   Button,
@@ -31,110 +29,122 @@ import {
   Center,
   HStack,
   Divider,
-  Icon
+  Icon,
 } from 'native-base';
 const Drawer = createDrawerNavigator();
 function Component(props) {
   return (
-    <HStack alignItems="center" mt="6">
-      <Pressable onPress={() => props.navigation.toggleDrawer()} position="absolute" ml="2" zIndex="1">
-        <HamburgerIcon ml="2" size="sm"/>
-      </Pressable>
-      <Center flex={1} >
-        <Heading size="md">{props.route.name}</Heading>
-      </Center>
-    </HStack>
+    <Center flex={1}>
+      <Heading size="md">{props.route.name} Screen</Heading>
+      <Button colorScheme="indigo" mt="4" onPress={() => props.navigation.toggleDrawer()}>
+        Open Drawer
+      </Button>
+    </Center>
   );
 }
 
 const getIcon = (screenName) => {
   switch (screenName) {
     case 'Inbox':
-      return "email"
+      return 'email';
     case 'Outbox':
-      return 'send'
+      return 'send';
     case 'Favorites':
-      return 'heart'
+      return 'heart';
     case 'Archive':
-      return 'archive'
+      return 'archive';
     case 'Trash':
-      return 'trash-can'
+      return 'trash-can';
     case 'Spam':
-      return 'alert-circle'
+      return 'alert-circle';
     default:
-      return undefined
+      return undefined;
   }
-}
+};
 
 function CustomDrawerContent(props) {
   return (
     <DrawerContentScrollView {...props} safeArea>
-    <VStack space="6" my="2" mx="1">
-      <Box px="4">
-        <Text bold color="gray.700">Mail</Text>
-        <Text fontSize="14" mt="1" color="gray.500" fontWeight="500">john_doe@gmail.com</Text>
-      </Box>
-    <VStack divider={<Divider />} space="4">
-      <VStack space="3">
-        {props.state.routeNames.map((name, index) => (
-            <Pressable
-              px="5"
-              py="3"
-              rounded="md"
-              bg={index === props.state.index ? 'rgba(6, 182, 212, 0.1)' : 'transparent'}
-              onPress={(event) => {
-                props.navigation.navigate(name);
-              }}
-              >
+      <VStack space="6" my="2" mx="1">
+        <Box px="4">
+          <Text bold color="gray.700">
+            Mail
+          </Text>
+          <Text fontSize="14" mt="1" color="gray.500" fontWeight="500">
+            john_doe@gmail.com
+          </Text>
+        </Box>
+        <VStack divider={<Divider />} space="4">
+          <VStack space="3">
+            {props.state.routeNames.map((name, index) => (
+              <Pressable
+                px="5"
+                py="3"
+                rounded="md"
+                bg={
+                  index === props.state.index
+                    ? 'rgba(6, 182, 212, 0.1)'
+                    : 'transparent'
+                }
+                onPress={(event) => {
+                  props.navigation.navigate(name);
+                }}>
                 <HStack space="7" alignItems="center">
                   <Icon
-                  color={index === props.state.index ? 'primary.500' : 'gray.500'}
-                  size="5" as={<MaterialCommunityIcons name={getIcon(name)}/>}  />
-                  <Text fontWeight="500" color={index === props.state.index ? 'primary.500' : 'gray.700'}>
-                  {name}
+                    color={
+                      index === props.state.index ? 'primary.500' : 'gray.500'
+                    }
+                    size="5"
+                    as={<MaterialCommunityIcons name={getIcon(name)} />}
+                  />
+                  <Text
+                    fontWeight="500"
+                    color={
+                      index === props.state.index ? 'primary.500' : 'gray.700'
+                    }>
+                    {name}
                   </Text>
                 </HStack>
               </Pressable>
             ))}
           </VStack>
           <VStack space="5">
-            <Text fontWeight="500" fontSize="14" px="5" color="gray.500">Labels</Text>
+            <Text fontWeight="500" fontSize="14" px="5" color="gray.500">
+              Labels
+            </Text>
             <VStack space="3">
-              <Pressable
-                px="5"
-                py="3"
-              >
+              <Pressable px="5" py="3">
                 <HStack space="7" alignItems="center">
                   <Icon
-                  color='gray.500'
-                  size="5" as={<MaterialCommunityIcons name='bookmark'/>}  />
-                  <Text color='gray.700' fontWeight="500">
+                    color="gray.500"
+                    size="5"
+                    as={<MaterialCommunityIcons name="bookmark" />}
+                  />
+                  <Text color="gray.700" fontWeight="500">
                     Family
                   </Text>
                 </HStack>
               </Pressable>
-               <Pressable
-                px="5"
-                py="2"
-               >
+              <Pressable px="5" py="2">
                 <HStack space="7" alignItems="center">
                   <Icon
-                  color='gray.500'
-                  size="5" as={<MaterialCommunityIcons name='bookmark'/>}  />
-                  <Text color='gray.700'  fontWeight="500">
+                    color="gray.500"
+                    size="5"
+                    as={<MaterialCommunityIcons name="bookmark" />}
+                  />
+                  <Text color="gray.700" fontWeight="500">
                     Friends
                   </Text>
                 </HStack>
               </Pressable>
-              <Pressable
-                px="5"
-                py="3"
-              >
+              <Pressable px="5" py="3">
                 <HStack space="7" alignItems="center">
                   <Icon
-                  color='gray.500'
-                  size="5" as={<MaterialCommunityIcons name='bookmark'/>}  />
-                  <Text  fontWeight="500" color='gray.700'>
+                    color="gray.500"
+                    size="5"
+                    as={<MaterialCommunityIcons name="bookmark" />}
+                  />
+                  <Text fontWeight="500" color="gray.700">
                     Work
                   </Text>
                 </HStack>
@@ -148,17 +158,16 @@ function CustomDrawerContent(props) {
 }
 function MyDrawer() {
   return (
-    <Box safeArea flex={1} >
-    <Drawer.Navigator
-      drawerContent={(props) => <CustomDrawerContent {...props} />}
-    >
-      <Drawer.Screen name="Inbox" component={Component} />
-      <Drawer.Screen name="Outbox" component={Component} />
-      <Drawer.Screen name="Favorites" component={Component} />
-      <Drawer.Screen name="Archive" component={Component} />
-      <Drawer.Screen name="Trash" component={Component} />
-      <Drawer.Screen name="Spam" component={Component} />
-    </Drawer.Navigator>
+    <Box safeArea flex={1}>
+      <Drawer.Navigator
+        drawerContent={(props) => <CustomDrawerContent {...props} />}>
+        <Drawer.Screen name="Inbox" component={Component} />
+        <Drawer.Screen name="Outbox" component={Component} />
+        <Drawer.Screen name="Favorites" component={Component} />
+        <Drawer.Screen name="Archive" component={Component} />
+        <Drawer.Screen name="Trash" component={Component} />
+        <Drawer.Screen name="Spam" component={Component} />
+      </Drawer.Navigator>
     </Box>
   );
 }