Ever used an app where finding your way back felt like navigating Nairobi traffic without Waze? That's bad navigation design, my friend.
Good navigation is invisible - users move through your app without thinking about it. Bad navigation is like a matatu conductor who drops you at the wrong stage and says "si uende tu uko." Not helpful.
React Navigation is the standard library for navigation in React Native. Stack navigation. Tab navigation. Drawer navigation. Deep linking. It handles all the patterns users expect in modern mobile apps without making you write your own navigation system from scratch (trust me, you don't want to do that). Good navigation is a core part of mobile app state management — where users are in your app affects what state they see.
Today we're building navigation that doesn't suck.
Setup: The Foundation
First things first, let's install what we need:
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
# For stack navigation
npm install @react-navigation/native-stack
# For tab navigation
npm install @react-navigation/bottom-tabs
# For drawer navigation
npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimatedIf you're using Expo (and honestly, you should be for most projects), half of these are already included. If you're bare React Native, you'll need to follow the platform-specific setup for react-native-gesture-handler and react-native-reanimated. Check their docs - it's like 3 extra lines in your build files.
Stack Navigation: The Foundation
Stack navigation is like stacking matatu conductors' receipts - last in, first out. You push screens onto the stack, and pop them off when you're done. This is the most fundamental navigation pattern in mobile apps.
// App.tsx
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
type RootStackParamList = {
Home: undefined;
Details: { itemId: number; title: string };
Profile: { userId: string };
};
const Stack = createNativeStackNavigator<RootStackParamList>();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerStyle: { backgroundColor: '#6200ee' },
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold' },
}}
>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Home Page' }}
/>
<Stack.Screen
name="Details"
component={DetailsScreen}
options={({ route }) => ({ title: route.params.title })}
/>
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}See that RootStackParamList type? That's TypeScript giving you superpowers. It means if you try to navigate to a screen that doesn't exist, or pass the wrong parameters, TypeScript will yell at you BEFORE you run the app. This is like having a friend who stops you from sending that drunk text at 2 AM - annoying in the moment, life-saving in the long run.
Now let's actually navigate between these screens:
import { View, Button, FlatList, TouchableOpacity, Text } from 'react-native';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;
function HomeScreen({ navigation }: Props) {
const items = [
{ id: 1, title: 'Product A' },
{ id: 2, title: 'Product B' },
{ id: 3, title: 'Product C' },
];
return (
<View style={{ flex: 1, padding: 16 }}>
<FlatList
data={items}
renderItem={({ item }) => (
<TouchableOpacity
style={{
padding: 16,
backgroundColor: '#f5f5f5',
marginBottom: 8,
borderRadius: 8,
}}
onPress={() =>
navigation.navigate('Details', {
itemId: item.id,
title: item.title
})
}
>
<Text style={{ fontSize: 18 }}>{item.title}</Text>
</TouchableOpacity>
)}
keyExtractor={item => item.id.toString()}
/>
<Button
title="Go to Profile"
onPress={() => navigation.navigate('Profile', { userId: '123' })}
/>
</View>
);
}The navigation prop gives you everything you need: navigate(), goBack(), push(), pop(), and more. And because of our type definitions, TypeScript knows exactly what parameters each screen expects.
Tab Navigation: Quick Access to Main Sections
Tabs are like switching matatu routes - quick access to your app's main sections. Most social media apps use tabs because users need constant access to feed, search, notifications, and profile.
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
type TabParamList = {
Home: undefined;
Search: undefined;
Notifications: undefined;
Profile: undefined;
};
const Tab = createBottomTabNavigator<TabParamList>();
function MainTabs() {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName: keyof typeof Ionicons.glyphMap;
if (route.name === 'Home') {
iconName = focused ? 'home' : 'home-outline';
} else if (route.name === 'Search') {
iconName = focused ? 'search' : 'search-outline';
} else if (route.name === 'Notifications') {
iconName = focused ? 'notifications' : 'notifications-outline';
} else {
iconName = focused ? 'person' : 'person-outline';
}
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: '#6200ee',
tabBarInactiveTintColor: 'gray',
})}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Search" component={SearchScreen} />
<Tab.Screen
name="Notifications"
component={NotificationsScreen}
options={{ tabBarBadge: 3 }} // That little red circle with unread count
/>
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
);
}See that tabBarBadge: 3? That's how you get those notification bubbles that make people anxious. Use responsibly.
Nested Navigation: The Real World
Here's the thing - real apps don't use just one navigator. They nest them. You've got tabs at the root level, but each tab has its own stack of screens.
Think about Instagram: you tap the home icon (tab), you see your feed (stack screen 1), you tap a post (stack screen 2), you tap the profile (stack screen 3). All within the Home tab.
// Home stack (inside Home tab)
function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Feed" component={FeedScreen} />
<Stack.Screen name="ProductDetails" component={ProductDetailsScreen} />
<Stack.Screen name="Checkout" component={CheckoutScreen} />
</Stack.Navigator>
);
}
// Profile stack (inside Profile tab)
function ProfileStack() {
return (
<Stack.Navigator>
<Stack.Screen name="ProfileMain" component={ProfileMainScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
<Stack.Screen name="EditProfile" component={EditProfileScreen} />
</Stack.Navigator>
);
}
// Main app with tabs
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="HomeTab"
component={HomeStack}
options={{ headerShown: false }} // Hide the tab's header, we have stack headers
/>
<Tab.Screen name="Search" component={SearchScreen} />
<Tab.Screen
name="ProfileTab"
component={ProfileStack}
options={{ headerShown: false }}
/>
</Tab.Navigator>
</NavigationContainer>
);
}This is where beginners get confused. But think of it like Russian dolls - small navigators inside bigger navigators. Each tab can have its own navigation flow without interfering with the others.
Authentication Flow: Conditional Navigation
You need different screens for logged-in vs logged-out users. Don't just hide UI elements - actually change the navigation structure.
import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
type AuthStackParamList = {
Login: undefined;
Register: undefined;
};
type AppStackParamList = {
Main: undefined;
Profile: undefined;
};
const AuthStack = createNativeStackNavigator<AuthStackParamList>();
const AppStack = createNativeStackNavigator<AppStackParamList>();
function App() {
const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null);
useEffect(() => {
checkLoginStatus();
}, []);
const checkLoginStatus = async () => {
const token = await AsyncStorage.getItem('auth_token');
setIsLoggedIn(!!token);
};
if (isLoggedIn === null) {
// Loading screen while checking auth
return <LoadingScreen />;
}
return (
<NavigationContainer>
{isLoggedIn ? (
<AppStack.Navigator>
<AppStack.Screen name="Main" component={MainTabs} />
<AppStack.Screen name="Profile" component={ProfileScreen} />
</AppStack.Navigator>
) : (
<AuthStack.Navigator screenOptions={{ headerShown: false }}>
<AuthStack.Screen name="Login" component={LoginScreen} />
<AuthStack.Screen name="Register" component={RegisterScreen} />
</AuthStack.Navigator>
)}
</NavigationContainer>
);
}When the user logs in, you update isLoggedIn state, and React Navigation smoothly transitions from the auth flow to the app flow. Beautiful.
Modal Screens: That Popup Vibe
Sometimes you want a screen to slide up from the bottom like a modal, instead of pushing from the right like a normal screen.
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
{/* Regular screens */}
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
{/* Modal screens - these slide up from bottom */}
<Stack.Group screenOptions={{ presentation: 'modal' }}>
<Stack.Screen name="CreatePost" component={CreatePostScreen} />
<Stack.Screen name="ImagePicker" component={ImagePickerScreen} />
</Stack.Group>
</Stack.Navigator>
</NavigationContainer>
);
}Use modals for actions that interrupt the normal flow - creating something, picking something, confirming something. Don't use them for normal navigation. Nobody wants to modal their way through your entire app.
Deep Linking: Open Specific Screens from Outside
Deep linking lets you open specific screens from external links - like tapping a notification, clicking a link in an email, or using a custom URL scheme.
const linking = {
prefixes: ['myapp://', 'https://myapp.com'],
config: {
screens: {
Home: 'home',
Details: 'product/:itemId',
Profile: 'user/:userId',
},
},
};
function App() {
return (
<NavigationContainer linking={linking}>
{/* Your navigators */}
</NavigationContainer>
);
}
// Now these work:
// myapp://product/123 → Opens Details screen with itemId: 123
// https://myapp.com/user/john → Opens Profile screen with userId: johnThis is crucial for growth. You send users a link to a specific product, they tap it, your app opens directly to that product. No friction. No "open app then navigate to..." nonsense.
Common Mistakes That Will Bite You
1. Passing Non-Serializable Data: Never pass functions, class instances, or complex objects in navigation params. State persistence and deep linking will break spectacularly.
// ❌ WRONG - This will cause weird bugs
navigation.navigate('Profile', {
onUpdate: () => refreshData() // Don't do this!
});
// ✅ RIGHT - Use state management or event listeners
// Pass simple data, trigger actions differently2. Multiple NavigationContainers: You should have exactly ONE <NavigationContainer> at the root. Nesting them causes errors and unexpected behavior. I've seen developers waste hours debugging this.
3. Ignoring the Android Back Button: React Navigation handles the hardware back button automatically. If you override it with BackHandler, make sure you return false when you're not handling it, otherwise users get stuck. This is how you end up with 1-star reviews saying "can't go back, app is broken."
4. Over-Nesting Navigators: Don't nest navigators just because you can. Each layer adds complexity and memory usage. If a stack only has one screen, it probably doesn't need to exist.
Performance Tips That Actually Matter
Use Native Stack: Always use @react-navigation/native-stack instead of the JS-based stack. It uses native platform APIs (UINavigationController on iOS, Fragment on Android) for smoother transitions and better memory usage. The difference is noticeable on older devices.
Delay Heavy Operations: Don't start heavy API calls or calculations immediately when a screen mounts - it'll make the transition animation stutter. Use InteractionManager:
import { InteractionManager } from 'react-native';
useEffect(() => {
const task = InteractionManager.runAfterInteractions(() => {
// Start heavy work AFTER the animation completes
fetchHeavyData();
});
return () => task.cancel();
}, []);Keep Params Small: Don't pass massive objects in navigation params. Pass the ID, fetch the data on the destination screen.
// ❌ BAD - Passing huge object
navigation.navigate('Details', { product: fullProductWithAllImages });
// ✅ GOOD - Just the ID
navigation.navigate('Details', { productId: '123' });The Bottom Line
React Navigation gives you everything you need to build navigation that feels native and intuitive:
- Stack navigation for hierarchical flows
- Tab navigation for quick access to main sections
- Drawer navigation for side menus
- Modal screens for temporary actions
- Deep linking for opening specific screens from outside
- Type safety so you catch navigation bugs before users do
The goal isn't to impress users with your navigation. The goal is for users to never think about navigation at all - they should just naturally flow through your app. Good navigation supports user experience design principles — clarity over cleverness, consistency everywhere, and respect for user's mental models.
When choosing between platforms, consider that mobile-first development means mastering these native navigation patterns. And if you're weighing React Native against other options, remember that Progressive Web Apps use web routing (browser history) instead — very different paradigm.
If users are getting lost, your navigation sucks. If users are complaining about the back button, your navigation sucks. If users can't find features, your navigation sucks.
But if users can move through your app without thinking? That's when you know you've nailed it.
You too, can now build navigation that doesn't require a map to understand.