# React Navigation — Routing and Navigation for React Native

> The standard routing library for React Native apps, providing stack, tab, and drawer navigators with deep linking, gestures, and native transitions.

## Install

Save as a script file and run:

# React Navigation — Routing and Navigation for React Native

## Quick Use
```bash
npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context
```
```jsx
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-e97ad877
Author: Script Depot