React Navigation

React Navigation is the de facto standard routing and navigation library for React Native applications, providing a component-based API for building stack, tab, and drawer navigation patterns that feel native on iOS, Android, and web. It is organized as a monorepo of composable packages (@react-navigation/native, native-stack, bottom-tabs, drawer, stack, and more) so apps only install the navigators they actually use.

The library handles deep linking, URL-based navigation on web, state persistence, and TypeScript-typed route params out of the box, making it the default choice recommended by Expo and the wider React Native ecosystem for anything beyond a single-screen app.

What You Get

• Native-feeling stack navigation (native-stack) backed by platform APIs (UINavigationController/Fragment) for authentic transitions and performance
• Bottom tab, material top tab, and drawer navigators that compose with any stack navigator
• Deep linking and URL-based routing configuration shared between native and web builds
• Full TypeScript support with typed navigation props and route params via generics
• Static navigation API (createStaticNavigation) for declaring the entire navigation tree in one place with less boilerplate
• DevTools package for inspecting and debugging navigation state during development

Common Use Cases

• Building the primary tab-bar + stack navigation shell of a mobile app (e.g. Home/Search/Profile tabs, each pushing detail screens)
• Implementing authentication flows that swap between an auth stack and an app stack based on login state
• Supporting deep links and universal links that route directly to a specific screen and params
• Sharing a single navigation structure between a React Native app and its React Native Web build

Under The Hood

Architecture — The repo is a pnpm/lerna monorepo under packages/, with @react-navigation/core implementing the framework-agnostic navigation state machine (routers, actions, state persistence) and @react-navigation/native layering React Native-specific concerns (linking, back-button handling, container component) on top via NavigationContainer. Navigator packages (native-stack, bottom-tabs, drawer, material-top-tabs, stack) each wrap either a native platform primitive (native-stack uses react-native-screens bindings to native view controllers) or a pure-JS/Reanimated implementation (stack), all consuming the shared @react-navigation/routers package for route-state transitions. Tech Stack — Written in TypeScript (98%+ of the codebase), built with a Babel-based build pipeline via Bob/lerna, tested with Jest and React Native Testing Library, and using react-native-screens/react-native-safe-area-context as peer dependencies for native-stack. The monorepo uses pnpm workspaces and lefthook for git hooks, with an example app under example/ used for manual and Detox-driven E2E testing. Code Quality — Each package carries a src/__tests__ directory with substantial unit test coverage (e.g. native’s tests cover linking, deep-link parsing, static navigation, and hooks like useLinkBuilder); the code favors small, well-named hooks (useLinkTo, useScrollToTop, useBackButton) and platform-specific file extensions (.native.tsx) to isolate platform branching cleanly. API Design — The public API is idiomatic React (components + hooks), with NavigationContainer as the single native-specific wrapper and everything else composed declaratively; TypeScript generics for typed params add some upfront learning curve but pay off with autocomplete and compile-time route safety, and the newer static API (createStaticNavigation) further reduces boilerplate for straightforward navigation trees.