Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Navigate from a Bottom Tab Navigator to a Stack Navigator

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.

like image 441
Abilys38 Avatar asked Aug 12 '20 23:08

Abilys38


People also ask

How do you use the bottom tab navigator and stack Navigator?

Bottom Tab Navigation Firstly, we will set up the tab navigator and then go further to add the stack navigator inside. Create a new folder with the name Screens within our project folder. Now inside the Screens folder create three files i.e. Screen1. js, Screen2.

Can we nest a stack navigator inside a tab navigator?

Stack navigators nested inside each screen of drawer navigator - The drawer appears over the header from the stack. Stack navigators nested inside each screen of tab navigator - The tab bar is always visible. Usually pressing the tab again also pops the stack to top.


1 Answers

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

like image 55
Muhammad Numan Avatar answered Oct 01 '22 01:10

Muhammad Numan