React Navigation Setup
Learn to set up React Navigation library and configure the basic navigation structure for React Native applications
45 min•By Priygop Team•Last updated: Feb 2026
Installing React Navigation
React Navigation is the most popular navigation library for React Native. Install it using npm: `npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer`
Required Dependencies
- @react-navigation/native - Core navigation library
- @react-navigation/stack - Stack navigator
- @react-navigation/bottom-tabs - Tab navigator
- @react-navigation/drawer - Drawer navigator
- react-native-screens - Native screen optimization
- react-native-safe-area-context - Safe area handling
- react-native-gesture-handler - Gesture handling
Basic Setup
Wrap your app with NavigationContainer and create your first navigator. The NavigationContainer manages the navigation state and provides navigation context to all child components.
Basic Navigation Setup
Example
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View, Text, StyleSheet } from 'react-native';
// Create stack navigator
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
// Screen components
const HomeScreen = ({ navigation }) => (
<View style={styles.container}>
<Text style={styles.title}>Home Screen</Text>
<Text style={styles.subtitle}>Welcome to React Navigation!</Text>
</View>
);
const ProfileScreen = ({ navigation }) => (
<View style={styles.container}>
<Text style={styles.title}>Profile Screen</Text>
<Text style={styles.subtitle}>User profile information</Text>
</View>
);
const SettingsScreen = ({ navigation }) => (
<View style={styles.container}>
<Text style={styles.title}>Settings Screen</Text>
<Text style={styles.subtitle}>App settings and preferences</Text>
</View>
);
// Tab Navigator
const TabNavigator = () => (
<Tab.Navigator
screenOptions={{
tabBarActiveTintColor: '#2196F3',
tabBarInactiveTintColor: 'gray',
}}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Home' }}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{ title: 'Profile' }}
/>
<Tab.Screen
name="Settings"
component={SettingsScreen}
options={{ title: 'Settings' }}
/>
</Tab.Navigator>
);
// Main App with Stack Navigator
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#2196F3',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
>
<Stack.Screen
name="Main"
component={TabNavigator}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: '#f5f5f5',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 10,
color: '#333',
},
subtitle: {
fontSize: 16,
color: '#666',
textAlign: 'center',
},
});
export default App;