React Navigation — Routing and Navigation for React Native

Introduction

React Navigation is the most widely adopted routing solution for React Native applications. It provides a JavaScript-based navigation system with native-feeling transitions on both iOS and Android. The library supports stack, tab, drawer, and custom navigators, along with deep linking and state persistence.

What React Navigation Does

• Manages navigation state and screen transitions in React Native apps
• Provides stack, bottom tab, material top tab, and drawer navigators
• Supports deep linking with URL-based routing
• Handles native gestures like swipe-to-go-back on iOS
• Integrates with TypeScript for type-safe route params

Architecture Overview

React Navigation uses a tree of navigator components that each manage their own state. The NavigationContainer at the root holds the global navigation state and links it to the platform. Each navigator (Stack, Tab, Drawer) renders its screens as React components and manages transitions through a shared navigation context. Screen options, headers, and animations are configured declaratively via props or the options callback.

Self-Hosting & Configuration

• Install the core package and the navigator you need (native-stack, bottom-tabs, drawer)
• Wrap your app in <NavigationContainer> as the root provider
• Install peer dependencies: react-native-screens, react-native-safe-area-context
• Configure deep linking via the linking prop on NavigationContainer
• Persist navigation state across restarts with onStateChange and initialState

Key Features

• Native stack transitions powered by react-native-screens for smooth performance
• Type-safe navigation with full TypeScript route/param inference
• URL-based deep linking and web integration
• Customizable headers, tab bars, and drawer menus
• State persistence and reset for development and production

Comparison with Similar Tools

• Expo Router — file-based routing built on top of React Navigation, adds convention over configuration
• React Native Navigation (Wix) — fully native navigation, better performance for complex stacks but harder to customize
• React Router Native — web-style routing for RN, smaller community for native use
• Solito — cross-platform navigation for Next.js + React Native, wraps React Navigation

FAQ

Q: Does it work with Expo? A: Yes, React Navigation is the recommended navigation library for Expo projects.

Q: How do I pass parameters between screens? A: Use navigation.navigate('Details', { itemId: 42 }) and access them via route.params.itemId.

Q: Can I customize the header bar? A: Yes, use screenOptions or the options prop on individual screens to set title, styles, and custom header components.

Q: How do I handle authentication flows? A: Use conditional rendering inside the navigator: show auth screens when not logged in, and main screens when authenticated.

Sources

• https://github.com/react-navigation/react-navigation
• https://reactnavigation.org