Navigate to Screen which are not inside BottomTabNavigator React Native-CodePudding

I have developed a bottomTabNavigator in react-native and I have 3 main routes which I want to show in my bottomtabnavigator which are 1) Home, 2) Profile, 3) Chat, So I wrote the following code:

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const Navigation = () => {

  return (
    <>
      <Tab.Navigator>
        {user.authLoadingState ? (
          <Tab.Screen name="Home" component={LoadingScreen} />
        ) : user.isLoggedIn ? (
          <>
            <Tab.Screen
              name="Home"
              component={HomeScreen}
            />
            <Tab.Screen
              name="Profile"
              component={ProfileScreen}
            />
            <Tab.Screen
              name="Chat"
              component={ChatScreen}
            />
            <Stack.Screen name="Update" component={UpdateScreen} /> // this is the screen I don't want in my bottomTab but I want to navigate to it using useNavigation hook.
          </>
        ) : (
          <>
            <Stack.Screen name="First" component={FirstScreen} />
            <Stack.Screen name="SignIn" component={SignInScreen} />
            <Stack.Screen name="SignUp" component={RegisterScreen} />
          </>
        )}
      </Tab.Navigator>
    </>
  );
};

Now, when I go to my Profile screen, I have a button which (should) navigate to another screen which is not mentioned in my Tab Navigator definition, how can I navigate to that screen because obviously I do not want to fill my bottomTabNavigator with different screens, I only want to keep the main screens in my bottomTabNavigator not all. When I was using Stack.Navigator alone, it was fine because I could just keep all my screens under <Stack.Navigator></Stack.Navigator> and navigate to any screen using navigator.navigate(nameOfScreen) with const navigator = useNavigation(). But now, if a screen which is not mentioned inside Tab.Navigator will throw an error if I navigate saying Screen does not exists. Is there any thing I could do to make it work?

CodePudding user response：

to navigate between tab and stack screen you can do this way :

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

export default function App() {

    return (
      <NavigationContainer>
        <Tab.Navigator>
            <Tab.Screen
              name="Home"
              component={HomeScreen}
            />
            <Tab.Screen name="Profile Screen" component={StackScreens} />
            <Tab.Screen
              name="Chat"
              component={ChatScreen}
            />

        </Tab.Navigator>
      </NavigationContainer>
    )

  function StackScreens() {
    return (
      <Stack.Navigator screenOptions={{ headerShown: false }} >
            <Stack.Screen name="Profile" component={ProfileScreen} />
            <Stack.Screen name="Update" component={UpdateScreen} /> // this is the screen I don't want in my bottomTab but I want to navigate to it using useNavigation hook.
      </Stack.Navigator>
    );
  }

}

I'm not sure if it is exactly that you want, but you can now access from "Profile" to the "UpdateScreen" without showing it in the bottomTabNavigator