Navigate from a Bottom Tab Navigator to a Stack Navigator

Question

I am building an app with the following dependencies:

"dependencies": {
    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/compat": "^5.2.5",
    "@react-navigation/material-bottom-tabs": "^5.2.16",
    "@react-navigation/material-top-tabs": "^5.2.16",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "expo": "~38.0.8",
    "expo-status-bar": "^1.0.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-elements": "^2.0.4",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-modals": "^0.19.9",
    "react-native-reanimated": "^1.10.2",
    "react-native-screens": "^1.0.0-alpha.23",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.4.0",
    "react-navigation-stack": "^2.8.2",
    "react-navigation-tabs": "^2.9.0"
  },

Let say I have a Stack navigator and a Bottom Tab Navigator. How can I easily navigate from a screen of the bottom tab to a screen of the Stack Navigator?

I found a "solution" which is to add App in my Bottom Tab Navigator, but the problem is it's appearing in the bottom screens, while I dont want that.

Whats the best way to do this?

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer independent={true}>
      <Stack.Navigator initialRouteName="Index">
        <Stack.Screen name="MyNotes" component={MyNotes} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Signup" component={Signup} />
        <Stack.Screen name="Index" component={Index} />
        <Stack.Screen name="PasswordForgot" component={PasswordForgot} />
        <Stack.Screen name="BottomNavigation" component={BottomNavigation} />
        <Stack.Screen name="ProfileParameters" component={ProfileParameters} />
        <Stack.Screen name="MyProfile" component={MyProfile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

And a Bottom Tab Navigator:

const Tab = createBottomTabNavigator();
const tabActiveColor = "#EF2D56";
const tabInActiveColor = "#898A8D";

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator
      initialRouteName="MyNotes"
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let tabIcon = "../assets/notes.png";
          if (route.name === "MyNotes") {
            tabIcon = require("../assets/notes.png");
          } else if (route.name === "Feed") {
            tabIcon = require("../assets/feed.png");
          } else if (route.name === "Discover") {
            tabIcon = require("../assets/decouvrir.png");
          } else if (route.name === "MyProfile") {
            tabIcon = require("../assets/myprofile.png");
          }
          return (
            <Image
              source={tabIcon}
              resizeMode="contain"
              style={{
                height: 26.4,
                width: 22,
                tintColor: focused ? tabActiveColor : tabInActiveColor,
              }}
            />
          );
        },
      })}
      tabBarOptions={{
        style: { zIndex: 110 },
        safeAreaInset: { bottom: "never" },
        activeTintColor: "#000000",
      }}
    >
      <Tab.Screen
        name="MyNotes"
        component={MyNotes}
        options={{
          tabBarLabel: "Notes",
        }}
      />
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: "Feed",
        }}
      />
      <Tab.Screen
        name="Discover"
        component={Discover}
        options={{
          tabBarLabel: "Découvrir",
        }}
      />
      <Tab.Screen
        name="MyProfile"
        component={MyProfile}
        options={{
          tabBarLabel: "Profil",
        }}
      />
      <Tab.Screen name="App" component={App} />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;


const Stack = createStackNavigator();

export default function BottomNavigation() {
  return (
    <NavigationContainer independent={true}>
      <BottomTabNavigator />
    </NavigationContainer>
  );
}

Example of Navigation I want to do: Navigate from the MyProfile screen of the Bottom Tab, to the ProfileParameter screen in the stack navigator.

Answer 1

here is a demo: https://snack.expo.io/@nomi9995/1826cf

use only one NavigationContainer and make bottom tabs part of stack navigator then you can easily move from bottom tabs to stack screens

like this

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

function TestScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Test!</Text>
        </View>
    );
}

function HomeScreen(props) {
    const gotoTestStackScreen = () => {
        props.navigation.navigate('Test');
    };
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home!</Text>
            <Button title="Go to test stack screen" onPress={gotoTestStackScreen} />
        </View>
    );
}

function SettingsScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Settings!</Text>
        </View>
    );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Settings" component={SettingsScreen} />
        </Tab.Navigator>
    );
}

const Stack = createStackNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Tabs">
                <Stack.Screen name="Test" component={TestScreen} />
                <Stack.Screen name="Tabs" component={MyTabs} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}