Combining Stack, Tab & Drawer Navigations in React Native With React Navigation 5
Tags: reactnative, react, javascript, tutorial
Published: 2020-06-22 11:57:49

In this article, we'll be covering the different types of navigations and also how to combine them together in react-native using react-navigation 5.

### **Table Of Content**

- [Prerequisite](#prerequisite)
- [Project Setup](#react-native-setup)
- [Screens Setup](#screens-setup)
- [Installing Dependencies](#dependencies-setup)
- [Stack Navigator](#stack-navigator)
- [Tab Navigator](#tab-navigator)
- [Drawer Navigator](#drawer-navigator)
- [Conclusion](#conclusion)

### **Prerequisite** <a name="prerequisite"></a>
To be able to follow up with this article, you must have the following setup on your local environment
- [Node](https://nodejs.org) installed.

- An emulator to test the app. You can use either [Android Studio](https://developer.android.com/studio) or [Xcode](https://apps.apple.com/us/app/xcode/id497799835?mt=12).
 

### **Project Setup** <a name="react-native-setup"></a>

To set up a react-native project, you can make use of the React Native CLI or the Expo CLI.

I would be making use of the Expo CLI to set up a react-native project. To do so, run the following command on your terminal.

```
npm install -g expo-cli
```
The above command would install Expo CLI on your machine.

**Note:** You need to have [Node v12](https://nodejs.org/en/download/) installed on your machine to be able to install Expo CLI using the command line.

After the above command runs successfully, run the command below to generate/create a react-native project. 

```
expo init project-name
```

Once the above command runs successfully, open the project in your desired code editor, and run `npm start` on the terminal to start the application.

> *To set up a react-native project using the React-Native CLI, check [here](https://reactnative.dev/docs/environment-setup).*

### **React Navigation Dependencies & Setup**  <a name="dependencies-setup"></a>

The dependencies below are the core utility used by the navigators to create the navigation structure, as well as our Stack, Tab, and Drawer navigation.

In your project directory, run the command below on your terminal
```
npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer
```

These dependencies below are the dependency relied upon for gestures, animations, and transitions. Also, run the command below on your terminal to install the dependencies.

```
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
```

In the root file of our app, in this case, the **App.js** file, we would set up our react-navigation there.

```jsx
// ./App.js

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

 const App = () => {
  return <NavigationContainer>{/* Navigation here */}</NavigationContainer>;
}
export default App;
```

### **Screens setup** <a name="screens-setup"></a>

The next step would be to set up screens that would be used in our application.

I would be setting up 3 screens for the purpose of this demo, feel free to just copy them.

So I'd set them up in a screens directory. Create a **screens** directory in the root of the project and add the components below

**Home Screen**

```jsx
// ./screens/Home.js

import React from "react";
import { View, Button, Text, StyleSheet } from "react-native";

const Home = () => {
  return (
    <View style={styles.center}>
      <Text>This is the home screen</Text>
      <Button title="Go to About Screen" />
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default Home;
```

**About Screen**

```jsx
// ./screens/About.js

import React from "react";
import { View, StyleSheet, Text } from "react-native";

const About = () => {
  return (
    <View style={styles.center}>
      <Text>This is the about screen</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default About;
```

**Contact Screen**

```jsx
// ./screens/Contact.js

import React from "react";
import { View, StyleSheet, Text } from "react-native";

const Contact = () => {
  return (
    <View style={styles.center}>
      <Text>This is the contact screen</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default Contact;
```

### **Stack Navigation** <a name="stack-navigator"></a>

Stack navigation provides a way for react-native apps to transition between screens by using a stack, which means the screens are stacked on each other.

For example, if you navigate from login to signup screen, the signup screen is stacked on top of the login screen, and if you navigate back, the signup screen is then popped off the stack.

To set up the stack navigation, I'd create a **navigation** directory at the root of our project. Inside our newly created directory, I'd also create a **StackNavigator.js** file in there, and add our stack navigation setup.

**Note: You can decide to name the folders and files however you want**

```jsx
// ./navigation/StackNavigator.js

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

import Home from "../screens/Home";
import About from "../screens/About";

const Stack = createStackNavigator();

const MainStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="About" component={About} />
    </Stack.Navigator>
  );
}

export { MainStackNavigator };
```

You can also customize and style the stack navigation by adding **screenOptions** prop style, see basic example below

```jsx
// ./navigation/StackNavigator.js

const MainStackNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: "#9AC4F8",
        },
        headerTintColor: "white",
        headerBackTitle: "Back",
      }}
    >
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="About" component={About} />
    </Stack.Navigator>
  );
}
```

Back in our **App.js** file, we can import and add our newly created Stack Navigator. So our **App.js** file would look like the code below

```jsx
// ./App.js

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

import { MainStackNavigator } from "./navigation/StackNavigator";

 const App = () => {
  return (
    <NavigationContainer>
      <MainStackNavigator />
    </NavigationContainer>
  );
}
export default App
```

Now if we run the code on our emulator, We should now see our Home screen rendering on our Stack screens.

![Stack Screen](https://dev-to-uploads.s3.amazonaws.com/i/2liwouwepvavfiw5frng.png)

Remember in our **./screens/Home.js** file, we had a button that did nothing, but since we have our stack navigation setup, we can now have access to navigation prop injected by the stack navigation which can help us perform many operations, one of which is redirecting.

So navigate to **./screens/Home.js** and add the code below.

```jsx
// ./screens/Home.js

import React from "react";
import { View, Button, Text, StyleSheet } from "react-native";

const Home = ({ navigation }) => {
  return (
    <View style={styles.center}>
      <Text>This is the home screen</Text>
      <Button
        title="Go to About Screen"
        onPress={() => navigation.navigate("About")} // We added an onPress event which would navigate to the About screen
      />
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default Home;
```

In the code above, we get the navigation prop, which is an object that has a navigate function which we then call passing in the name of the screen we want to navigate to after the button is pressed.

![Stack Navigation](https://dev-to-uploads.s3.amazonaws.com/i/wyosit78pm2j99z1ijeg.gif)

And there we have it, we can now navigate between screens using our stack navigation.

### **Tab Navigation** <a name="tab-navigator"></a>

Tab navigation is a navigation that is tabbed at either the bottom or top of a screen and can be used to switch between different screens.

Tab navigation can take in either the screen as a component or a Stack as the component.

In our **StackNavigator.js** file, let's create another stack for our contact screen. So our **StackNavigator.js** will look like below

```jsx
// ./navigation/StackNavigator.js

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

import Home from "../screens/Home";
import About from "../screens/About";
import Contact from "../screens/Contact";

const Stack = createStackNavigator();

const screenOptionStyle = {
  headerStyle: {
    backgroundColor: "#9AC4F8",
  },
  headerTintColor: "white",
  headerBackTitle: "Back",
};

const MainStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="About" component={About} />
    </Stack.Navigator>
  );
}

const ContactStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="Contact" component={Contact} />
    </Stack.Navigator>
  );
}

export { MainStackNavigator, ContactStackNavigator };
```

We can then create another file **TabNavigator.js** in the **navigations** directory and add the markup for our **TabNavigator**

```jsx
// ./navigation/TabNavigator.js

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import { MainStackNavigator, ContactStackNavigator } from "./StackNavigator";

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={MainStackNavigator} />
      <Tab.Screen name="Contact" component={ContactStackNavigator} />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;
```

And then back in our **App.js** file, we can now import our newly created **TabNavigator** and use it there.

```jsx
//  ./App.js

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

import BottomTabNavigator from "./navigation/TabNavigator";

 const App = () => {
  return (
    <NavigationContainer>
      <BottomTabNavigator />
    </NavigationContainer>
  );
}
export default App
```

![Tab Navigation](https://dev-to-uploads.s3.amazonaws.com/i/9gjj54du8bm3u4xfhs20.gif)

### **Drawer Navigation** <a name="drawer-navigator"></a>

Drawer navigation is a slide-out and slide-in drawer that contains links to various screens. The Drawer navigation opens when a menu icon is clicked or when a user swipes their finger from the left or right edge of the app.

In order to create drawer navigation, we would create another file in our **navigations** directory called **DrawerNavigator.js**

In that file, we would add our drawer navigator markup

```jsx
// ./navigation/DrawerNavigator.js

import React from "react";

import { createDrawerNavigator } from "@react-navigation/drawer";

import { ContactStackNavigator } from "./StackNavigator";
import TabNavigator from "./TabNavigator";

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={TabNavigator} />
      <Drawer.Screen name="Contact" component={ContactStackNavigator} />
    </Drawer.Navigator>
  );
}

export default DrawerNavigator;
```

And then back in our **App.js** file, we can now import our newly created **DrawerNavigtor.js** file and use it as our navigator.

```jsx
// ./App.js

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

import DrawerNavigator from "./navigation/DrawerNavigator";

 const App = () => {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}
export default App;
```

![Drawer Navigation](https://dev-to-uploads.s3.amazonaws.com/i/vdqkb00amyr96ytgp5x4.gif)

There are also configuration options and header icons you can add to customize your drawer navigation. Find out more [here](https://reactnavigation.org/docs/header-buttons).

### **Conclusion** <a name="conclusion"></a>

In this article, we've been able to look at how to set up and combine the Stack, Tab, and Drawer navigation for our react-native app using react-navigation 5.

The source code used in demonstrating this article can be found [here](https://github.com/Easybuoy/react-native-navigation).


If you have any questions or feedback about this article, feel free to leave a comment.

Thanks for reading.