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

Stack Screen + Bottom Tab Navigation + Stack Screen

Introduction

Implementation

Step 1: Installing the libraries

Step 2: Structure Project

Step 3: Configuring route files