1. Introduction

Most mobile applications contain multiple screens. For example, a student management application may have:

• Home Screen

• Student List Screen

• Student Details Screen

• Profile Screen

• Settings Screen

Users need a way to move between these screens. This process is called Navigation.

React Native does not include a complete built-in navigation solution. Developers commonly use React Navigation to manage screen transitions, navigation headers, tab bars, and drawer menus.

In this tutorial, we will learn three important navigation types:

1. Stack Navigation

2. Bottom Tab Navigation

3. Drawer Navigation

We will also combine all three in a practical Student Management App.

2. What Is React Navigation?

React Navigation is a popular navigation library for React Native applications.

It helps developers:

• Move from one screen to another.

• Navigate backward to previous screens.

• Create bottom navigation tabs.

• Create side drawer menus.

• Pass information between screens.

• Organize multiple screens.

• Build nested navigation structures.

3. Understanding Stack Navigation

Stack Navigation manages screens using a Last In, First Out (LIFO) structure.

Think of a stack of books. When you place a new book on top, it becomes the first book you can remove.

The same concept applies to screen navigation.

Example flow:

Home Screen
   |
   | Open Details
   v
Details Screen
   |
   | Open Profile
   v
Profile Screen

The Profile screen is currently on top.

When the user presses Back:

Profile Screen
   |
   v
Details Screen

When the user presses Back again:

Details Screen
   |
   v
Home Screen

Important Stack Navigation Methods

1. navigation.navigate()

Opens a registered screen.

navigation.navigate('Details');

2. navigation.goBack()

Returns to the previous screen.

navigation.goBack();

3. navigation.push()

Adds another instance of a screen to the stack.

navigation.push('Details');

4. navigation.popToTop()

Returns to the first screen in the current stack.

navigation.popToTop();

Where Is Stack Navigation Used?

• Product details.

• Student details.

• Login and registration flows.

• Profile editing.

• Multi-step forms.

4. Understanding Bottom Tab Navigation

Bottom Tab Navigation displays navigation options at the bottom of the screen.

Users can switch between the main sections of an application by tapping a tab.

Example:

--------------------------------
|                              |
|        Home Screen           |
|                              |
|                              |
--------------------------------
| Home | Students | Profile    |
--------------------------------

Common tabs include:

• Home

• Search

• Students

• Notifications

• Profile

Benefits of Bottom Tab Navigation

1. Easy access to important screens.

2. Simple navigation experience.

3. Clear application structure.

4. Convenient switching between sections.

Where Is Bottom Tab Navigation Used?

• Shopping applications.

• Social media applications.

• Banking applications.

• Student management applications.

• Dashboard applications.

5. Understanding Drawer Navigation

Drawer Navigation displays a side menu that opens from the left or right side of the screen.

Users can open the drawer using a menu button or a supported swipe gesture.

Example menu:

-------------------------
| Home                  |
| Students              |
| Courses               |
| Profile               |
| Settings              |
| Logout                |
-------------------------

Benefits of Drawer Navigation

• Provides access to multiple sections.

• Keeps the main screen clean.

• Supports larger navigation menus.

• Organizes less frequently used screens.

Where Is Drawer Navigation Used?

• Admin dashboards.

• Educational applications.

• Business applications.

• Management systems.

• Applications with many sections.

6. Difference Between Stack, Tab and Drawer Navigation

Stack Navigation

• Opens screens one after another.

• Maintains navigation history.

• Provides back navigation.

• Best for detail pages and multi-step flows.

Bottom Tab Navigation

• Displays tabs at the bottom.

• Switches between main application sections.

• Provides quick access to important screens.

Drawer Navigation

• Displays a side menu.

• Organizes multiple application sections.

• Useful for applications with larger menus.

A professional application can combine all three navigation types.

7. Setting Up React Navigation

Now we will create a practical project.

Step 1: Create a New Expo Project

Open your terminal:

npx create-expo-app@latest ReactNavigationApp --template blank

Move into the project:

cd ReactNavigationApp

The blank template is used here so we can configure React Navigation directly in App.js without an existing Expo Router layout.

Step 2: Install React Navigation Packages

Run:

npm install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer

These packages provide:

• React Navigation core.

• Native Stack Navigator.

• Bottom Tab Navigator.

• Drawer Navigator.

Step 3: Install Required Expo Dependencies

Run:

npx expo install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-worklets

These packages provide the native screen, safe-area, gesture and animation support required by the navigators.

Step 4: Configure Reanimated

The Drawer Navigator depends on Reanimated.

Follow the current Reanimated installation instructions for your Expo SDK version, including its required Babel configuration.

If your project requires the Worklets Babel plugin, configure it as directed by the installed Reanimated version and restart the development server after changing Babel configuration.

8. Understanding the Project Structure

Our project will use:

ReactNavigationApp/
|
|-- App.js
|
|-- package.json
|
|-- node_modules/
|
|-- assets/

For this beginner project, we will keep the screen components and navigators inside App.js.

In larger applications, separate files and folders should be used for screens, navigators, and reusable components.

9. Practical Project: Student Management App

We will build an application with the following navigation structure:

Root Stack
   |
   |-- Main Drawer
   |      |
   |      |-- Bottom Tabs
   |      |      |
   |      |      |-- Home
   |      |      |-- Students
   |      |      |-- Profile
   |      |
   |      |-- Settings
   |
   |-- Student Details

This structure combines all three navigation types.

Step 1: Open App.js

Open the App.js file in your code editor.

Step 2: Import Required Packages

import 'react-native-gesture-handler';

import React from 'react';

import {
  View,
  Text,
  StyleSheet,
  Pressable,
  ScrollView
} from 'react-native';

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

import {
  createNativeStackNavigator
} from '@react-navigation/native-stack';

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

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

Step 3: Create Navigator Objects

const Stack = createNativeStackNavigator();

const Tab = createBottomTabNavigator();

const Drawer = createDrawerNavigator();

Each navigator manages a different navigation pattern.

Step 4: Create the Home Screen

function HomeScreen({ navigation }) {

  return (
    <ScrollView contentContainerStyle={styles.container}>

      <Text style={styles.heading}>
        Welcome to Param Classes
      </Text>

      <Text style={styles.description}>
        Student Management Dashboard
      </Text>

      <View style={styles.card}>
        <Text style={styles.cardNumber}>120</Text>
        <Text style={styles.cardLabel}>
          Total Students
        </Text>
      </View>

      <View style={styles.card}>
        <Text style={styles.cardNumber}>08</Text>
        <Text style={styles.cardLabel}>
          Available Courses
        </Text>
      </View>

      <Pressable
        style={styles.button}
        onPress={() =>
          navigation.navigate('StudentDetails', {
            name: 'Rahul Sharma',
            course: 'React Native'
          })
        }
      >
        <Text style={styles.buttonText}>
          Open Student Details
        </Text>
      </Pressable>

    </ScrollView>
  );
}

The Home Screen displays dashboard information and a button to open Student Details.

Step 5: Create the Students Screen

function StudentsScreen() {

  const students = [
    'Rahul Sharma',
    'Priya Verma',
    'Amit Kumar',
    'Neha Singh'
  ];

  return (
    <View style={styles.container}>

      <Text style={styles.heading}>
        Student List
      </Text>

      {students.map((student, index) => (
        <View key={student} style={styles.studentCard}>
          <Text style={styles.studentName}>
            {index + 1}. {student}
          </Text>
        </View>
      ))}

    </View>
  );
}

Step 6: Create the Profile Screen

function ProfileScreen() {

  return (
    <View style={styles.container}>

      <Text style={styles.heading}>
        My Profile
      </Text>

      <Text style={styles.description}>
        Student Name: Rahul Sharma
      </Text>

      <Text style={styles.description}>
        Course: React Native
      </Text>

      <Text style={styles.description}>
        Institute: Param Classes
      </Text>

    </View>
  );
}

Step 7: Create the Settings Screen

function SettingsScreen() {

  return (
    <View style={styles.container}>

      <Text style={styles.heading}>
        Settings
      </Text>

      <Text style={styles.description}>
        Application Settings
      </Text>

      <Text style={styles.description}>
        Account Preferences
      </Text>

      <Text style={styles.description}>
        Notification Settings
      </Text>

    </View>
  );
}

Step 8: Create the Student Details Screen

function StudentDetailsScreen({ route }) {

  const { name, course } = route.params;

  return (
    <View style={styles.container}>

      <Text style={styles.heading}>
        Student Details
      </Text>

      <View style={styles.card}>
        <Text style={styles.cardLabel}>
          Student Name
        </Text>

        <Text style={styles.studentName}>
          {name}
        </Text>
      </View>

      <View style={styles.card}>
        <Text style={styles.cardLabel}>
          Course
        </Text>

        <Text style={styles.studentName}>
          {course}
        </Text>
      </View>

    </View>
  );
}

The route.params object receives the data sent from the Home Screen.

Step 9: Create Bottom Tab Navigation

function MainTabs() {

  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: true,
        tabBarActiveTintColor: '#2563EB',
        tabBarInactiveTintColor: '#64748B'
      }}
    >

      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: () => <Text>????</Text>
        }}
      />

      <Tab.Screen
        name="Students"
        component={StudentsScreen}
        options={{
          tabBarIcon: () => <Text>????‍????</Text>
        }}
      />

      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          tabBarIcon: () => <Text>????</Text>
        }}
      />

    </Tab.Navigator>
  );
}

This creates three bottom tabs.

The user can switch between Home, Students, and Profile.

Step 10: Create Drawer Navigation

function MainDrawer() {

  return (
    <Drawer.Navigator
      screenOptions={{
        headerShown: false,
        drawerActiveTintColor: '#2563EB',
        drawerLabelStyle: {
          fontSize: 15
        }
      }}
    >

      <Drawer.Screen
        name="MainTabs"
        component={MainTabs}
        options={{
          title: 'Dashboard'
        }}
      />

      <Drawer.Screen
        name="Settings"
        component={SettingsScreen}
      />

    </Drawer.Navigator>
  );
}

The drawer contains the Dashboard and Settings screens.

The Dashboard opens the bottom tab navigator.

Step 11: Create Root Stack Navigation

function RootNavigator() {

  return (
    <Stack.Navigator>

      <Stack.Screen
        name="MainDrawer"
        component={MainDrawer}
        options={{
          headerShown: false
        }}
      />

      <Stack.Screen
        name="StudentDetails"
        component={StudentDetailsScreen}
        options={{
          title: 'Student Details'
        }}
      />

    </Stack.Navigator>
  );
}

The root stack manages the main application and the Student Details screen.

Step 12: Connect NavigationContainer

Add the following at the bottom of App.js:

export default function App() {

  return (
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  );
}

NavigationContainer manages the navigation state and connects all the navigators.

Step 13: Add Styles

Add these styles at the bottom of App.js:

const styles = StyleSheet.create({

  container: {
    flexGrow: 1,
    backgroundColor: '#F1F5F9',
    padding: 20,
    justifyContent: 'center'
  },

  heading: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#172554',
    marginBottom: 12
  },

  description: {
    fontSize: 16,
    color: '#64748B',
    marginBottom: 12
  },

  card: {
    backgroundColor: '#FFFFFF',
    padding: 20,
    borderRadius: 14,
    marginTop: 15,
    elevation: 2
  },

  cardNumber: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#2563EB'
  },

  cardLabel: {
    fontSize: 14,
    color: '#64748B',
    marginTop: 5
  },

  button: {
    backgroundColor: '#2563EB',
    padding: 16,
    borderRadius: 10,
    marginTop: 25,
    alignItems: 'center'
  },

  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold'
  },

  studentCard: {
    backgroundColor: '#FFFFFF',
    padding: 16,
    borderRadius: 10,
    marginTop: 12,
    elevation: 1
  },

  studentName: {
    fontSize: 17,
    fontWeight: 'bold',
    color: '#172554'
  }

});

10. Run the Application

Start the application:

npx expo start

Open it in Expo Go or an Android emulator.

Test these features:

1. Open the Home tab.

2. Tap Students to view the student list.

3. Tap Profile to view profile information.

4. Open the drawer menu and select Settings.

5. Return to Dashboard.

6. Tap Open Student Details.

7. Check that Rahul Sharma and React Native appear on the details screen.

8. Press Back to return to the previous screen.

You have now implemented Stack, Tab, and Drawer Navigation in one application.

11. Understanding Nested Navigation

Nested navigation means placing one navigator inside another navigator.

In our project:

• The Root Stack contains the Main Drawer.

• The Main Drawer contains Main Tabs.

• Main Tabs contain Home, Students, and Profile.

• The Root Stack also contains Student Details.

This structure helps organize applications with many screens.

Important: Navigation actions from nested screens can be handled by their parent navigators when the requested route is registered there.

12. Common Navigation Methods

Open a Screen

navigation.navigate('Students');

Go Back

navigation.goBack();

Pass Data

navigation.navigate('StudentDetails', {
  name: 'Rahul Sharma',
  course: 'React Native'
});

Read Passed Data

const { name, course } = route.params;

Open the Drawer

You can use the built-in drawer header menu button, or call:

navigation.openDrawer();

Close the Drawer

navigation.closeDrawer();

These methods are useful when building real-world navigation flows.

13. Common Mistakes and Solutions

Mistake 1: NavigationContainer Is Missing

React Navigation needs a NavigationContainer at the application root for this setup.

Solution: Wrap the root navigator with NavigationContainer.

Mistake 2: Screen Name Is Incorrect

If a screen is registered as StudentDetails, navigating to StudentDetail will not find the intended route.

Solution: Check screen names carefully.

Mistake 3: Required Packages Are Missing

Missing native dependencies can cause installation or runtime errors.

Solution: Install packages using the commands recommended by React Navigation and Expo.

Mistake 4: Drawer Gestures Do Not Work

The drawer depends on gesture and animation libraries.

Solution: Check Gesture Handler and Reanimated installation and configuration.

Mistake 5: Passing Data Incorrectly

If a screen expects route.params.name but the previous screen does not pass a name value, the details may be missing.

Solution: Pass the expected parameters and handle optional values when necessary.

Mistake 6: Registering a Screen in the Wrong Navigator

A nested screen may not be directly available from another navigator.

Solution: Register the screen in the correct parent navigator or navigate through the appropriate nested route.

14. Best Practices

• Use Stack Navigation for detail screens and multi-step flows.

• Use Bottom Tabs for the most important sections.

• Use Drawer Navigation for additional menu options.

• Organize large projects into separate screen and navigator files.

• Use meaningful route names.

• Pass only the data needed by the destination screen.

• Avoid unnecessary deeply nested navigators.

• Test Android back-button behavior.

• Keep navigation labels short and understandable.

• Follow the current React Navigation documentation when upgrading packages.

15. Conclusion

React Navigation is an important part of professional React Native development.

In this tutorial, we learned:

• Stack Navigation for moving between screens.

• Bottom Tab Navigation for switching between main sections.

• Drawer Navigation for side menu navigation.

• NavigationContainer for managing navigation state.

• Passing data between screens.

• Combining multiple navigators using nested navigation.

We also created a practical Student Management App using all three navigation patterns.

16. Frequently Asked Questions

Q1. What is React Navigation?

React Navigation is a library used to manage navigation and screen transitions in React Native applications.

Q2. What is Stack Navigation?

Stack Navigation manages screens in a stack, allowing users to move forward and backward between screens.

Q3. What is Bottom Tab Navigation?

It displays navigation options at the bottom of the screen for switching between main sections.

Q4. What is Drawer Navigation?

It displays a side menu that users can open to access different application sections.

Q5. What is NavigationContainer?

It is the root container that manages the navigation state for the React Navigation setup.

Q6. Can we use Stack, Tab, and Drawer Navigation together?

Yes. They can be combined using nested navigators.

Q7. How do we pass data between screens?

Use navigation.navigate() with a route name and parameter object.

Q8. What is the difference between navigate() and goBack()?

navigate() opens or focuses a route, while goBack() returns to the previous navigation state.