javascriptreactjsreact-nativereact-navigationreact-native-ios

React-Native DrawerNavigator Menu on both sides


I have a react native app with a DrawerNavigator. For the menu I have my own component. That works great. Now I want to add a second side menu on the right side. Is it possible to have two DrawerNavigator like in the Slack App? This solution is not working for me: https://snack.expo.io/ry7lYempe because I don't want to have a TabController as parent. Both Drawer should be accessible in all screens.

My code looks like this:

import React from 'react'
import reducer from './src/reducers'
import { DrawerNavigator } from 'react-navigation';
import SidebarMenu from './src/components/layout/SidebarMenu'

import { createStore } from 'redux';
import { Provider } from 'react-redux';

let store = createStore(reducer);

import News from './src/screens/News'
import HowTo from './src/screens/HowTo'


export default class MyApp extends React.Component {

    render() {

        return (
            <Provider store={store}>
                <MainNavigator />
            </Provider>
        );
    }
}

const MainNavigator = DrawerNavigator(
    {
        News: {
            path: '/news',
            screen: News
        },
        HowTo: {
            path: '/howto',
            screen: HowTo
        }
    },
    {
        initialRouteName: 'News',
        drawerPosition: 'left',
        contentComponent: SidebarMenu
    }
);

Solved after updating react-navigation to the newest version.


Solution

  • you can add any drawer you want, take a look at this exemple https://snack.expo.io/BJoChzewM

    In your case, you may add your "MainNavigator" in another DrawerNavigator Component. don't forget to set drawerOpenRoute/drawerCloseRoute to prevent any side effects.