Combine Bottom Tab Navigator with Stack Navigator in React Native 2021

Image Source: https://jorgeschulz.wordpress.com/2015/02/10/reverence-and-intimacy/

Since React Navigation 5 is released, all of the configurations happens inside a component and are dynamic. This has led to significant changes in the way we used to assign navigation within our app.

Implementing Stack Navigator within the Tab Navigator felt like a hurdle in the new React Navigation 5. After a lot of research and going through their docs I finally managed to get it working.

I am going to walk you through the implementation in the simplest way such that it won't act as a roadblock for you anymore. So follow along with me and let's get started.

Video tutorial for this article

Initialize the project

Lets quickly initialize the react-native application. We will name our project as tab_stack.

react-native init tab_stack
cd tab_stack

Install required dependencies

Install the below-mentioned dependencies required to run react-navigation. These include the @react-navigation/stack and @react-navigation/bottom-tabs along with other dependencies.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/native @react-navigation/bottom-tabs @react-navigation/stack

Bottom Tab Navigation

Firstly, we will set up the tab navigator and then go further to add the stack navigator inside.

App with Bottom Tab Navigation only

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.js, and Screen3.js.

// Screen1.js
import React from ‘react'                                       import { StyleSheet, Text, View } from ‘react-native’              const Screen1 = () => {                                                        return (                                                                          <View style={styles.screen}>                                                        <Text style={styles.text}>I am screen1</Text>                               </View>                                                                     )}
export default Screen1
const styles = StyleSheet.create({                                      screen:{                                                                     flex:1,                                                         display:’flex’,                                           justifyContent:’center’,                                  alignItems:’center’,                                backgroundColor:’#00000025',                                                  },
text:{                                                          color:’#000',                                                  fontWeight:’700',                                                  fontSize:30                                                                  }                                                                   })

Above is the code for Screen1.js. We have created a basic screen that renders the screen name.

Do the same thing for Screen2.js and Screen3.js by replacing the name of the function and inside the <Text> component.

Now we are ready to collect all the screens and assign them to the bottom tab navigator. Navigate to the App.js file and replace the default boilerplate code from the one provided below.

In-Line 10 and 12 we import NavigationContainer and createBottomTabNavigator.

Line 18, We create an object Tab of createBottomTabNavigator.

Each of the <Tab.Screen> serves as a child component of the <Tab.Navigator>. The Tab.Screen consumes the component required to be rendered on each tab at the bottom. Therefore we pass our screens inside the components.

Now that we have successfully added Bottom Tab Navigator now we will move forward to insert the Stack Navigator functionality.

Integrating Stack Navigation

At the end of this part, we will achieve our goals, so let’s finish it with glory. Now create a new screen NestedScreen.js inside the screens folder.

NestedScreen.js will be the screen that will be pushed into the stack within the screens of the tab navigator.

There is a route parameter “msg” that is passed in from the previous screen. This is done here to explain to you in a better way how each stack is working separately within the tabs.

Now create a component named CustomNavigation.js within the root of our project folder. This will be responsible for exporting us Stack Navigator wrapped within a component.

We have created 3 different stacks to provide each of our tabs with one each. Now we need to modify our App.js to include the newly created components exported from CustomNavigation.js.

And that’s it. We have successfully combined the Bottom Tab Navigator and Stack Navigator in React-Navigation.

Combined Stack Navigator and Tab Navigator

Now you can go further and start tweaking the code to achieve further goals without worrying about navigation issues anymore. Here is the GitHub link for the project.

Hope you liked this article and was helpful for you. This is my first article, I will keep on bringing such content to you. Make sure to follow me.