Multiple drawers in react-navigation 5.0

Question

I wrote below code to make multiple side menus but it occurred error

Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container.

However I've tried to find the Container for multiple drawers but no luck.

What should I do?

Thanks in advance.

import React from 'react';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationNativeContainer } from '@react-navigation/native';
import { Container, Text, Button } from 'native-base';
import 'react-native-gesture-handler'

function BlankScreen({ navigation }) {
  return (
    <Text>Blank</Text>
);
}

function HomeScreen({ navigation }) {
  return (
    <Container style={{ flex: 1, flexDirection: 'column-reverse' }}>
      <Button onPress={() => navigation.navigate('Menu')}>
        <Text>Go to Menu</Text>
      </Button>
      <Button onPress={() => navigation.navigate('Favorit')}>
        <Text>Go to Favorit</Text>
      </Button>
    </Container>
);
}

function MenuScreen({ navigation }) {
  return (
    <Container style={{ flex: 1, flexDirection: 'column-reverse' }}>
      <Button onPress={() => navigation.goBack()}>
        <Text>Go back home</Text>
      </Button>
    </Container>
);
}

function FavoritScreen({ navigation }) {
  return (
    <Container style={{ flex: 1, flexDirection: 'column-inverse' }}>
      <Button onPress={() => navigation.goBack()}>
        <Text>Go back home</Text>
      </Button>
  </Container>
);
}

const DrawerL = createDrawerNavigator();
const DrawerR = createDrawerNavigator();

export default function App() {
  return (
    <Container>
      <NavigationNativeContainer>
        <DrawerL.Navigator initialRouteName="Home" drawerPosition="left">
          <DrawerL.Screen name="Home" component={HomeScreen} />
          <DrawerL.Screen name="Menu" component={MenuScreen} />
          <DrawerL.Screen name="Favorit" component={FavoritScreen} />
        </DrawerL.Navigator>
        <DrawerR.Navigator initialRouteName="Blank" drawerPosition="right">
          <DrawerR.Screen name="Blank" component={BlankScreen} />
          <DrawerR.Screen name="Menu" component={MenuScreen} />
          <DrawerR.Screen name="Favorit" component={FavoritScreen} />
        </DrawerR.Navigator>
      </NavigationNativeContainer>
    </Container>
);

Answer 1

The way you wrote it won't work, because consider this: you've 2 drawers, one has initial route as "Home", and other as "Blank". Which one should be rendered?

Here, you need to follow the same approach as React Navigation 4, put one drawer inside another:

function HomeStack() {
  return (
    <Stack.Navigator screenOptions={{ animationEnabled: false }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Menu" component={MenuScreen} />
      <Stack.Screen name="Favorit" component={FavoritScreen} />
    </Stack.Navigator>
  )
}

function RightDrawer() {
  return (
    <DrawerR.Navigator initialRouteName="Home" drawerPosition="right">
      <DrawerR.Screen name="Home" component={HomeStack} />
      <DrawerR.Screen name="Menu" component={MenuScreen} />
      <DrawerR.Screen name="Favorit" component={FavoritScreen} />
    </DrawerR.Navigator>
  )
}

function LeftDrawer() {
  return (
    <DrawerL.Navigator initialRouteName="RightDrawer" drawerPosition="left">
      <DrawerL.Screen name="RightDrawer" component={RightDrawer} />
    </DrawerL.Navigator>
  );
}

function App() {
  return (
    <NavigationNativeContainer>
      <LeftDrawer />
    </NavigationNativeContainer>
  )
}

Since your left drawer won't show the screens that you have in Stack, you will need to provide a custom component for your drawer which lists the screens: https://reactnavigation.org/docs/en/next/drawer-navigator.html#providing-a-custom-drawercontent