Combining Stack, Drawer and Tab Navigator

Question

I am having trouble realising the following:

I want a Tab Navigation with two Tabs: Home and Map. In the Home Tab I want a Drawer Navigation. Within the Drawer Navigation I want to be able to Navigate to the screens Profile and About. When clicking the Back Button from Profile or About, I want to come back to the open Drawer Menu.

Currently I have this:

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

import DrawerContent from './DrawerContent';
import Mapp from './Mapp';
import Home from './Home';
import Profile from './Profile';
import About from './About';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

const HomeStackNavigator = () => {
    return <Stack.Navigator>
        <Stack.Screen
            name='Tab'
            component={TabNavigator} />
        <Stack.Screen
            name='Profile'
            component={Profile} />
        <Stack.Screen
            name='About'
            component={About} />
    </Stack.Navigator>
}

const TabNavigator = () => {
    return <Tab.Navigator>
        <Tab.Screen name='Home' component={Home} />
        <Tab.Screen name='Map' component={Mapp} />
    </Tab.Navigator>
}

const DrawerNavigator = () => {
    return <Drawer.Navigator
        drawerContent={props => DrawerContent(props)}>
        <Drawer.Screen name='Home' component={HomeStackNavigator} />
    </Drawer.Navigator>
}

const Navigation = () => {
    return <NavigationContainer>
        <DrawerNavigator />
    </NavigationContainer >
}

and <DrawerContent /> looks like this

import React from 'react';
import {
    DrawerContentScrollView,
    DrawerItemList,
    DrawerItem,
} from '@react-navigation/drawer';

const DrawerContent = props => {
    return <DrawerContentScrollView {...props}>
        <DrawerItemList {...props} />
        <DrawerItem label='Profile' onPress={() => props.navigation.navigate('Profile')} />
        <DrawerItem label='About' onPress={() => props.navigation.navigate('About')} />

    </DrawerContentScrollView>
}

export default DrawerContent;

This gives me

The Tab Navigation (why is there a header with title Tab, I don't want this, but I must set name prop in <HomeStackNavigator />).

Then I can open the Drawer (works as expected)

When I click on i.e. Profile I am only able to go back to Tab. Why not to Drawer?

What also drives me nuts is, that I cannot remove the Home Menu Item in the Drawer.

Answer 1

The drawer doesn't open in that scenario, you will need to open it yourself:

const HomeStackNavigator = () => {
    return <Stack.Navigator>
        <Stack.Screen
            name='Tab'
            component={TabNavigator} />
        <Stack.Screen
            name='Profile'
            component={Profile} 
            options={({ navigation }) => ({
               title: '',
              headerLeft: () => (
              <Button
                title="<"
                onPress={() => {
                  navigation.goBack();
                  navigation.openDrawer();
              }}
            />
          ),
        })}/>
        <Stack.Screen
            name='About'
            component={About} />
    </Stack.Navigator>
}

Here's a working Snack.