Search code examples
react-nativereact-navigationreact-native-drawer

2 DrawerNavigators on page


I created two basic DrawerNavigators. One is for the left side, and the other is for the right side of the top bar:

const LeftDrawer = DrawerNavigator({

    MenuScreen: { screen: MenuScreen }
}, getDrawerConfig(300, 'left', 'MainScreen'));


export default LeftDrawer;


const RightDrawer = DrawerNavigator({

    AccountScreen: { screen: AccountScreen }
}, getDrawerConfig(300, 'right', 'MainScreen'));


export default RightDrawer;

Is it possible to use both drawers inside the MainScreen view? Thanks!


Solution

  • Using one DrawerNavigator as the main navigator and nesting the other DrawerNavigator inside the first one should do.

    const MainDrawer = DrawerNavigator({
        OtherDrawer: DrawerNavigator({
            AccountScreen: { screen: AccountScreen }
        }, getDrawerConfig(300, 'right', 'MainScreen')),
        MenuScreen: { screen: MenuScreen }
    }, getDrawerConfig(300, 'left', 'MainScreen'));
    
    export default MainDrawer;