Navigate from a Bottom Tab Navigator to a Stack Navigator - react-native

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>
);
}