Introduction
Your navigation stack is three screens deep, the back button goes to the wrong place, and the tab bar disappears. React Native navigation has a learning curve, and this is usually where it hits.
Two libraries exist for React Native navigation. Use React Navigation. The other option, React Native Navigation by Wix, uses truly native navigation controllers and is faster for complex apps -- but the setup is painful, the documentation is worse, and the community is smaller. React Navigation is JavaScript-based, well-documented, and handles 90% of apps fine. If you need the other 10%, you'll know because profiling will tell you.
Stack navigation first. Then tabs and drawers where it gets complex. Then deep linking, because nobody sets that up until production forces them to.
Setting Up React Navigation
Modular. Install the core, then only the navigator types you need. No drawer code in your bundle if you only use tabs.
# Core library and dependencies
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
# Navigator types (install the ones you need)
npm install @react-navigation/native-stack
npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer
# Drawer requires gesture handler and reanimated
npm install react-native-gesture-handler react-native-reanimatedWrap your app in NavigationContainer. Context provider, must sit at the top:
import React from'react';
import { NavigationContainer } from'@react-navigation/native';
import { SafeAreaProvider } from'react-native-safe-area-context';
import { RootNavigator } from'./navigation/RootNavigator';
export default functionApp() {
return (
<SafeAreaProvider>
<NavigationContainer>
<RootNavigator />
</NavigationContainer>
</SafeAreaProvider>
);
}SafeAreaProvider handles notch insets. Only ever have one NavigationContainer -- nest two and you get cryptic errors about missing navigation contexts. This has bitten me on a project where someone wrapped a modal in its own container.
Bare project? cd ios && pod install after installing native dependencies. On Android, a couple of lines in MainActivity for react-native-screens. Check the official docs for your React Native version since the exact setup keeps changing.
Stack Navigator: Screen-to-Screen Flow
Push on. Pop off. You know the pattern.
Two versions exist: @react-navigation/stack (JavaScript animations) and @react-navigation/native-stack (native platform animations). Use native-stack. Wraps the actual iOS UINavigationController and Android Fragment system. Smoother, less memory. The JS stack only matters if you need custom transition animations the native primitives can't handle. Rarely.
import React from'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from'react-native';
import { createNativeStackNavigator } from'@react-navigation/native-stack';
import type { NativeStackScreenProps } from'@react-navigation/native-stack';
// Define the param types for each screentype ProductStackParams = {
ProductList: undefined;
ProductDetail: { productId: string; title: string };
};
const Stack = createNativeStackNavigator<ProductStackParams>();
// Screen component: Product ListfunctionProductListScreen({
navigation,
}: NativeStackScreenProps<ProductStackParams, 'ProductList'>) {
const products = [
{ id: '1', title: 'Wireless Headphones', price: '$79.99' },
{ id: '2', title: 'Mechanical Keyboard', price: '$149.99' },
{ id: '3', title: 'USB-C Hub', price: '$49.99' },
];
return (
<FlatList
data={products}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<TouchableOpacity
style={styles.card}
onPress={() =>
navigation.navigate('ProductDetail', {
productId: item.id,
title: item.title,
})
}
>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.price}>{item.price}</Text>
</TouchableOpacity>
)}
/>
);
}
// Screen component: Product DetailfunctionProductDetailScreen({
route,
navigation,
}: NativeStackScreenProps<ProductStackParams, 'ProductDetail'>) {
const { productId, title } = route.params;
return (
<View style={styles.container}>
<Text style={styles.heading}>{title}</Text>
<Text>Product ID: {productId}</Text>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.goBack()}
>
<Text style={styles.buttonText}>Go Back</Text>
</TouchableOpacity>
</View>
);
}
// The stack navigator itselfexport functionProductStack() {
return (
<Stack.Navigator
screenOptions={{
headerStyle: { backgroundColor: '#6366f1' },
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold' },
}}
>
<Stack.Screen
name="ProductList"
component={ProductListScreen}
options={{ title: 'Our Products' }}
/>
<Stack.Screen
name="ProductDetail"
component={ProductDetailScreen}
options={({ route }) => ({
title: route.params.title,
})}
/>
</Stack.Navigator>
);
}ProductStackParams defines what each screen expects. TypeScript gives you autocompletion on navigation.navigate() and catches missing params before runtime. Worth the setup cost.
navigate() pushes. route.params receives. goBack() pops. Android hardware back button and iOS swipe-back work automatically.
The function form on the detail screen's options prop gives access to route params for dynamic header titles. screenOptions on the navigator sets defaults; per-screen options overrides.
Tab Navigator: Bottom and Top Tabs
Every app on your phone has a bottom tab bar. Users understand it without explanation. This is where React Native navigation gets complex, because tabs usually contain stack navigators, and nesting navigators is where the bugs live.
Before the code: the screenOptions function receives the current route, which lets you swap icons based on which tab is active. The tabBarBadge prop on any screen shows a notification count. And all tabs render simultaneously by default -- set lazy: true to change this, but know that it means a loading flash when users first tap an unvisited tab.
import React from'react';
import { View, Text } from'react-native';
import { createBottomTabNavigator } from'@react-navigation/bottom-tabs';
import { Ionicons } from'@expo/vector-icons';
type TabParams = {
Home: undefined;
Search: undefined;
Notifications: undefined;
Profile: undefined;
};
const Tab = createBottomTabNavigator<TabParams>();
// Placeholder screen componentsfunctionHomeScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 24 }}>Home Feed</Text>
</View>
);
}
functionSearchScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 24 }}>Search</Text>
</View>
);
}
export functionMainTabs() {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName: string;
switch (route.name) {
case'Home':
iconName = focused ? 'home' : 'home-outline';
break;
case'Search':
iconName = focused ? 'search' : 'search-outline';
break;
case'Notifications':
iconName = focused ? 'notifications' : 'notifications-outline';
break;
case'Profile':
iconName = focused ? 'person' : 'person-outline';
break;
default:
iconName = 'ellipse';
}
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: '#6366f1',
tabBarInactiveTintColor: '#9ca3af',
tabBarStyle: {
borderTopWidth: 0,
elevation: 10,
shadowOpacity: 0.1,
shadowRadius: 10,
},
headerShown: false,
})}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Search" component={SearchScreen} />
<Tab.Screen
name="Notifications"
component={HomeScreen}
options={{ tabBarBadge: 3 }}
/>
<Tab.Screen name="Profile" component={HomeScreen} />
</Tab.Navigator>
);
}When users switch tabs, state survives -- scroll position, form data, all preserved. Big UX win.
Update badge counts dynamically from anywhere using navigation.setOptions(). Top tabs? @react-navigation/material-top-tabs. Same API, renders at top with swipe-to-switch. Swap createBottomTabNavigator for createMaterialTopTabNavigator.
Drawer Navigator
Slides in from the screen edge. More top-level sections than a tab bar can hold? Drawer. Settings and secondary features tucked out of the way? Drawer. Gmail, Slack, both use it.
Requires react-native-gesture-handler and react-native-reanimated:
import React from'react';
import { View, Text, Image, StyleSheet } from'react-native';
import {
createDrawerNavigator,
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from'@react-navigation/drawer';
import { MainTabs } from'./MainTabs';
const Drawer = createDrawerNavigator();
// Custom drawer content with a user profile headerfunctionCustomDrawerContent(props: any) {
return (
<DrawerContentScrollView {...props}>
<View style={styles.profileHeader}>
<Image
source={{ uri: 'https://i.pravatar.cc/100' }}
style={styles.avatar}
/>
<Text style={styles.username}>Alex Johnson</Text>
<Text style={styles.email}>[email protected]</Text>
</View>
{/* Renders the auto-generated drawer items */}
<DrawerItemList {...props} />
{/* Custom drawer item for logout */}
<DrawerItem
label="Log Out"
onPress={() => console.log('Logging out...')}
labelStyle={{ color: '#ef4444' }}
/>
</DrawerContentScrollView>
);
}
export functionAppDrawer() {
return (
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}
screenOptions={{
drawerActiveBackgroundColor: '#eef2ff',
drawerActiveTintColor: '#6366f1',
headerShown: false,
}}
>
<Drawer.Screen name="MainTabs" component={MainTabs}
options={{ title: 'Home' }} />
<Drawer.Screen name="Settings" component={HomeScreen}
options={{ title: 'Settings' }} />
<Drawer.Screen name="Help" component={HomeScreen}
options={{ title: 'Help & Support' }} />
</Drawer.Navigator>
);
}drawerContent fully customizes the panel -- profile header above, custom "Log Out" below. DrawerItemList renders all Drawer.Screen entries automatically between them.
Swipe from the left edge or tap a hamburger. Programmatic: navigation.openDrawer(), navigation.closeDrawer(). Configurable via drawerPosition for right-side drawers.
Nesting Navigators
Nearly every production React Native app: Root Stack (auth vs. app) > Tab Navigator (main sections) > Stack Navigator per tab (detail screens). Root stack decides logged-in vs. logged-out. Tabs give instant section switching. Each tab gets its own stack so drilling into a detail view doesn't blow up the other tabs.
import React from'react';
import { createNativeStackNavigator } from'@react-navigation/native-stack';
import { createBottomTabNavigator } from'@react-navigation/bottom-tabs';
import { HomeScreen } from'../screens/HomeScreen';
import { DetailScreen } from'../screens/DetailScreen';
import { SearchScreen } from'../screens/SearchScreen';
import { ProfileScreen } from'../screens/ProfileScreen';
import { SettingsScreen } from'../screens/SettingsScreen';
// Home tab has its own stack for detail navigationconst HomeStack = createNativeStackNavigator();
functionHomeStackNavigator() {
return (
<HomeStack.Navigator>
<HomeStack.Screen
name="HomeFeed"
component={HomeScreen}
options={{ title: 'Home' }}
/>
<HomeStack.Screen
name="Detail"
component={DetailScreen}
options={{ title: 'Details' }}
/>
</HomeStack.Navigator>
);
}
// Profile tab has its own stack for settingsconst ProfileStack = createNativeStackNavigator();
functionProfileStackNavigator() {
return (
<ProfileStack.Navigator>
<ProfileStack.Screen
name="ProfileMain"
component={ProfileScreen}
options={{ title: 'My Profile' }}
/>
<ProfileStack.Screen
name="Settings"
component={SettingsScreen}
options={{ title: 'Settings' }}
/>
</ProfileStack.Navigator>
);
}
// Main tab navigator nesting the stacksconst Tab = createBottomTabNavigator();
export functionRootNavigator() {
return (
<Tab.Navigator screenOptions={{ headerShown: false }}>
<Tab.Screen name="HomeTab" component={HomeStackNavigator} />
<Tab.Screen name="SearchTab" component={SearchScreen} />
<Tab.Screen name="ProfileTab" component={ProfileStackNavigator} />
</Tab.Navigator>
);
}headerShown: false on the tab navigator. Without it, both the tab and the nested stack render separate headers. Double headers. Looks awful. Rule: only the innermost navigator shows a header.
Navigating across nesting boundaries: navigation.navigate('ProfileTab', { screen: 'Settings' }). Switches to the Profile tab, then navigates to Settings within that tab's stack. Pass params along: navigation.navigate('ProfileTab', { screen: 'Settings', params: { section: 'notifications' } }).
And a common surprise: users navigate deep into a tab, switch away, come back -- they see the detail screen, not the root. By design. Want tabs to reset on re-tap? Add a tabPress listener that resets the focused tab's state.
Authentication Flow Pattern
Conditionally render different navigation trees based on auth state. Logged out? Login screens. Logged in? Main app. No navigation.navigate('Home') after login. The entire tree swaps.
Why this matters: unauthenticated users can't reach protected screens through deep links or back-button tricks. Those screens don't exist in the tree. Gone. The transition is atomic.
import React, { createContext, useContext, useState, useEffect } from'react';
import { View, Text, TextInput, TouchableOpacity, ActivityIndicator } from'react-native';
import { createNativeStackNavigator } from'@react-navigation/native-stack';
import AsyncStorage from'@react-native-async-storage/async-storage';
import { MainTabs } from'./MainTabs';
// Auth context to share auth state across the apptype AuthContextType = {
isLoggedIn: boolean;
isLoading: boolean;
signIn: (token: string) => Promise<void>;
signOut: () => Promise<void>;
};
const AuthContext = createContext<AuthContextType>({} as AuthContextType);
export functionAuthProvider({ children }: { children: React.ReactNode }) {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [isLoading, setIsLoading] = useState(true);
// Check for existing token on app launchuseEffect(() => {
async functioncheckAuth() {
try {
const token = await AsyncStorage.getItem('userToken');
setIsLoggedIn(token !== null);
} finally {
setIsLoading(false);
}
}
checkAuth();
}, []);
const authContext: AuthContextType = {
isLoggedIn,
isLoading,
signIn: async (token) => {
await AsyncStorage.setItem('userToken', token);
setIsLoggedIn(true);
},
signOut: async () => {
await AsyncStorage.removeItem('userToken');
setIsLoggedIn(false);
},
};
return (
<AuthContext.Provider value={authContext}>
{children}
</AuthContext.Provider>
);
}
export constuseAuth = () => useContext(AuthContext);
// Login screen componentfunctionLoginScreen() {
const { signIn } = useAuth();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
consthandleLogin = async () => {
// Call your API, then store the tokenconst token = 'fake-jwt-token'; // Replace with real API callawaitsignIn(token);
// No navigation.navigate() needed!// The navigation tree swaps automatically
};
return (
<View style={{ flex: 1, padding: 20, justifyContent: 'center' }}>
<Text style={{ fontSize: 28, fontWeight: 'bold', marginBottom: 30 }}>
Welcome Back
</Text>
<TextInput placeholder="Email" value={email}
onChangeText={setEmail} autoCapitalize="none" />
<TextInput placeholder="Password" value={password}
onChangeText={setPassword} secureTextEntry />
<TouchableOpacity onPress={handleLogin}>
<Text>Sign In</Text>
</TouchableOpacity>
</View>
);
}
// Root navigator that conditionally renders auth or appconst Stack = createNativeStackNavigator();
export functionRootNavigator() {
const { isLoggedIn, isLoading } = useAuth();
if (isLoading) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" color="#6366f1" />
</View>
);
}
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
{isLoggedIn ? (
<Stack.Screen name="App" component={MainTabs} />
) : (
<Stack.Screen name="Login" component={LoginScreen} />
)}
</Stack.Navigator>
);
}Conditional rendering inside Stack.Navigator is the key. When isLoggedIn flips to true, React Navigation automatically transitions from Login to App with a smooth animation. No imperative navigate call. Navigation state driven entirely by auth state.
The isLoading check: without it, users see a flash of login before the main app. AsyncStorage takes a moment to check for an existing token. Show a spinner during that moment.
Security benefit people miss: screens that aren't rendered don't exist. Nothing to navigate to through back-button manipulation.
Deep Linking and Universal Links
Nobody sets this up until production. Then a push notification needs to open a specific screen and suddenly it's urgent.
React Navigation has built-in deep linking. The config object maps URLs to screens. Study it:
import React from'react';
import { NavigationContainer } from'@react-navigation/native';
import { SafeAreaProvider } from'react-native-safe-area-context';
import { RootNavigator } from'./navigation/RootNavigator';
import { AuthProvider } from'./navigation/AuthNavigator';
// Define the URL-to-screen mappingconst linking = {
prefixes: [
'myapp://', // Custom URL scheme'https://myapp.com', // Universal link (iOS)'https://myapp.com', // App link (Android)
],
config: {
screens: {
App: {
screens: {
HomeTab: {
screens: {
HomeFeed: 'home',
Detail: 'detail/:id',
},
},
SearchTab: 'search',
ProfileTab: {
screens: {
ProfileMain: 'profile',
Settings: 'settings',
},
},
},
},
Login: 'login',
},
},
};
export default functionApp() {
return (
<SafeAreaProvider>
<AuthProvider>
<NavigationContainer linking={linking}
fallback={<ActivityIndicator size="large" />}>
<RootNavigator />
</NavigationContainer>
</AuthProvider>
</SafeAreaProvider>
);
}Config structure mirrors navigator nesting. prefixes lists URL schemes. config.screens maps names to URL patterns. Opening myapp://detail/42 navigates to Detail inside HomeTab inside App, passing { id: '42' }.
:id in 'detail/:id' is a path parameter. Same syntax as Express. Query parameters work too: myapp://search?q=headphones passes { q: 'headphones' }.
Universal links (iOS) and app links (Android) need platform-specific setup. iOS: Associated Domains entitlement plus an apple-app-site-association file on your domain. Android: intent filters in AndroidManifest.xml plus a Digital Asset Links file. Both are tedious. Both are mandatory for production.
Deep linking interacts with auth. Someone opens myapp://detail/42 while logged out? Auth screen first. After login, React Navigation preserves the deep link and applies it once the App navigator mounts. No extra code if you're using conditional rendering.
Testing: xcrun simctl openurl on iOS simulator, adb shell am start on Android.
Practical Advice and What I Would Skip
Is React Native navigation as good as native? No. The gesture handling is slightly off. Complex shared element transitions are painful. Performance degrades with deeply nested navigators in ways that native navigation doesn't. But it's good enough for most apps, and the alternative is maintaining two native codebases. That's the actual tradeoff.
Ravi Krishnan
Ravi is a backend engineer and systems programmer with deep expertise in Rust, Go, and distributed systems. He writes about performance optimization and scalable architecture.