React Navigation: Stack, Tab and Drawer Navigation in same React Native Application

[novoselovaleksandr]

I have 3 screens. I want to have on each of them Stack, Tab and Drawer Navigation.

I pass to DrawerNavigator TabNavigator and StackNavigator to it. When this happens, my Drawer navigation breaks down. In the second and third screens, I cannot go to the first screen. How can I do Stack, Tab and Drawer Navigation in all 3 screens?

javascript

// In App.js in a new project

import * as React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { Tab0Main, Tab0Details } from './screens/tab0'
import { Tab1Main, Tab1Details } from './screens/tab1'
import { Tab2Main, Tab2Details } from './screens/tab2'

const Stack = createStackNavigator()
const TabNavigator = createBottomTabNavigator()
const Drawer = createDrawerNavigator()

const Tab0Screen = () => {
  return (
    <>
      <Stack.Navigator
        screenOptions={{
          headerShown: false
        }}
        initialRouteName="TAB0_MAIN"
      >
        <Stack.Screen name="TAB0_MAIN" component={Tab0Main} />
        <Stack.Screen name="TAB0_DETAILS" component={Tab0Details} />
      </Stack.Navigator>
    </>
  )
}

const Tab1Screen = () => {
  return (
    <>
      <Stack.Navigator
        screenOptions={{
          headerShown: false
        }}
        initialRouteName="TAB1_MAIN"
      >
        <Stack.Screen name="TAB1_MAIN" component={Tab1Main} />
        <Stack.Screen name="TAB1_DETAILS" component={Tab1Details} />
      </Stack.Navigator>
    </>
  )
}

const Tab2Screen = () => {
  return (
    <>
      <Stack.Navigator
        screenOptions={{
          headerShown: false
        }}
        initialRouteName="TAB2_MAIN"
      >
        <Stack.Screen name="TAB2_MAIN" component={Tab2Main} />
        <Stack.Screen name="TAB2_DETAILS" component={Tab2Details} />
      </Stack.Navigator>
    </>
  )
}

const Tab = () => {
  return (
    <>
      <TabNavigator.Navigator
        initialRouteName="TAB0_MAIN"
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName
            if (route.name === 'STARGATE') {
              iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline'
            } else if (route.name === 'BATMAN') {
              iconName = focused ? 'ios-list-box' : 'ios-list'
            } else if (route.name === 'SPIDERMAN') {
              iconName = focused ? 'ios-list-box' : 'ios-list'
            }
            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />
          }
        })}
      >
        <TabNavigator.Screen name="STARGATE" component={Tab0Screen} />
        <TabNavigator.Screen name="BATMAN" component={Tab1Screen} />
        <TabNavigator.Screen name="SPIDERMAN" component={Tab2Screen} />
      </TabNavigator.Navigator>
    </>
  )
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="TAB0_MAIN">
        <Drawer.Screen name="STARGATE" component={Tab} />
        <Drawer.Screen name="BATMAN" component={Tab1Main} />
        <Drawer.Screen name="SPIDERMAN" component={Tab2Main} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
}

export default App

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/native

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. This helps us prioritize fixing bugs in the library. Seems you have a usage question or an issue unrelated to this library. Please ask the question on StackOverflow instead using the react-navigation label. You can also chat with other community members on Reactiflux Discord server in the #react-navigation channel.

If you believe that this is actually a bug in the library, please open a new issue and fill the issue template with relevant information.