These instructions are a condensed version of a screencast on how to move from one screen to another in React Native. We'll use the React Navigation library to add a stack and inside list some routes to various screens of your app.

Introduction

Once your app gets to a certain size, you're going to want different screens--a login screen, a home screen, maybe a list of records and a detail screen for each record. If you were making a website, you'd just add an HTML page for each screen and a link that you click on to go from one to the next. It's not quite as simple for mobile apps, but a third-party library called React Navigation makes things fairly easy.

One of the nice things this library gives you out of the box are some of the navigation transitions you've seen in the past that are common to mobile interface design. In this tutorial we're going to start with the simplest transition, called "stack," but also show you how to create several others too.

• Stack navigation is when a new screen glides in from the side to cover the current screen, like pulling a one playing card off of a deck to reveal the card below.
• Tab navigation is usually a series of buttons at the bottom; it's the equivalent of a top navigation bar on the web, and is usually used for high-level options like going home, searching, or a viewing a map.
• Drawer navigation is where users swipe to the right to see a sliding panel, and is usually used for settings.

We'll assume you know how to install JavaScript libraries on the command line and how to make custom React Native components. We'll also assume you have some kind of app with an initial screen to work from.

In this tutorial we'll take a single-screen app that shows records of lost pets and start by moving that content to a "Pets" screen so we can launch with a "Welcome" screen instead. Users who tap on a button in the welcome screen will be taken to the records screen. We'll also do some basic customization of each screen's header.

⚠️ Remember that in multi-component apps, you may have to reload manually to see changes (eg, by simulating the shake gesture).

⚠️ Note that React Navigation is a third-party library that is frequently modified, so check ReactNavigation.org to see if the syntax in this tutorial has been updated.

Installing React Navigation

🖥 Option A: Expo Command Line Interface (CLI)

To install React Navigation using the commandline, execute these commands before altering any of your app's code.

• Install react-navigation in your project directory.

npm install @react-navigation/native

• Install more stuff.

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

• Install even more stuff.

npm install @react-navigation/stack

You don't need to install these libraries if you are making an Expo Snack. However, when you add your import statements, the Snack will ask if you want to install these libraries. Say yes!

• You'll import NavigationContainer and createStackNavigator in App.js and all the screens that you make.

🧁 Option B: Snack users

Snack users can still use the technique shown in the tutorial, with these adjustments:

1. Instead of using the command line to add the navigation dependencies, just type them at the top of your Snack, eg:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

2. Then be sure to click the warnings at bottom to add each dependency as needed. By the time you're done, your package.json file will look something like this:

{
	"dependencies": {
		"@react-navigation/stack": "*",
		"@react-navigation/native": "*",
		"react-native-screens": "~3.29.0",
		"react-native-gesture-handler": "~2.14.0",
		"react-native-safe-area-context": "4.8.2",
		"@react-native-community/masked-view": "^0.1.0"
	}
}

3. As the tutorial explains, you'll create a screens folder with a .js file for each screen. For a Snack, use the left-hand pane (click Editor > Files at bottom to show or hide this).

Here's a simple demo of screen navigation in a Snack.

⚠️ The Web preview may not work; load this demo on your phone instead.

Creating your first screens

• Create a screens folder and, inside, WelcomeScreen.js and PetsScreen.js as functional components.
• Here, for example, is what WelcomeScreen.js could contain.

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { View, Text, StyleSheet, Button } from "react-native";
const WelcomeScreen = ({ navigation }) => {
  return (
    <View style={styles.welcomeContainer}>
      <Text>Welcome</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  welcomeContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "paleturquoise"
  }
});
export default WelcomeScreen;

• Create a similar PetsScreen.js in the screens folder.
• In App.js, make space at the top and import the same navigation helpers you added to the screen files.

import React from "react";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import WelcomeScreen from "./screens/WelcomeScreen" ;
import PetsScreen from "./screens/PetsScreen" ;

• Still in App.js, cut the other import statements, the returned JSX, and the styles at bottom.
• In PetsScreen.js, paste these back in their places.
• Since PetsScreen.js is in the screens folder, use a double, not single, period in your path to import your components, eg ../components/Card rather than ./components/Card.

import React from "react" ;
import { Text, View, StyleSheet, Image, ScrollView } from "react-native";
import Constants from "expo-constants";
import Card from "../components/Card";
const PetsScreen = () => {
	// Put the JavaScript previously in the App function here.
	return (
	    // Put the JSX previously in the App function here.
	}
...
const styles = StyleSheet.create({
  // Put the styles previously in App.js here.
});
export default PetsScreen;

Create your navigation stack

• App.js should now look quite bare.

import React from "react" ;
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import WelcomeScreen from "./screens/WelcomeScreen";
import PetsScreen from "./screens/PetsScreen";
export default function App() {}

• In App.js, create a navigation stack.

const Stack = createStackNavigator();

• Then in the App function return a container with that stack inside. 👉 Note that App is the only component that requires the word function rather than => in its definition.

export default function App() {
  return (
    <NavigationContainer>
      
    </NavigationContainer>
  );
}

• Then add the screens, or "routes," to your "stack".
• Also set the initialRouteName to the name of whichever screen you want to load when the app launches.

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Welcome">
        <Stack.Screen name="Welcome" component={ WelcomeScreen } />
        <Stack.Screen name="Pets" component={ PetsScreen } />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Linking the screens

• Inside WelcomeScreen.js, let users go from the Welcome to Home screen, let's turn the welcome text into a button.
• ⚠️ Don't forget to import the Button component.

...
import { View, Text, StyleSheet, Button } from "react-native";
const WelcomeScreen = () => {
  return (
    <View style={styles.welcomeContainer}>
      <Button
        title="See lost pets"
      />
    </View>
  );
}
...
export default WelcomeScreen;

• Still inside WelcomeScreen.js, add a parameter to the function and a button.
• Add the word navigation inside braces to the component's main function.
• Inside the button's onPress listener, add a navigation.navigate method.
• The navigate method takes a parameter that is the name of the screen to go to (eg, "Pets").

...
const WelcomeScreen = ({ navigation }) => { // Note the added { navigation } parameter.
  return (
    <View style={styles.welcomeContainer}>
      <Button
        title="See lost pets"
        onPress={() => navigation.navigate("Pets")}
      />
    </View>
  );
}
...
export default WelcomeScreen;

• Try it! You'll see that, in iOS anyway, you get a free back button that you don't even have to code.

Customizing the header

• Let's give the screens some options. Note the crazy levels of nested objects.
• Use the more detailed syntax to specify the contents and style of each header.

		<Stack.Navigator initialRouteName="Welcome">
			<Stack.Screen
				name="Welcome"
				component={WelcomeScreen}
				options={
					{
						title: "Welcome",
						headerStyle: {
							backgroundColor: "teal"
						},
						headerTitleStyle: {
							fontWeight: "bold",
							color: "paleturquoise"
						}
					}
				}
			/>
			<Stack.Screen
				name="Pets"
				component={PetsScreen}
				options={
					{
						title: "Lost pets" 
					}
				}
			/>
		</Stack.Navigator>
		

• 🎩 More options in the React Navigation docs.

Other React Navigation options

• createSwitchNavigator: you can't go back (eg, login screen)
• createStackNavigator: you can go back
• createDrawerNavigator: slides in, eg in response to hamburger menu

🧁 import { createDrawerNavigator } from '@react-navigation/drawer';

Or for CLI:marykate$ expo install @react-navigation/drawer

• createTabNavigator: makes a tabbed navigation bar on the bottom

🧁 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

Or for CLI: marykate$ expo install @react-navigation/bottom-tabs