React Navigation: Stack, Tab and Drawer Navigation in same React Native Application

Navigation is very important aspect of mobile application development. React Navigation is very easy and best thing we’ll get to use for navigation in React Native. React Navigation provides different kinds of navigation that we’ll want to use in our application. It provides us with Tabs navigation (Button and Top), Drawer navigation and Stack navigation. We can use these navigation according to the necessity of our application. In this lesson we are going to build an application with all three navigators packaged in the same application. So, this article is going to be more interesting to you all folks. If you are very new to react native, you can install react native with this reference. Also, if you just need tab and stack navigator, please refer to my previous article. We are going to use expo for developing our application. Let’s go and build our app!

Install React Navigator

First and foremost, we have to install React Navigation package in our application. Moreover, we need to install other dependencies as given below.

npm install @react-navigation/native --save

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

Install Drawer Navigator

Now, we have to install each navigators separately. First we are going to install the Drawer Navigator.

npm install @react-navigation/drawer --save

Install Tab Navigator

Secondly, we are going to install the Tab Navigator. For Tabs to be on the bottom of the screen, let’s install bottom tabs:

npm install @react-navigation/bottom-tabs --save

Install Stack Navigator

Lastly, we are going to install the stack navigator.

npm install @react-navigation/stack --save

Setup for Drawer Navigator We have just completed installing the dependencies for react navigation. Now, we can move on to the implementation part of these navigators. So, we are going to implement the drawer navigation first. If you find anything confusing let me know in the comment below. Let’s make it work!

// App.js

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

function HomeScreen() {
  return (
    <View>
      <Text style={{textAlign: 'center', marginTop: 300}}>
        Home Screen
      </Text>
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button 
      onPress={() => navigation.goBack()}
      title="Go back home"
      />
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
}

After implementing this in your App.js, you can run your application using command npm start and your application should looks like the screens below:

**Drawer Navigation for Home and Notification**

Combine all three navigators

Now, we are deciding to make something great. Not only the drawer navigator, we want to integrate all three navigators together. Let me disclose the logic that how we are organizing the screens. We already have two menus in drawer. When the Home menu is tapped, let’s add TabA and TabB as tab navigators and let’s add stack navigator to the details of TabA. Puzzled? Oh come on, don’t worry! you will love the code we will make our intended application functional. So let’s make it happen now!

#App.js
// This is full code for App.js

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createStackNavigator} from '@react-navigation/stack';
import { Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

function HomeScreen() {
  return (
    <Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
     let iconName;
     if (route.name === 'TabA') {
        iconName = focused
        ? 'ios-information-circle'
        : 'ios-information-circle-outline';
      } else if (route.name === 'TabB') {
        iconName = focused
        ? 'ios-list-box'
        : 'ios-list';
      }

return <Ionicons name={iconName} size={size} color={color}     />;
        },
      })}
      tabBarOptions={{
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
      }}
    >
        <Tab.Screen name="TabA" component={TabAScreen} />
        <Tab.Screen name="TabB" component={TabBScreen} />
    </Tab.Navigator>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>No New Notifications!</Text>
      <Button 
      onPress={() => navigation.goBack()}
      title="Go back home"
      />
    </View>
  );
}

const Stack = createStackNavigator();

function TabAScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="TabA Home" component={TabADetailsScreen} />
      <Stack.Screen name="TabA Details" component={Details} />
    </Stack.Navigator>
  );
}

function TabADetailsScreen({navigation}) {
  return (
    <View style={{ flex: 1, justifyContent: 'center',  alignItems: 'center' }}>
      <Text>
        Welcome to TabA page!
      </Text>
      <Button 
      onPress={() => navigation.navigate('TabA Details')}
      title="Go to TabA Details"
      />
    </View>
  );
}

function Details() {
  return (
    <View style={{ flex: 1, justifyContent: 'center',  alignItems: 'center' }}>
      <Text>
        TabA Details here!
      </Text>
    </View>
  );
}

function TabBScreen() {
  return (
    <View>
      <Text style={{textAlign: 'center', marginTop: 300}}>
        Welcome to TabB page!
      </Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
}

Demo

npm start
Run the application using expo, if you don’t know the way see this article to learn more.

Wow! you will see these screens after running application through expo in your device.

This is all about react navigation, combining all three navigators together. With this, you are now able to make an awesome application in react native. If you have any confusions regarding anything about react navigation and it’s implementations, please let me know in the comments below. You can check my other articles and as always, stay tuned for more articles to come!