How to Nest Multiple Navigators in React Native v.5 (Not v.4)

Question

Im new to react native. Im trying to nest multiple navigations in my App.js . I have successfully nested a StackNavigator in my BottomTabNavigation with 0 issues Im linking these navigators by setting their initial route components to equal the prior navigator. Im trying to add a DrawerNavigation in there but keep receiving an error. All my code is in 1 file (App.js). How would I approach this?

Stack Navigator

const navigator = createStackNavigator(
{
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            headerShown: false,
        },
    },
    Favs: {
        screen: CrossingScreen,
        navigationOptions: {
            title: 'News',
            headerTitleStyle: {
                color: 'white',
            },
            headerStyle: {
                backgroundColor: 'red',
            },
            headerBackTitle: null,
            headerTintColor: 'white',
        },
    },
},
{
    initialRouteName: 'Home',
    headerMode: 'screen',
})

Bottom Tab Navigator

const TabNavigator = createMaterialBottomTabNavigator(
{
    Home: {
        screen: navigator,
        navigationOptions: {
            tabBarLabel: 'Home',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <Icon
                        style={[{ color: tintColor }]}
                        size={25}
                        name={'train'}
                    />
                </View>
            ),
        },
    },
    FavScreen: {
        screen: FavScreen,
        navigationOptions: {
            tabBarLabel: 'Favorites',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <Icon
                        style={[{ color: tintColor }]}
                        size={28}
                        name={'star'}
                    />
                </View>
            ),
            activeColor: '#f60c0d',
            inactiveColor: '#f65a22',

            barStyle: { backgroundColor: '#f69b31' },
        },
    },
    MapScreen: {
        screen: MapScreen,
        navigationOptions: {
            tabBarLabel: 'Map',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <Icon
                        style={[{ color: tintColor }]}
                        size={25}
                        name={'map'}
                    />
                </View>
            ),
            activeColor: '#615af6',
            inactiveColor: '#46f6d7',
            barStyle: { backgroundColor: '#67baf6' },
        },
    },
    Cart: {
        screen: CartScreen,
        navigationOptions: {
            tabBarLabel: 'Feedback',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <Icon
                        style={[{ color: tintColor }]}
                        size={25}
                        name={'mail'}
                    />
                </View>
            ),
        },
    },
    Cart2: {
        screen: CartScreen,
        navigationOptions: {
            tabBarLabel: 'Add',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <Icon
                        style={[{ color: tintColor }]}
                        size={25}
                        name={'add'}
                    />
                </View>
            ),
        },
    },
},

{
    initialRouteName: 'Home',
    activeColor: '#f0edf6',
    inactiveColor: '#226557',
    barStyle: { backgroundColor: '#3BAD87' },
})

Drawer Navigator

const DrawerNav = createDrawerNavigator(
{
    Page1: {
        screen: TabNavigator,
    },
    Page2: {
        screen: FavScreen,
    },
    Page3: {
        screen: MapScreen,
    },
},
{
    contentComponent: SideMenu,
    drawerWidth: 300,
})

Exporting it in an app container in App.js

export default createAppContainer(DrawerNav)

**Error : **

Answer 1

I resolved my issue by carefully reading through [https://reactnavigation.org/docs/upgrading-from-4.x][1]

The Navigation API changed heavily between v4.0 and v5.0

This is how you go about nesting a StackNavigator and MaterialBottomTabNavigatior inside a Drawer Navigator

Same Implementation if your using a regular BottomTabNavigatior

const Tab = createMaterialBottomTabNavigator()
const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()

export default class App extends Component {
    //ALL NAVIGATION STACKS IN 1 CONTAINER
    render() {
        return (
            <NavigationContainer>
                <Drawer.Navigator initialRouteName="Home">
                    <Drawer.Screen name="Home" component={MyStack} />
                </Drawer.Navigator>
            </NavigationContainer>
        )
    }
}

const MyStack = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="Home"
                component={BottomNav}
                options={{
                    headerShown: false,
                }}
            />
            <Stack.Screen name="Crossing" component={CrossingScreen} />
        </Stack.Navigator>
    )
}
const BottomNav = () => {
    return (
        <Tab.Navigator initialRouteName="Home">
            <Tab.Screen
                name="Home"
                component={HomeScreen}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <View>
                            <Icon
                                style={[{ color: tintColor }]}
                                size={28}
                                name={'train'}
                            />
                        </View>
                    ),
                }}
            />
            <Tab.Screen
                name="Favorites"
                component={FavScreen}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <View>
                            <Icon
                                style={[{ color: tintColor }]}
                                size={28}
                                name={'star'}
                            />
                        </View>
                    ),
                }}
            />
            <Tab.Screen
                name="Map"
                component={MapScreen}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <View>
                            <Icon
                                style={[{ color: tintColor }]}
                                size={28}
                                name={'map'}
                            />
                        </View>
                    ),
                }}
            />
            <Tab.Screen
                name="Feedback"
                component={ContactScreen}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <View>
                            <Icon
                                style={[{ color: tintColor }]}
                                size={28}
                                name={'mail'}
                            />
                        </View>
                    ),
                }}
            />
            <Tab.Screen
                name="Add"
                component={AddScreen}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <View>
                            <Icon
                                style={[{ color: tintColor }]}
                                size={28}
                                name={'add'}
                            />
                        </View>
                    ),
                }}
            />
        </Tab.Navigator>
    )
}