Setup React Navigation

Before we can navigate between screens we need to set up a project and install the React Navigation packages. We'll use Expo for this course — it handles the native build configuration so we can focus on navigation.

Creating an Expo Project

If you're starting fresh, create a new Expo project:

npx create-expo-app@latest ReactNavCourse
cd ReactNavCourse

This gives you a working React Native app with TypeScript configured out of the box.

Installing React Navigation

React Navigation is split into several packages. Start with the core:

npx expo install @react-navigation/native react-native-screens react-native-safe-area-context

This installs three things:

@react-navigation/native — the core library that all navigators build on. It provides NavigationContainer, the context providers, and the hooks you'll use throughout the course.
react-native-screens — enables native navigation views on both platforms. On iOS it uses UINavigationController, on Android it uses Fragment. This means screens that aren't visible get detached from the view hierarchy, reducing memory usage.
react-native-safe-area-context — handles safe area insets (notches, status bars, home indicators) so navigation headers and tab bars render in the right place on every device.

Installing Navigators

Each navigator type is its own package. Install the ones we'll use in this course:

npx expo install @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer

The drawer navigator also needs gesture and animation libraries:

npx expo install react-native-gesture-handler react-native-reanimated

Here's what each navigator package does:

@react-navigation/native-stack — the recommended stack navigator for v7. It uses native platform APIs for transitions, making it faster and more memory-efficient than the JavaScript-based @react-navigation/stack.
@react-navigation/bottom-tabs — a tab bar at the bottom of the screen with configurable icons and badges.
@react-navigation/drawer — a slide-out drawer panel, typically from the left edge.

Wrapping Your App

Every React Navigation app needs a NavigationContainer at the root. Open App.tsx (or your root component) and wrap your app:

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

export default function App() {
  return (
    <NavigationContainer>
      {/* navigators go here */}
    </NavigationContainer>
  );
}

NavigationContainer manages the navigation state tree and connects to platform APIs like the back button on Android and deep linking. You only need one in your app, and it goes at the very top.

Verifying the Setup

Run the app to make sure everything installed correctly:

npx expo start

You should see your app launch without errors. The screen will be blank since we haven't added any navigators yet — that's expected. In the next lesson we'll create a Stack navigator with two screens and learn how to navigate between them.