how to handle two drawers separately in react navigation 6?

Question

I have created two Drawer Navigators

const MenuDrawerRight = createDrawerNavigator();
const MenuDrawerLeft = createDrawerNavigator();

function RightDrawerScreens() {
  return (
    <MenuDrawerRight.Navigator
      drawerContent={props => <RightDrawerContent {...props} />}
      screenOptions={{
        headerShown: false,
        drawerType: 'back',
        drawerPosition: 'right',
      }}>
      <MenuDrawerRight.Screen name="Menu" component={Menu} />
      <MenuDrawerRight.Screen name="DashBoard" component={DashBoard} />
    </MenuDrawerRight.Navigator>
  );
}

function LeftDrawerScreens() {
  return (
    <MenuDrawerLeft.Navigator
      drawerContent={props => <LeftDrawerContent {...props} />}
      screenOptions={{headerShown: false}}>
      <MenuDrawerLeft.Screen name="Menu" component={Menu} />
      <MenuDrawerLeft.Screen name="DashBoard" component={DashBoard} />
    </MenuDrawerLeft.Navigator>
  );
}

created separate components for getting drawer content.

Now how to wrap these two drawers in one navigator and how to open these drawers separately(Open one drawer on first button click and open second drawer on second button click)

please ask in comment section if you need any other details.

put one drawer inside another and try like this [here](https://stackoverflow.com/questions/59638040/multiple-drawers-in-react-navigation-5-0). — fixedDrill, Feb 24 '22 at 12:33

score 4 · Answer 1 · answered Feb 25 '22 at 07:34

I wrapped one drawer in another drawer like this

function MenuDrawerScreen() {
  return (
    <MenuDrawerRight.Navigator
      drawerContent={props => <RightDrawerContent {...props} />}
      screenOptions={{
        headerShown: false,
        drawerType: 'back',
        drawerPosition: 'right',
      }}
      initialRouteName="MenuScreen">
      <MenuDrawerRight.Screen name="MenuScreen" component={Menu} />
      <MenuDrawerRight.Screen name="DashBoard" component={DashBoard} />
      <MenuDrawerRight.Screen name="LeftDrawer" component={LeftDrawerScreens} />
      <MenuDrawerRight.Screen name="Profile" component={Profile} />
      <MenuDrawerRight.Screen name="Logout" component={Logout} />
    </MenuDrawerRight.Navigator>
  );
}

function LeftDrawerScreens() {
  return (
    <MenuDrawerLeft.Navigator
      drawerContent={props => <LeftDrawerContent {...props} />}
      screenOptions={{headerShown: false}}>
      <MenuDrawerLeft.Screen name="Menu" component={MenuDrawerScreen} />
    </MenuDrawerLeft.Navigator>
  );
}

and then used navigation.getParent().openDrawer() to open parent drawer and navigation.openDrawer() to open child drawer

how to handle two drawers separately in react navigation 6?

1 Answers1

Linked