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

user_7399693 0
Viewed 1914

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

react-navigation-stack react-navigation-drawer react-navigation-v5 react-navigation react-native
1 Answers

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>
);
user_16650260
Related