React Navigation – Stack, Drawer & Bottom Tab Navigators (React Native)

Navigating between different screens in a React Native app is a fundamental aspect of providing a seamless user experience. React Navigation is the most popular library used for handling navigation in React Native apps. It offers a variety of navigators, including the Stack Navigator, Drawer Navigator, and Bottom Tabs Navigator. In this blog, we’ll explore these three types of navigators in detail and learn how to implement them effectively.

To get started, you’ll need to install the required packages:

npm install @react-navigation/native @react-navigation/native-stack @react-navigation/drawer @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context

Additionally, you’ll need to install the following dependencies for handling gestures:

npm install react-native-gesture-handler react-native-reanimated

check reanimated set up on official website https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/

Once the installation is complete, wrap your app in the NavigationContainer:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* Navigators go here */}
    </NavigationContainer>
  );
}

Stack Navigator – React Native

What is a Stack Navigator?

The Stack Navigator is one of the most commonly used navigators in React Navigation. It allows you to transition between screens in a stack format, where each new screen is placed on top of the previous one. This is similar to how web pages work with the browser’s back button.

Setting Up a Stack Navigator

To set up a Stack Navigator, you need to import and use the createNativeStackNavigator function:

import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

Customizing the Stack Navigator

The Stack Navigator is highly customizable. You can modify the header’s appearance, transition animations, and more:

<Stack.Navigator
  screenOptions={{
    headerStyle: { backgroundColor: '#f4511e' },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold' },
  }}
>
  <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Overview' }} />
  <Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>

Drawer Navigator -React Native

What is a Drawer Navigator?

The Drawer Navigator provides a side menu, typically sliding in from the left, that allows users to navigate to different sections of the app. It’s often used in conjunction with other navigators to create a more layered navigation experience.

Setting Up a Drawer Navigator

To set up a Drawer Navigator, use the createDrawerNavigator function:

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

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
  );
}

Customizing the Drawer Navigator

The Drawer Navigator can be customized in terms of its appearance, position, and content:

<Drawer.Navigator
  drawerStyle={{
    backgroundColor: '#c6cbef',
    width: 240,
  }}
  screenOptions={{
    headerShown: false,
  }}
>
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="Profile" component={ProfileScreen} />
</Drawer.Navigator>

Bottom Tabs Navigator – React Native

What is a Bottom Tabs Navigator?

The Bottom Tabs Navigator displays a tab bar at the bottom of the screen, allowing users to switch between different screens. It’s a common choice for apps with multiple sections of content.

Setting Up a Bottom Tabs Navigator

To set up a Bottom Tabs Navigator, use the createBottomTabNavigator function:

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

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Customizing the Bottom Tabs Navigator

You can customize the tab bar’s icons, labels, and appearance:

import { Ionicons } from '@expo/vector-icons';

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ focused, color, size }) => {
      let iconName;

      if (route.name === 'Home') {
        iconName = focused ? 'home' : 'home-outline';
      } else if (route.name === 'Settings') {
        iconName = focused ? 'settings' : 'settings-outline';
      }

      return <Ionicons name={iconName} size={size} color={color} />;
    },
    tabBarActiveTintColor: 'tomato',
    tabBarInactiveTintColor: 'gray',
  })}
>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

Combining Navigators

You can combine Stack, Drawer, and Bottom Tabs Navigators to create a more complex navigation structure. For instance, you can use a Drawer Navigator as the main navigator and place a Stack Navigator inside one of its screens, or you can use a Stack Navigator with a Bottom Tabs Navigator inside one of its screens.

function RootNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={MyTabs} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
  );
}

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}