📌 Introduction

In mobile apps, navigation is one of the most essential components. React Native developers use React Navigation because it provides a flexible, powerful, and simple way to implement navigation structures like:

• 📚 Stack Navigation (Screen to Screen)
• 📁 Tab Navigation (Bottom Tabs like Instagram)
• 📂 Drawer Navigation (Side Menu like Gmail)

In this guide, we will understand each type of navigation with installation steps, file structure, and real examples.

📦 Installing Dependencies

Install the main React Navigation library:

npm install @react-navigation/native
    

Install additional required libraries:

npx expo install react-native-screens react-native-safe-area-context
    

📚 Stack Navigation

Stack Navigation works like a real stack (LIFO). Example: Instagram → Home → Post → Comments → Back to Home.

📥 Install Stack Navigator

npm install @react-navigation/stack
    

📂 File Structure

navigation/
   StackNavigator.js
screens/
   HomeScreen.js
   DetailsScreen.js
App.js
    

📄 StackNavigator.js

import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import DetailsScreen from '../screens/DetailsScreen';

const Stack = createStackNavigator();

export default function StackNavigator() {
  return (
    
      
      
    
  );
}
    

➡️ Navigate Between Screens

navigation.navigate("Details");
    

📤 Passing Data

navigation.navigate("Details", { id: 101 });
    

📥 Receiving Data

const { id } = route.params;
    

📁 Tab Navigation (Bottom Tabs)

Tab Navigation is used for building a Bottom Navigation Bar like Instagram, Facebook, YouTube etc.

📥 Install Tab Navigator

npm install @react-navigation/bottom-tabs
    

📄 TabNavigator.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';

const Tab = createBottomTabNavigator();

export default function TabNavigator() {
  return (
    
      
      
    
  );
}
    

✨ Features

• Custom icons
• Active/Inactive colors
• Teal themed bottom bar
• Nested Stack inside Tab

📂 Drawer Navigation (Side Menu)

Drawer navigation slides from the left or right side, similar to the Gmail mobile app.

📥 Install Drawer Navigator

npm install @react-navigation/drawer
    

📄 DrawerNavigator.js

import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from '../screens/HomeScreen';
import SettingsScreen from '../screens/SettingsScreen';

const Drawer = createDrawerNavigator();

export default function DrawerNavigator() {
  return (
    
      
      
    
  );
}
    

✨ Drawer Features

• Custom Drawer Design
• User Profile Header
• Dark/Teal theme support
• Nested navigation structure

🧱 Nested Navigation (Stack + Tabs + Drawer)

A real-world mobile app uses a combination of all three navigators.

This nesting structure allows you to create large apps with complex navigation easily.

📊 Comparison Table

💡 Pro Tips for Students

• Use Stack for login → home → details flow.
• Use Tabs for Home, Explore, Profile sections.
• Use Drawer when you need a large menu with many pages.
• Combine all three for professional level apps.
• Use icons to enhance Tab & Drawer UI.

🎉 Conclusion

Stack, Tab and Drawer navigators together form the backbone of React Native app structure. Once you understand them, building large applications becomes very easy.

You are now ready to build modern, multi-screen mobile apps with React Navigation!