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.

Installation

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/MainActivity.java

// 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)...
  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      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

Configuration

// 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 />
}

Usage

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>
      <Button
        title="Go to Screen 2"
        onPress={() => navigation.push("Screen2")}
      />
    </View>
  )
}

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.

Learn More