Editor’s note: This React Native navigation tutorial was last updated in January 2021 to include information about the most recent stable React Navigation release, React Navigation 5.0.
Mobile apps are made up of multiple screens. When building mobile apps, of primary concern is how to handle a user’s navigation through the app — e.g., the presentation of the screens and the transitions between them.
React Navigation is one of the most well-known navigation libraries available for React. In this tutorial, we’ll go through the basics of React Native navigation, show you how to get started using React Navigation in a React Native app, and walk through some React Native navigation examples.
We’ll cover the following:
- What is React Navigation?
- React Navigation 5.0
- What is React Native Navigation?
- Installing React Navigation
- The React Native stack navigator
- React Native navigation examples
What is React Navigation?
React Navigation is a standalone library that enables you to implement navigation functionality in a React Native application.
React Navigation is written in JavaScript and does not directly use the native navigation APIs on iOS and Android. Rather, it recreates some subset of those APIs. This allows for integration of third-party JS plugins, maximum customization, and easier debugging, with no need to learn Objective-C, Swift, Java, Kotlin, etc.
React Navigation 5.0
The most stable version of React Navigation at the time of writing is React Navigation 5.0, released in February 2020. According to the React Navigation blog, the latest release aimed to make the core React Navigation library and API more dynamic.
Key changes and new features included in React Navigation 5.0 include:
- Dynamic, component-based configuration
- New hooks for common use cases, including
useNavigation
,useRoute
, anduseNavigationState
- A new
setOptions
method that makes configuring screen navigation options more intuitive - Revamped theme system for easier customization
- First-class autocompletion and type-checking with TypeScript
- Redux DevTools integration
- Native stack navigator that uses native navigation primitives for navigation using
react-native-screens
- New backends for Material top tab navigator based on
react-native-viewpager
andScrollView
What is React Native Navigation?
React Native Navigation is a popular alternative to React Navigation. It’s a module that is dependent on and designed to be used with React Native. React Native Navigation differs slightly in that it directly uses native navigation APIs on iOS and Android, which allows for a more native look and feel.
For a more detailed exploration of the differences between React Navigation and React Native Navigation, check out “React Navigation vs. React Native Navigation: Which is right for you?”
Installing React Navigation
Assuming you have Yarn installed, the first step is to set up a React Native app. The easiest way to get started with React Native is with Expo tools because they allow you to start a project without installing and configuring Xcode or Android Studio.
Install Expo by running this:
npm install -g expo-cli
If you encounter any error on Mac, try running it this way:
sudo npm install --unsafe-perm -g expo-cli
Then run the following to create a new React Native project:
expo init ReactNavigationDemo
This will kickstart some downloads and ask you to enter some configuration variables. Select expo-template-blank
and choose yarn
for the dependency installation, as shown below:
Next, cd into the project folder and open your code editor:
cd ReactNavigationDemo
If you are using VS Code, you can open the current folder in the editor using:
code .
Start the app with:
yarn start
The next step is to install the react-navigation
library in your React Native project:
yarn add react-navigation
The React Native stack navigator
React Navigation is built with JavaScript and lets you create components and navigation patterns that look and feel like truly native ones.
React Navigation uses what’s called a stack navigator to manage the navigation history and presentation of the appropriate screen based on the route taken by a user inside the app. Only one screen is presented to a user at a given time.
Imagine a stack of paper; navigating to a new screen places it on top of the stack, and navigating back removes it from the stack. The stack navigator also provides the transitions and gestures that feel like those of native iOS and Android. Note that an app can have more than one stack navigator.
React Native navigation examples
In this section, we’ll explore some examples of React Native navigation patterns and how to achieve them using the React Navigation library.
1. Using stack navigator to navigate between screen components
Let’s begin by first creating a /components
folder in the root of our project. Then we create two files namely Homescreen.js
and Aboutscreen
.
// Homescreen.js import React, { Component } from 'react'; import { Button, View, Text } from 'react-native'; import { createStackNavigator, createAppContainer } from 'react-navigation'; export default class Homescreen extends Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to About" onPress={() => this.props.navigation.navigate('About')} /> </View> ) } }
Note the onPress
prop of the button above — we’ll explain what it does later.
// Aboutscreen.js import React, { Component } from 'react'; import { Button, View, Text } from 'react-native'; import { createStackNavigator, createAppContainer } from 'react-navigation'; export default class Aboutscreen extends Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>About Screen</Text> </View> ) } }
Your project folder should look like what’s shown in the image below:
Let’s also make some changes to App.js
. We’ll import what we need from react-navigation
and implement our navigation there.
It is useful to implement our navigation in the root App.js
file because the component exported from App.js
is the entry point (or root component) for a React Native app, and every other component is a descendant.
As you will see, we will encapsulate every other component inside the navigation functions.
// App.js import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { createStackNavigator, createAppContainer } from "react-navigation"; import HomeScreen from './components/HomeScreen'; import AboutScreen from './components/AboutScreen'; export default class App extends React.Component { render() { return <AppContainer />; } } const AppNavigator = createStackNavigator({ Home: { screen: HomeScreen }, About: { screen: AboutScreen } }); const AppContainer = createAppContainer(AppNavigator); const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
In the code above, createStackNavigator
provides a way for our app to transition between screens, where each new screen is placed on top of a stack. It is configured to have the familiar iOS and Android look and feel: new screens slide in from the right on iOS and fade in from the bottom on Android.
We pass in a route configuration object to the createStackNavigator
function. The Home
route corresponds to the HomeScreen
, and the About
route corresponds to AboutScreen
.
Note that an optional, more concise way of writing the route configuration is the { screen: HomeScreen }
configuration format.
Also, we can optionally add another options object, as specified by the API. If we wanted to indicate which is the initial route, we can add a separate object:
const AppNavigator = createStackNavigator({ Home: { screen: HomeScreen }, About: { screen: AboutScreen } },{ initialRouteName: "Home" });
Note that the Home
and About
route name-value pairs are enclosed by an overall route object. The options object isn’t enclosed but is a separate object.
The createStackNavigator
function passes behind the scenes, a navigate prop to the HomeScreen
and AboutScreen
components. The navigate prop allows for navigation to a specified screen component. This is why we are able to use it on a button at HomeScreen.js
, which, when pressed, leads to the AboutScreen
page, as shown below.
<Button title="Go to About" onPress={() => this.props.navigation.navigate('About')} />
In the App.js
code, we finally created an app container using const AppContainer = createAppContainer(AppNavigator);
. This container manages navigation state.
To run the app, you’ll need to download the Expo client app. You can get the iOS and Android versions. Make sure your command line is pointed to the project folder and run the following command.
npm start
You should see a QR code displayed on the terminal. Scan the QR code with the Expo app on Android, and for the iOS app, you can scan using the normal iPhone camera, which will prompt you with a command to click to open the Expo app.
2. Using tab navigation
Most mobile apps have more than one screen. A common style of navigation in such mobile apps is tab-based navigation. Here we will focus on how to implement tab navigation using createBottomTabNavigator
.
Let’s add another screen in our app by creating a ContactScreen.js
file under /components
.
import React, { Component } from 'react' export default class ContactScreen extends Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Contact Screen</Text> </View> ) } }
Now let’s add to the imports at the top of our App.js
file:
import ContactScreen from './components/ContactScreen';
Recall that it is useful to implement our navigation in the root App.js
component. Therefore, we will implement our tab navigation by importing createBottomTabNavigator
in App.js
. Let’s replace createStackNavigator
:
import { createBottomTabNavigator, createAppContainer } from "react-navigation";
Also replace createStackNavigator
with createBottomTabNavigator
in the AppNavigator
object:
const AppNavigator = createBottomTabNavigator({ Home: { screen: HomeScreen }, About: { screen: AboutScreen } }, { initialRouteName: "Home" });
Add the new screen to the navigator
object:
const AppNavigator = createBottomTabNavigator({ Home: { screen: HomeScreen }, About: { screen: AboutScreen }, Contact: { screen: ContactScreen } }, { initialRouteName: "Home" });
If you run the app with npm start
and open it on your Expo client, you should see the bottom nav implemented.
3. Using drawer navigation
To immediately begin implementing drawer navigation, replace createBottomTabNavigator
in the code with createDrawerNavigator
.
Let’s start at the import statements:
import { createDrawerNavigator, createAppContainer } from "react-navigation";
Let’s also update the AppNavigator
variable:
const AppNavigator = createDrawerNavigator({ Home: { screen: HomeScreen }, About: { screen: AboutScreen }, Contact: { screen: ContactScreen } }, { initialRouteName: "Home" });
If you npm start
, you should be able to see the changes right away. Swipe from the left to see the drawer navigation.
You can customize your drawer navigation by adding icons beside the route names. In the assets folder of this project, there are currently three icons:
We can customize by adding navigationOptions
to the following screen component files:
// in HomeScreen.js import React, { Component } from 'react'; import { Button, View, Text, Image, StyleSheet } from 'react-native'; import { createStackNavigator, createAppContainer } from 'react-navigation'; export default class HomeScreen extends Component { static navigationOptions = { drawerLabel: 'Home', drawerIcon: ({ tintColor }) => ( <Image source={require('../assets/home-icon.png')} style={[styles.icon, { tintColor: tintColor }]} /> ), }; render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to About" onPress={() => this.props.navigation.navigate('About')} /> </View> ) } } const styles = StyleSheet.create({ icon: { width: 24, height: 24, } });
// in AboutScreen.js import React, { Component } from 'react'; import { Button, View, Text, Image, StyleSheet } from 'react-native'; import { createStackNavigator, createAppContainer } from 'react-navigation'; export default class AboutScreen extends Component { static navigationOptions = { drawerLabel: 'About', drawerIcon: ({ tintColor }) => ( ), }; render() { return ( About Screen ) } } const styles = StyleSheet.create({ icon: { width: 24, height: 24, } });
// in ContactScreen.js import React, { Component } from 'react'; import { Button, View, Text, Image, StyleSheet } from 'react-native'; export default class ContactScreen extends Component { static navigationOptions = { drawerLabel: 'Contact', drawerIcon: ({ tintColor }) => ( ), }; render() { return ( Contact Screen ) } } const styles = StyleSheet.create({ icon: { width: 24, height: 24, } });
The tintColor
prop lets you apply any color based on active or inactive states of navigation tabs and labels. For example, we can change the active state color for our nav drawer labels. Go to the AppNavigator
variable and add to the options object:
const AppNavigator = createDrawerNavigator({ Home: { screen: HomeScreen }, About: { screen: AboutScreen }, Contact: { screen: ContactScreen } }, { initialRouteName: "Home", contentOptions: { activeTintColor: '#e91e63' } });
This results in a change of color:
Passing parameters to screens in React Navigation
There are two simple steps to pass params to routes:
- Pass params to a route by putting them in an object as a second parameter to the
navigation.navigate
function:this.props.navigation.navigate('RouteName', { /* params go here */ })
- Read the params in your screen component:
this.props.navigation.getParam(paramName, defaultValue)
Conclusion
I hope that this article will jumpstart your use of the React Navigation package in your existing or future React Native projects.
There’s a lot more that can be done, and React Navigation will meet most of your needs.
To learn more, check out the React Navigation documentation and feel free to grab the final code from my GitHub repo.
LogRocket: Instantly recreate issues in your React Native apps.

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.
i have tried many time Using stack navigator to navigate between screen components but this is not working.
Hello Rama, I’m sorry about that. Can you share a snippet of your code at emmayusufu [at] gmail.com ? It works for me.
Hello m y friend, thanks for you explain, but i can run my project with expo and react navigation. But i want to run react navigation without expo and can’t, i have followed the indicates of the main page react native https://reactnavigation.org/docs/en/getting-started.html but dont work for me. Do you something about this ? is compatible react native with react navigation without expo ?
Thank in advance.
Regards
Juan.
Hi Juan, react-native apps can be routed with react navigation without expo. Maybe a more clearer description of the error you are facing will really aid in fixing the error
Thanks for you answer, i think i didnt explain you well,
I Proceed to explain you. how you know, there are two forms of work with react navigation, one it normal form(react-native init [Name o aplication]) and the another form is using EXPO(expo init [name of project])
My purpose is use the react navigation libary but happens that I can use react navigation with expo very well, but when i try use the react navigation with the normal form i have trouble. I followed the steps of the official page (https://reactnavigation.org/docs/en/getting-started.html) without succes.
The error that i have are:
PS E:\AplicacionesReact\easyReactNavigation> react-native run-android
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
– react-native-gesture-handler (to unlink run: “react-native unlink react-native-gesture-handler”)
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via “react-native unlink ” and it will be included in your app automatically. If a library isn’t compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Running jetifier to migrate libraries to AndroidX. You can disable it using “–no-jetifier” flag.
Jetifier found 913 file(s) to forward-jetify. Using 8 workers…
info Starting JS server…
info Installing the app…
Starting a Gradle Daemon, 3 stopped Daemons could not be reused, use –status for details
> Task :app:transformNativeLibsWithMergeJniLibsForDebug FAILED
Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use ‘–warning-mode all’ to show the individual deprecation warnings.
See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warnings
42 actionable tasks: 2 executed, 40 up-to-date
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ‘:app:transformNativeLibsWithMergeJniLibsForDebug’.
> Could not read path ‘E:\AplicacionesReact\easyReactNavigation\android\app\build\intermediates\transforms\mergeJniLibs\debug\0\lib\armeabi-v7a’.
* Try:
Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output. Run with –scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 26s
error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with –verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ‘:app:transformNativeLibsWithMergeJniLibsForDebug’.
> Could not read path ‘E:\AplicacionesReact\easyReactNavigation\android\app\build\intermediates\transforms\mergeJniLibs\debug\0\lib\armeabi-v7a’.
* Try:
Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output. Run with –scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 26s
at checkExecSyncError (child_process.js:623:11)
at execFileSync (child_process.js:641:15)
at runOnAllDevices (E:\AplicacionesReact\easyReactNavigation\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)
at buildAndRun (E:\AplicacionesReact\easyReactNavigation\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:158:41)
at E:\AplicacionesReact\easyReactNavigation\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:125:12
at processTicksAndRejections (internal/process/task_queues.js:85:5)
at async Command.handleAction (E:\AplicacionesReact\easyReactNavigation\node_modules\react-native\node_modules\@react-native-community\cli\build\index.js:164:9)
PS E:\AplicacionesReact\easyReactNavigation>
Please help me.
Advance in thanks.
Juan.
hi, i need help with integrating screens. i tried so many things and my header is missing. i really hope you can help. thanks.
Hello,
Emmanuel Yusufu
Very Good Article,
Actually I am using React Native 0.58 and when I’m trying to switch between 2 pages but i am unable to see the switching button on the next page. So can you help me with this ??
Emmanuel it’s a great Post. So thanks for sharing.
So simple. And clear. Thanks for sharing. The best way to explain with simple example.
hi, i need help with integrating screens. i tried so many things and my header is missing. i really hope you can help. thanks.
Hey , Thanks for sharing this valuable blog with us , its really helpful
Thank you for such an awesome blog post – really works wonders and knowledgeable for ReactJ
Thanks this is very amazing post keep it up
Thanks for sharing such an informatic article on react navigation. It is very helpful for all level of react developers.
Very Good
Thanks this is very amazing post keep it up
Hi – Amazing article – Can you help with bing deindexing from bing search result
Thanks for the valuable information, I have successfully created navigation
Nice example, I love it
Wonderful post on your blog. It’s really helpful. Thanks for sharing.
As more and more beginners choosing react native for various app development it is very useful post for react native developers.
this tutorial is very helpful to understand navigation completely
Emmanuel it’s a great Post. So thanks for sharing….