Building Navigation in React Native with React Navigation

After getting comfortable with the basics of React Native and Expo, I wanted my app to feel like a real mobile app—not just a single screen. That’s when I discovered React Navigation, the go-to library for handling navigation in React Native.

Why React Navigation?

Coming from web development, I was used to react-router-dom. React Navigation gave me that same intuitive routing experience—but optimized for mobile. It supports:

• Stack-based navigation (like a browser’s back button, but for apps)
• Native gestures and animations (swipes, transitions)
• Platform-specific behaviors (e.g., iOS back swipe vs. Android’s back button)

Setting Up React Navigation with Expo

First, install the required packages in your Expo project:

npx expo install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npx expo install react-native-gesture-handler react-native-reanimated
npm install @react-navigation/native-stack

(Expo handles the native dependencies automatically—no need for pod install or Gradle changes!)

Creating a Stack Navigator
I started with a simple stack navigator (think of it like a stack of screens where the last one is visible). Here’s how I set it up in App.js:

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

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Defining Screens
Each screen is just a React component. Here’s a basic example:

HomeScreen.js

import { View, Text, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Welcome to the Home Screen!</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

DetailsScreen.js

import { View, Text } from 'react-native';

export default function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

What Felt Magical

Zero native code changes – Expo + React Navigation handled everything.

Native-like transitions – Smooth animations and gestures worked out of the box.

Familiar mental model – If you’ve used routing on the web, this feels just as intuitive.

Pro Tip: Common Gotchas

• Wrap your app in NavigationContainer (forgot this once and spent 20 minutes debugging 😅).
• Need tabs or drawers? React Navigation also has @react-navigation/bottom-tabs and @react-navigation/drawer.

Happy coding!