title: React Native: How to disable drawer in specific screen?
body: <p>I've been trying to do the navigation but I'm sticking with this problem for a while. How can I disable drawer for the screen 'work'. I know that drawer has an option 'gestureEnabled' but I've tried to put this into stack's option but it doesn't work. Or anyway that I can do the 'gestureEnabled' in the stack's option?</p>
  <p>this is my code:</p>
  <pre><code>import React from 'react';
  import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
  import Icon from 'react-native-vector-icons/FontAwesome';
  
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  import { createDrawerNavigator, DrawerContentScrollView, DrawerItem, DrawerItemList } from '@react-navigation/drawer';
  
  import HomeScreen from './screens/HomeScreen'
  import DocumentsScreen from './screens/DocumentsScreen'
  import WorkFlowScreen from './screens/WorkFlowScreen'
  import AboutScreen from './screens/AboutScreen'
  import ShowAccessTokenScreen from './screens/ShowAccessTokenScreen'
  import LoginScreen from './screens/LoginScreen'
  import Work from './screens/Work'
  
  import { WorkHeader } from './screens/Work'
  import { HomeHeader } from './screens/HomeScreen'
  
  //------------------------Navigation-----------------------
  const Stack = createStackNavigator();
  const Tab = createBottomTabNavigator();
  const Drawer = createDrawerNavigator();
  
  //----------Drawer----------
  function DrawerNavigator() {
      return (
          &lt;Drawer.Navigator initialRouteName=&quot;Home&quot; drawerContent={props =&gt; {
              return (
  
                  &lt;DrawerContentScrollView {...props}&gt;
                      &lt;DrawerItemList {...props} /&gt;
                  &lt;/DrawerContentScrollView&gt;
              )
          }}&gt;
              &lt;Drawer.Screen name=&quot;Home&quot; component={StackNavigator} /&gt;
              &lt;Drawer.Screen name=&quot;About&quot; component={AboutScreen} /&gt;
              &lt;Drawer.Screen name=&quot;ShowAccessTokenScreen&quot; component={ShowAccessTokenScreen} options={{ drawerLabel: 'Your Token', gestureEnabled: false }} /&gt;
          &lt;/Drawer.Navigator&gt;
      )
  }
  
  //-----------Tabs-----------
  function TabNavigator() {
      return (
          &lt;Tab.Navigator tabBarOptions={{
              showLabel: false,
              style: {
                  position: 'absolute',
                  marginHorizontal: 20
              }
          }}&gt;
              &lt;Tab.Screen name='HomeScreen' component={HomeScreen}
                  options={{
                      tabBarIcon: ({ focused }) =&gt; (
                          &lt;View style={{ alignItems: 'center', }}&gt;
                              &lt;Icon name='home' style={{ color: focused ? `#e32f45` : `#748c94`, }} /&gt;
                              &lt;Text style={{ color: focused ? `#e32f45` : `#748c94`, }}&gt;HOME&lt;/Text&gt;
                          &lt;/View&gt;
                      ),
                  }} /&gt;
              &lt;Tab.Screen name='DocumentsScreen' component={DocumentsScreen}
                  options={{
                      tabBarIcon: ({ focused }) =&gt; (
                          &lt;View style={{ alignItems: 'center' }}&gt;
                              &lt;Icon name='folder' style={{ color: focused ? `#e32f45` : `#748c94`, }} /&gt;
                              &lt;Text style={{ color: focused ? `#e32f45` : `#748c94`, }}&gt;DOCUMENTS&lt;/Text&gt;
                          &lt;/View&gt;
                      ),
                      unmountOnBlur: true,
                  }} /&gt;
          &lt;/Tab.Navigator&gt;
      )
  }
  
  //----------Stacks----------
  function StackNavigator({ navigation }) {
      return (
  
          &lt;Stack.Navigator &gt;
              &lt;Stack.Screen name='LoginScreen' component={LoginScreen}
                  options={
                      {
                          headerShown: false,
                      }} /&gt;
              &lt;Stack.Screen name='HomeScreen' component={TabNavigator}
                  options={
                      {
                          headerTitle: () =&gt; &lt;HomeHeader navigation={navigation} /&gt;,
                          headerLeft: null,
                      }} /&gt;
              &lt;Stack.Screen name='WorkFlowScreen' component={WorkFlowScreen}
                  options={{ gestureEnabled: false }} /&gt;
              &lt;Stack.Screen name='ShowAccessTokenScreen' component={ShowAccessTokenScreen} /&gt;
              &lt;Stack.Screen name='Work' component={Work}
                  options={
                      {
                          headerTitle: () =&gt; &lt;WorkHeader navigation={navigation} /&gt;,
                          headerLeft: null,
  
                      }
                  } /&gt;
          &lt;/Stack.Navigator&gt;
  
      )
  }
  
  //-------------------------------------------------------------------------
  const App = () =&gt; {
      return (
          &lt;NavigationContainer&gt;
              &lt;DrawerNavigator /&gt;
          &lt;/NavigationContainer&gt;
      )
  }
  
  const styles = StyleSheet.create({
  
  })
  
  export default App;
  </code></pre>
  <p>My Header</p>
  <pre><code>//Header---------
  export function HomeHeader({ navigation }) {
      return (
          &lt;View style={styles.homeHeader}&gt;
              &lt;TouchableOpacity style={styles.headerLeft} onPress={() =&gt; navigation.openDrawer()} &gt;
                  &lt;Icon name='align-left' size={25} color='black' /&gt;
              &lt;/TouchableOpacity&gt;
              &lt;Text style={styles.homeHeaderText}&gt;eSigns &lt;/Text&gt;
              &lt;Icon size={25} name='address-card' color='black' /&gt;
          &lt;/View &gt;
      )
  }
  </code></pre>
  <p>Anyway I can fix this?</p>