Skip to main content
Version: 4.x

Getting started

React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution written entirely in JavaScript (so you can read and understand all of the source), on top of powerful native primitives.

Before you commit to using React Navigation for your project, you might want to read the anti-pitch — it will help you to understand the tradeoffs that we have chosen along with the areas where we consider the library to be deficient currently.

What to expect​

If you're already familiar with React Native then you'll be able to get moving with React Navigation quickly! If not, you may want to read sections 1 to 4 (inclusive) of React Native Express first, then come back here when you're done.

What follows within the Fundamentals section of this documentation is a tour of the most important aspects of React Navigation. It should cover enough for you to know how to build your typical small mobile application, and give you the background that you need to dive deeper into the more advanced parts of React Navigation.

Start from a template​

The easiest way to get running with react-navigation is to initialize a project using expo-cli. You can install this with npm i -g expo-cli.

  • If you'd like to create a managed React Native project then choose the blank template under the Managed workflow heading.
  • If you'd like a bare React Native project, then choose minimal under the Bare workflow heading.
  • In both cases you can pick the TypeScript version of the template if you prefer — React Navigation ships with TypeScript types.

Once the project is initialized, in the project directory run npx expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens, and you're ready to go! You can now continue to "Hello React Navigation" to start writing some code.

Install into an existing project​

Install the react-navigation package in your React Native project.

npm install react-navigation

React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. Don't worry too much about this for now, it'll become clear soon enough! To frontload the installation work, let's also install and configure dependencies used by most navigators, then we can move forward with starting to write some code.

The libraries we will install now are react-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context. If you already have these libraries installed and at the latest version, you are done here! Otherwise, read on.

Installing dependencies into an Expo managed project​

In your project directory, run:

npx expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

This will install versions of these libraries that are compatible.

You can now continue to "Hello React Navigation" to start writing some code.

Installing dependencies into a bare React Native project