Navigating from Tab Navigator nested inside Stack Navigator

Solution for Navigating from Tab Navigator nested inside Stack Navigator
is Given Below:

In my project, I have a Tab Navigator nested inside a Stack Navigator.

const BottomTabNavigator = () => {
const Tab = createBottomTabNavigator();
return (
    <NavigationContainer independent={true}>
    <Tab.Navigator
        screenOptions={({ route }) => ({
        tabBarIcon: ({ focused }) => {
            let iconName;

            if (route.name === "InitialScreen") {
            iconName = focused ? "desktop" : "desktopOutline";
            } else if (route.name === "Home") {
            iconName = focused ? "home" : "homeOutline";
            } else if (route.name === "User") {
            iconName = focused ? "user" : "userOutline";
            }
            return (
            <BottomIcons
                name={iconName}
                size={scale(22)}
                color={colors.mainColor}
            />
            );
        },
        })}
    >
        <Tab.Screen name="InitialScreen" component={InitialScreen} />
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="User" component={ProfileScreen} />
    </Tab.Navigator>
    </NavigationContainer>
);
};

  const stack = createStackNavigator();

  const StackScreen = () => {
      return(
          <stack.Navigator
              screenOptions={{ headerShown: false}}>
              
              <stack.Screen name="LoginScreen" component={LoginScreen} />
              <stack.Screen name="BottomTabNavigator" component={BottomTabNavigator} />
  
          </stack.Navigator>
      );
  }

While I am in the ProfileScreen of the Tab Navigator, on using navigation.navigate(‘LoginScreen’) (which is in the parent stack navigator), I am getting the following error:

Do you have a screen named 'LoginScreen'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

This is a development-only warning and won't be shown in production.
at node_modules/@react-navigation/core/src/BaseNavigationContainer.tsx:397:8 in React.useCallback$argument_0
at node_modules/@react-navigation/core/src/useNavigationHelpers.tsx:48:25 in dispatch
at node_modules/@react-navigation/core/src/useNavigationCache.tsx:79:10 in dispatch
at node_modules/@react-navigation/core/src/useNavigationCache.tsx:89:50 in acc.name
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

How do I resolve it? I am not able to navigate back to the initial screen ie the LoginScreen in the stack navigator.

You can’t navigate between the screens of separate navigation container. you need single navigation container in root.

you usually need just one navigation container wrapping your different types of navigators, as you can see next, also if you want to implement an authentication flow properly read this doc: https://reactnavigation.org/docs/auth-flow/

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';



function LoginScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Login Screen</Text>
      <Button
        title="Go to Home"
        onPress={() =>
          navigation.navigate('Home', {
           
          })
        }
      />
    </View>
  );
}


function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Login"
        onPress={() =>
          navigation.navigate('LoginScreen', {
            params: { user: 'jane' },
          })
        }
      />
    </View>
  );
}


function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
      <Button
        title="Go to Login"
        onPress={() =>
          navigation.navigate('LoginScreen', {
            params: { user: 'jane' },
          })
        }
      />
    </View>
  );
}


const BottomTabNavigator = () => {
const Tab = createBottomTabNavigator();

return (
    <Tab.Navigator
        screenOptions={({ route }) => ({
        tabBarIcon: ({ focused }) => {
            let iconName;

            if (route.name === "InitialScreen") {
            iconName = focused ? "desktop" : "desktopOutline";
            } else if (route.name === "Home") {
            iconName = focused ? "home" : "homeOutline";
            } else if (route.name === "User") {
            iconName = focused ? "user" : "userOutline";
            }
            return (
             <View/> );
        },
        })}
    >
            <Tab.Screen name="Home" component={HomeScreen} />

        <Tab.Screen name="User" component={ProfileScreen} />
    </Tab.Navigator>
);
};


  
 const Stack = createStackNavigator();

  const StackScreen = () => {
      return(

          <Stack.Navigator
              screenOptions={{ headerShown: false}}>

                             <Stack.Screen name="BottomTabNavigator" component={BottomTabNavigator} />

                             <Stack.Screen name="LoginScreen" component={LoginScreen} />
          </Stack.Navigator>
      );
  }



export default function App() {
  return (
    <NavigationContainer>
      {StackScreen()}
    </NavigationContainer>
  );
}