📌 Introduction

Navigation is one of the most important parts of a mobile application. In React Native, the most popular library for navigation is React Navigation. It is powerful, flexible, and easy to use — ideal for creating stack navigation, tab navigation, drawer navigation, and nested navigation.

In this guide, you will learn:

• How to install React Navigation
• How to setup NavigationContainer
• How to create Stack Navigation
• How to create Bottom Tabs
• How to create Drawer Navigation
• How to pass data between screens
• How to use navigation hooks

📦 Install React Navigation

Install the core React Navigation library:

npm install @react-navigation/native
    

Install required dependencies:

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

If you are using React Native CLI (not Expo):

npm install react-native-screens react-native-safe-area-context
    

📚 Stack Navigation Setup

Install the stack navigator:

npm install @react-navigation/stack
    

🧩 Example 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 (
    
      
      
    
  );
}
    

📄 App.js

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

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

➡️ Navigate to another screen

navigation.navigate("Details");
    

📤 Passing Data Between Screens

Send Data:

navigation.navigate("Details", { userName: "Rahul", age: 20 });
    

Receive Data:

const { userName, age } = route.params;
    

📌 Bottom Tab Navigation

Install tab navigation:

npm install @react-navigation/bottom-tabs
    

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 (
    
      
      
    
  );
}
    

📂 Drawer Navigation

Install drawer navigator:

npm install @react-navigation/drawer
    

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

const Drawer = createDrawerNavigator();

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

🪝 Navigation Hooks

useNavigation()

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

const navigation = useNavigation();
navigation.navigate("Home");
    

useRoute()

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

const route = useRoute();
console.log(route.params);
    

🧱 Nested Navigation (Advanced)

You can combine Stack + Tabs + Drawer easily.

💡 Pro Tips

• Use headerShown: false to hide default header.
• Use tabBarIcon for custom icons.
• Use initialRouteName to set default screen.
• Always wrap navigation inside NavigationContainer.
• Use SafeAreaView for iOS UI safety.

🎉 Conclusion

React Navigation makes navigation in React Native extremely easy and powerful. With stack, tabs, drawer, and hooks — you can build any type of mobile app UI.

Now you are ready to build professional navigation systems in your React Native apps!