Stack Screen + Bottom Tab Navigation + Stack Screen

Working with several navigations mixed together.

Introduction

In this article we will present how to work with the merging of different types of navigation. In this project we will implement the following scenario:

• User starts on a screen with stack screen navigation, goes to one with tab navigation and when clicking on any button within the tab navigation component will be moved to stack screen

Implementation

Step 1: Installing the libraries

• use the package manager of your choice

yarn add @react-navigation/native

npx expo install react-native-screens react-native-safe-area-context

yarn add @react-navigation/bottom-tabs

yarn add @react-navigation/native-stack

Step 2: Structure Project

├── src
│   ├── routes
│   │   ├── groupScreen.routes.tsx
│   │   ├── index.tsx
│   │   ├── navigation.types.ts
│   │   ├── stack.route.tsx
│   │   └── tab.route.tsx
│   └── screens
│       ├── ScreenOne
│       │   └── index.tsx
│       └── Tabs
│           ├── GroupTabs
│           │   ├── TabThree
│           │   │   └── index.tsx
│           │   └── TabTwo
│           │       └── index.tsx
│           └── TabOne
│               └── index.tsx
├── app.tsx

Step 3: Configuring route files

• Create a folder routes

Config React Navigation

• Create the route file that encompasses all the others

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import StackMainRoutes from './stack.route';

export default function Routes() {
  return (
    <NavigationContainer>
      <StackMainRoutes/>
    </NavigationContainer>
  );
}

• Go to app.tsx and place the routes component there

import React from 'react';
import Routes from './src/routes';

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

Start by creating the navigation that appears first

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import TabRoutes from "./tab.route";
import ScreenOne from "../screens/ScreenOne";

export default function StackMainRoutes(){
    const Stack = createNativeStackNavigator();

    return (
        <Stack.Navigator 
            initialRouteName="screenOne"
            screenOptions={{ 
                headerShown: false, 
                gestureEnabled: false, 
            }}
        >
            <Stack.Screen name="screenOne" component={ScreenOne}/>
            <Stack.Screen name="tabRoutes" component={TabRoutes}/>
        </Stack.Navigator>
    )
}

Create the bottom tab navigation configuration file

• With the routes file configured, you will call the tab routes navigation within StackMainRoutes
• In the tabThree screen, the tabBar will be hidden, we'll use this getFocusedRouteNameFromRoute function to apply the screen check.

import React from "react";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import TabOne from "../screens/Tabs/TabOne";
import StackGroupRoutes from "./groupScreen.routes";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";

export default function TabRoutes(){
    const Tab = createBottomTabNavigator()

    return (
        <Tab.Navigator 
        screenOptions={({ route }) => ({
            headerShown: false,
            tabBarStyle: ((route) => {
                const routeName = getFocusedRouteNameFromRoute(route) ?? '';
                if (routeName === 'tabThree') {
                  return { display: 'none' };
                }
              })(route),
            tabBarShowLabel: false
          })}
        >
            <Tab.Screen name="groupScreen" component={StackGroupRoutes} options={{ title: "Group Tab" }}/>
            <Tab.Screen name="tabOne" component={TabOne} options={{ title: "Tab One" }}/>
        </Tab.Navigator>
    )
}

Create the internal tab navigation screen group

• In this code below, the stack screen navigation of one of the navigations tabs is configured

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import TabTwo from "../screens/Tabs/GroupTabs/TabTwo";
import TabThree from "../screens/Tabs/GroupTabs/TabThree";

export default function StackGroupRoutes(){
    const Stack = createNativeStackNavigator();

    return (
        <Stack.Navigator
            initialRouteName="user"
            screenOptions={{ 
                headerShown: false, 
                gestureEnabled: false, 
            }}
        >
            <Stack.Screen name="tabTwo" component={TabTwo}/>
            <Stack.Screen name="tabThree" component={TabThree}/>
        </Stack.Navigator>
    )
}

Link GitHub Repository