React-Native: Drawer Navigator on all Tabs (react-navigation v5)

Question

I want to have an App with BottomTabNavigation. Also I want to have a DrawerNavigation to be available from all Tabs.

My AppNavigator.js contains the following. I only can "access" the TabNavigator. Drawer is not accessible.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer, StackActions, StackNavigator } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer'; 

const Tabs = createBottomTabNavigator();
const TabsScreen = () => (
  <Tabs.Navigator>
    <Tabs.Screen name="Page1" component={Page1} />
    <Tabs.Screen name="Page2" component={Page2} />
    <Tabs.Screen name="Page3" component={Page3} />
    <Tabs.Screen name="Page4" component={Page4} />
  </Tabs.Navigator>
)

const Drawer = createDrawerNavigator();
const DrawerScreen = () => (
  <Drawer.Navigator>
    <Drawer.Screen name="Drawer-Item1" component={Drawer-Item1} />
    <Drawer.Screen name="Drawer-Item2" component={Drawer-Item2} />
  </Drawer.Navigator>
)

const Stack = createStackNavigator();
export default () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Tabs" component={TabsScreen} />
      <Stack.Screen name="Drawer" component={DrawerScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

If I put the DrawerScreen into the first element of TabsScreen, the DrawerNavigation only is accessible at the first Tab, but not at all other tabs. Vice Versa the same. If I put the TabsScreen into the first element of the DrawerScreen, the tabs are only accessible at the first element of the DrawerScreen.

How can I achieve to access the Drawer at all Tabs? I want to have the Tabs as my main navigation, but because there are more Menu options, I want the user to have access to the drawer from all views. Every Tab has its own screen, with own features. When I open the Drawer and access one Drawer entry, it opens another screen, wehre also is the "Main" Tab Navigation.

Any ideas? :-)

have you found any solution! I am kinda facing similar problem,. — Alauddin Ahmed, Jun 06 '20 at 22:01

score 0 · Answer 1 · answered Apr 19 '20 at 00:48

You need to define the TabNavigator as a child screen of the DrawerNavigator. That way, the drawer will be available from everywhere.

const Tabs = createBottomTabNavigator();
const TabsScreen = () => (
  <Tabs.Navigator>
    <Tabs.Screen name="Page1" component={Page1} />
    <Tabs.Screen name="Page2" component={Page2} />
    <Tabs.Screen name="Page3" component={Page3} />
    <Tabs.Screen name="Page4" component={Page4} />
  </Tabs.Navigator>
)

const Drawer = createDrawerNavigator();
const DrawerScreen = () => (
  <Drawer.Navigator>
    <Drawer.Screen name="Tabs" component={TabsScreen} />
    <Drawer.Screen name="Drawer-Item1" component={Drawer-Item1} />
    <Drawer.Screen name="Drawer-Item2" component={Drawer-Item2} />
  </Drawer.Navigator>
)

const Stack = createStackNavigator();
export default () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Drawer" component={DrawerScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

But now, if I access `Drawer-Item1`, the bottomTabs are gone, so its only available when I select the drawer item `Tabs`. The bottomTabs should be available also from the other drawer items, and also have a own screen.. — Daniel, Apr 19 '20 at 08:57
@Daniel Have you found the solution for the problem where tabs go missing if you choose any other option from side menu? — AKumar, Oct 02 '20 at 07:01
Same question from my side? Have you found or is there a solution for this? To have the bottom tab navigator on all pages selected from the drawer menu option! — rene, Apr 18 '23 at 16:50

React-Native: Drawer Navigator on all Tabs (react-navigation v5)

1 Answers1