title: React navigation - react native - How to block drawer in Stack Navigator nested inside Drawer Navigator?
body: <p>In my react native app I have a stack navigator nested inside a drawer navigator. I want the drawer to be disabled in the stack navigator pages. I'm using react navigation 6.</p>
  <p>In the docs (<a href="https://reactnavigation.org/docs/drawer-navigator/#options" rel="nofollow noreferrer">https://reactnavigation.org/docs/drawer-navigator/#options</a>) I see there are two options for this: <code>gestureEnabled​</code> and <code>swipeEnabled​</code>. But these can only be used in drawer screens, not in stack screens like my case.</p>
  <p>My code is as following:</p>
  <pre class="lang-js prettyprint-override"><code>const Stack = createNativeStackNavigator&lt;RootStackParamList&gt;();
  const Drawer = createDrawerNavigator&lt;RootTabParamList&gt;();
  
  const loginStack = () =&gt; (
    &lt;Stack.Navigator&gt;
      &lt;Stack.Screen name=&quot;LandingScreen&quot; component={LandingScreen} options={{ headerShown: false }} /&gt;
      &lt;Stack.Screen name=&quot;LoginScreen&quot; component={LoginScreen} options={{ headerShown: false }} /&gt;
      &lt;Stack.Screen
        name=&quot;RegisterScreen&quot;
        component={RegisterScreen}
        options={{ headerShown: false }}
      /&gt;
    &lt;/Stack.Navigator&gt;
  );
  
  return (
    &lt;NavigationContainer&gt;
      &lt;Drawer.Navigator
        screenOptions={{
          drawerStyle: { backgroundColor: 'white' },
          drawerPosition: 'right',
        }}
      &gt;
        {!user ? (
          &lt;Drawer.Screen
            name=&quot;PublicStack&quot;
            component={loginStack}
            // options={{headerShown: false}}
            options={({ route }) =&gt; {
              const routeName = getFocusedRouteNameFromRoute(route);
              if (
                routeName === 'LandingScreen' ||
                routeName === 'LoginScreen' ||
                routeName === 'RegisterScreen'
              )
                return { swipeEnabled: false, gestureEnabled: false };
              return { swipeEnabled: true, gestureEnabled: true };
            }}
          /&gt;
        ) : (
          &lt;&gt;
            &lt;Drawer.Screen
              name=&quot;Search cocktails&quot;
              component={HomeScreen}
              options={{ header: () =&gt; &lt;Header /&gt; }}
            /&gt;
            &lt;Drawer.Screen
              name=&quot;Profile&quot;
              component={ProfileScreen}
              initialParams={{ userParam: null }}
              options={{ header: () =&gt; &lt;Header /&gt; }}
            /&gt;
            &lt;Drawer.Screen
              name=&quot;Publish a recipe&quot;
              component={PublishRecipeScreen}
              options={{ header: () =&gt; &lt;Header /&gt; }}
            /&gt;
            &lt;Drawer.Screen
              name=&quot;Favorites&quot;
              component={FavoritesScreen}
              options={{ header: () =&gt; &lt;Header /&gt; }}
            /&gt;
            &lt;Drawer.Screen
              name=&quot;Published recipes&quot;
              component={PublishedRecipesScreen}
              options={{ header: () =&gt; &lt;Header /&gt; }}
            /&gt;
            &lt;Drawer.Screen
              name=&quot;Log out&quot;
              component={CustomDrawerContent}
              options={{ header: () =&gt; &lt;Header /&gt; }}
            /&gt;
  
            &lt;Drawer.Screen
              name=&quot;CocktailDetailScreen&quot;
              component={CocktailDetailScreen}
              options={{
                header: () =&gt; &lt;Header /&gt;,
                drawerLabel: () =&gt; null,
                title: undefined,
              }}
            /&gt;
          &lt;/&gt;
        )}
      &lt;/Drawer.Navigator&gt;
    &lt;/NavigationContainer&gt;
  );
  
  </code></pre>
  <p>I've tried setting the mentioned options directly on the loginStack drawer screen, like:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Drawer.Screen
    name='PublicStack'
    component={loginStack}
    options={{swipeEnabled: false, gestureEnabled: false}}} 
  /&gt;
  </code></pre>
  <p>But didn't work.</p>
  <p>I've also seen this answer (<a href="https://stackoverflow.com/questions/66150610/how-to-disable-drawer-inside-stack-navigator-nested-inside-drawer-navigator">How to disable drawer inside Stack Navigator nested inside Drawer Navigator?</a>) and tried to implement something similar (what my code looks like right now) but still didn't work.</p>
  <p>Full code can be found here: <a href="https://github.com/coccagerman/mixr" rel="nofollow noreferrer">https://github.com/coccagerman/mixr</a></p>
  <p>Thanks!</p>