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>
)
}
Top comments (0)