Search code examples
react-nativereact-navigationreact-navigation-v5react-navigation-stackreact-navigation-drawer

How to enable Drawer Navigation only on specific screen (e.g. Home Screen) [react native] [react navigation]


Use case of this problem is to have Drawer menu like "Settings" available only form "Home Screen". And at "Home screen" could be many buttons that link to other screens of Stack Navigation where Drawer is not available.

Main question is how to enable Drawer Navigation only on specific screen of Stack Navigator? On below example Drawer is available on all pages of Stack. I tried with gestureEnabled but it didn't work:

  const StackHome = () => (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Example1" component={Example1} />
      <Stack.Screen name="Example2" component={Example2} />
    </Stack.Navigator>
  );
  <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={StackHome} />
      <Drawer.Screen name="Settings" component={Settings} />
  </Drawer.Navigator>

On the other hand if I try make Drawer as one of Stack screen, then I have always the same Header bar (example "Header")


Solution

  • Put your drawer navigator inside the home screen:

    const DrawerHome = () => (
      <Drawer.Navigator screenOptions={{ headerShown: true }}>
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Settings" component={Settings} />
      </Drawer.Navigator>
    );
    
    const StackHome = () => (
      <Stack.Navigator>
        <Stack.Screen
          name="DrawerHome"
          component={DrawerHome}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Example1" component={Example1} />
        <Stack.Screen name="Example2" component={Example2} />
      </Stack.Navigator>
    );