Skip to content
useffect.sh
Book 30 min with a senior
UI

React Navigation

The standard navigation library for React Native: stack, tabs, drawer, with native screens through react-native-screens.

Definition

React Navigation is the most widely used navigation library in the React Native ecosystem, a community project that lives outside React Native core. It provides navigators (native stack, JavaScript stack, bottom tabs, drawer) that handle transitions between screens, history, headers, and the tab bar. The native-stack navigator relies on react-native-screens to use each platform’s real UINavigationController and Fragment, with the system’s gestures and animations. Version 7 offers a static API (object-based configuration, with TypeScript types and deep linking inferred automatically) next to the historical component-based dynamic API. React Navigation replaces the pure-JavaScript solutions of early React Native and was the base of Expo Router up to SDK 55; since SDK 56 Expo Router ships its own fork of those APIs. You meet it in any React Native project without Expo Router, and in most tutorials and library READMEs that mention navigation.

In a real app

A correct install has @react-navigation/native, one or more navigators, and the two dependencies nearly all of them require: react-native-screens and react-native-safe-area-context. On Expo, npx expo install picks the versions compatible with the SDK. On Android, the docs call for a MainActivity change to avoid crashes when view state is not persisted across Activity recreation.

The choice of stack navigator matters. @react-navigation/native-stack gives you the system’s transitions, back gesture, and header; @react-navigation/stack is JavaScript, more customizable, heavier, depends on Gesture Handler, and animates with the Animated API. A project mixing both for historical reasons pays twice. Another frequent pitfall: screens remounting because component receives an inline arrow function or because the navigator is recreated on every parent render.

Deep linking is configured in linking (prefixes, config) and has to be tested on both platforms, app closed and app open, because getInitialURL and the url event follow two different paths. For a new Expo project I recommend Expo Router, which derives that configuration from the file tree; for an existing React Navigation project that works, migrating brings little as long as the navigation structure is stable.

Sources

All 35 glossary terms

One of these is blocking your app?

30 minutes with a senior to look at the problem in your code. Free.