# React Navigation: routing for React Native and web apps

> React Navigation is the long-standing navigation library for React Native, and the main branch now carries version 8. Here is what the monorepo ships, how to install a navigator, and where the design costs show up.

**react-navigation/react-navigation** — Routing and navigation for React Native and Web apps

- Repository: https://github.com/react-navigation/react-navigation
- Website: https://reactnavigation.org
- Stars: 24,511 · Forks: 5,137
- Language: TypeScript
- License: not declared
- Published: 2026-09-21 · Updated: 2026-09-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/react-navigation-react-navigation

## How the packages fit together

React Native gives you views, not screens. There is no built-in notion of a stack you can push onto, a tab bar that swaps content, or a URL that maps to a particular screen, so every app either writes that layer or installs one. React Navigation is that layer. The repository describes itself as routing and navigation for React Native apps, and the package list shows the shape of the offer: a core, a set of routers, and separate navigators for stacks, bottom tabs, drawers and material top tabs.

The audience is React Native developers, but not only them. The example directory contains index.html, vite.config.mjs and a web folder alongside App.tsx, so the same navigation code is exercised in a browser during development. Teams that keep one codebase for iOS, Android and web get one routing model instead of three.

The library is split into scoped packages rather than one bundle. That matters more than it sounds. Installing @react-navigation/native alone gives you no navigator; you add the navigator package you actually use, plus whatever native dependencies that navigator requires. The README's version table lists twelve packages, including @react-navigation/elements for shared UI pieces and @react-navigation/devtools for debugging.

## Installing React Navigation and building a first stack

The architecture visible in the repository is a monorepo with a packages directory, one folder per published package, managed through pnpm workspaces and lerna. Navigation state lives in @react-navigation/core; @react-navigation/routers holds the logic that turns actions such as navigate or push into a new state tree. The navigator packages are the view layer that renders that state.

That separation explains a behaviour many people find surprising. Navigating is not imperative screen swapping. You dispatch an action, a router computes the next state, and the navigator re-renders. This is why the same navigation code can run on native and on web, and why @react-navigation/devtools can inspect the state tree without touching native code.

The distinction between the stack packages is the clearest example of the split. @react-navigation/native-stack renders screens using the platform's own navigation primitives, while @react-navigation/stack renders a JavaScript-driven stack. The repository keeps them as separate packages, so the choice is explicit rather than hidden behind a flag.

Versioning is per package, not per project. The recent releases list shows @react-navigation/stack@8.0.0-alpha.56, react-native-tab-view@5.0.0-alpha.16 and react-native-drawer-layout@5.0.0-alpha.19, all published on the same day. The README states that the main branch contains the code for the upcoming major version, and points readers to the 7.x branch for the latest stable release. If you install from the default branch's published tags today, you are installing alpha artefacts.

## Where React Navigation costs you

The README does not contain a getting-started tutorial; it directs readers to reactnavigation.org for documentation. What the repository does document is how to install a forked package from GitHub, because the monorepo layout prevents installing a package directly from the repository URL. That is done with gitpkg:

```bash
pnpm add --global gitpkg
```

After forking and cloning, the README's steps are to run pnpm install, make and commit changes, then build with pnpm lerna run prepack. You then cd into the package directory you want, for example packages/stack for @react-navigation/stack, and run gitpkg publish. The terminal prints a line of the form Package uploaded to git@github.com:<user>/<repo>.git with the name <name>, and the package is installed with pnpm add <user>/<repo>.git#<name>.

For normal use, install the scoped packages from the registry instead. A native stack app needs the native package plus the navigator:

```bash
pnpm add @react-navigation/native @react-navigation/native-stack
```

The example app in the repository is a workspace member, so it is run through the root scripts rather than a standalone install. The root package.json defines an example script that filters to @react-navigation/example:

```bash
pnpm example start
```

Note the engine constraint in the root package.json: node >= 24.13.0, with pnpm@11.13.1 as the declared package manager. That is the toolchain for working on the repository itself. It is not stated as a requirement for consuming the published packages.

## React Navigation compared with Expo Router

The first cost is dependency assembly. Because navigators are separate packages with native peers, the install is never one command. The README's version table tells you which packages exist but not which native modules each one needs; that lives in the documentation site, not in the repository. Teams that expect a single install and a working tab bar will be surprised.

The second cost is the release line. The README is explicit that the main branch is the upcoming major version, and the release feed shows alpha tags. Anyone reading the repository as their source of truth could install an alpha without realising it. The stable path is the 7.x branch, which the README links alongside 6.x, 5.x and the rest. That is a documentation gap rather than a bug: the README describes the branch, but a reader who lands on the repository page sees version 8 first.

The third cost is a mismatch risk. React Navigation sits on top of React Native's own primitives, so a React Native upgrade can move the ground under a navigator. The repository pins @react-native/babel-preset to 0.85.3 in devDependencies, which is a development detail, not a promise about which React Native versions the published packages support. Peer dependency ranges are the thing to check, and the README does not list them.

Where it is the wrong tool: if your app is a small number of screens with no shared navigation state, a router you already have may be enough, and adding a navigation library adds a state machine you now have to reason about. Likewise, if you need a navigation model that also owns deep linking, file-based routes and build configuration in one place, React Navigation deliberately does not do that. It gives you the routing primitives; the rest is yours.

## Maintenance, licensing and upgrade cost

Expo Router is the comparison people reach for, and the difference is structural. React Navigation is a library you compose: you declare navigators in code, wire them into your app, and decide how screens map to routes. Expo Router takes a file-system approach, where the files in your project directory define the routes, and it is built on top of React Navigation's primitives rather than replacing them.

That means the choice is not which navigation engine to run. It is whether you want routes expressed as files or as components. File-based routing gives you conventions and less wiring; component-based routing gives you control over the tree and lets you place navigators wherever the app needs them. React Navigation is also usable without Expo, which matters for teams on the React Native CLI.

The repository itself does not argue the case. There is no comparison page in the README, and the example app is an Expo project (app.json, metro.config.js, gesture-handler.native.tsx) used to exercise the packages. The comparison is worth making because the search questions show people asking it, but the answer depends on your build setup, not on a feature list in this repository.

## Which navigator should I install first?

The last push to the repository was on 2026-09-20, and the most recent releases were published on 2026-09-19, so the project is being worked on now. The version table in the README lists packages back to 1.x, and the branches for 2.x through 7.x are still linked, which tells you the project carries multiple major lines at once rather than forcing every user onto the newest one.

Licensing is stated in two places. The README badge links to the MIT licence, and the root package.json has "license": "MIT". The repository metadata supplied here does not carry a licence field, so the package manifest and README are the sources to trust. MIT is permissive: it allows commercial use and modification, and it requires that the copyright notice and permission notice be preserved. That is a description of the terms, not legal advice; if your organisation has rules about attribution, read the licence text itself.

Upgrade cost is the part worth budgeting for. Major versions are branched, not patched in place, so moving from 6.x to 7.x to 8.x means reading the release notes for each line and checking that your navigator packages move together. The packages version independently, as the release list shows, so a stack upgrade and a tab view upgrade are separate decisions. The repository provides a versions script (node scripts/dependency-versions.mjs) and a build pipeline through lerna, which is how the maintainers keep those versions aligned; consumers get no equivalent tooling from this repository.

## Conclusion

Adopt React Navigation when you need a navigator that is wired into React Native's own primitives and you are willing to install the peer dependencies each navigator needs. Do not adopt it if you want one framework to own routing, bundling and native builds, or if you need a stable release line today: the main branch is React Navigation 8 and its published artefacts are alpha versions. Verify first that your React Native version satisfies the peer dependencies of the navigator you pick, and read the 7.x branch if you need the latest stable code.

## FAQ

### What is React Navigation used for?

It provides routing and navigation for React Native and web apps. The repository ships separate navigator packages for stacks, bottom tabs, drawers and material top tabs, built on a shared core and router layer.

### How do I install React Navigation?

Install the scoped packages from the registry, for example @react-navigation/native together with the navigator you need such as @react-navigation/native-stack. The README does not include a getting-started guide and points to reactnavigation.org for documentation.

### How do I install React Navigation native stack?

The native stack is a separate package, @react-navigation/native-stack, listed in the README's package table. It is installed alongside @react-navigation/native rather than as part of it, and the README does not list the native peer dependencies it requires.

### How do I install React Navigation bottom tabs?

Bottom tabs come from @react-navigation/bottom-tabs, one of the packages in the README's version table. As with the other navigators, it is a separate install from @react-navigation/native.

### How do I install React Navigation drawer?

The drawer navigator is published as @react-navigation/drawer, with react-native-drawer-layout listed separately in the README's version table. Neither is bundled with @react-navigation/native.

### Which is better, Expo Router or React Navigation?

The repository does not compare them. React Navigation is a library you compose in code, while Expo Router is file-based and built on React Navigation's primitives, so the choice is between routes expressed as components and routes expressed as files.

## Sources

- [Issues](https://github.com/react-navigation/react-navigation/issues)
- [Project website](https://reactnavigation.org)
- [react-navigation/react-navigation on GitHub](https://github.com/react-navigation/react-navigation)
- [README](https://github.com/react-navigation/react-navigation/blob/main/README.md)
- [Releases](https://github.com/react-navigation/react-navigation/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/react-navigation-react-navigation
