3

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")

CodeJoe
  • 262
  • 2
  • 10

1 Answers1

6

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>
);
satya164
  • 9,464
  • 2
  • 31
  • 42
  • You're right. Rest what is need to do is to hide Stack Header on this screen and show header on Drawer. – CodeJoe Aug 13 '21 at 18:20