Navigate Between Two Screens in React Native

The easiest and most common way to navigate between screens in React Native is using the React Navigation library. I use it every time I get the chance.

The package is quite complex - it can do a lot and nearly perfectly emulates native navigation, in addition to working on the web. We'll just be covering the web here today.


To use React Navigation you need to install a variety of packages. This allows you to choose exactly what you need, reducing bundle size.

npm install react-navigation react-navigation-stack @react-native-community/masked-view

At the core is the react-navigation package. Next is the react-navigation-stack package, which gives us the ability to navigate from screen to screen and maintain a history (a stack of screens). @react-native-community/masked-view is simply a dependency of react-navigation-stack.

Next we have a variety of other dependencies to install. The instructions differ depending on whether you're using the React Native CLI or Expo - just choose the one that pertains to the platform you're using.

Using React Native CLI

NOTE: This assumes you're on React Native v0.60+ which has autolinking.

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

cd ios
pod install
cd ..
// android/path/to/

// Existing imports

import com.facebook.react.ReactActivityDelegate; // NEW
import com.facebook.react.ReactRootView; // NEW
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; // NEW

public class MainActivity extends ReactActivity {
  // Other code will exist in here just add the following below that (but before the final closing brace)...
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);

Using Expo

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


// App root - such as index.js or App.js

import "react-native-gesture-handler"
// index.js

import React from "react"
import "react-native-gesture-handler"
import { createAppContainer } from "react-navigation"
import { createStackNavigator } from "react-navigation-stack"

import Screen1 from "./Screen1"
import Screen2 from "./Screen2"

// Build the "stack" of screens. By default the first entry will be the first screen
const AppNavigator = createStackNavigator({
  Screen1: {
    screen: Screen1,
  Screen2: {
    screen: Screen2,

// Create a container of your screens. This allows you to combine different navigators.
const AppContainer = createAppContainer(AppNavigator)

export default () => {
  // AppContainer is simply a React Native component so you can use it like any other component.
  return <AppContainer />


When a screen is registered with React Navigation it receives a navigation prop through which you can "push" or "navigate" to other screens registered in or above the current navigator.

// Screen1.js

import React from "react"
import { View, Text, Button } from "react-native"

const Screen1 = () => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Screen 1</Text>
        title="Go to Screen 2"
        onPress={() => navigation.push("Screen2")}

export default Screen1
React Native by Example Logo

React Native by Example

Become an expert with React Native by building 10 completely unique apps. Nothing beats learning by doing.