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.
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