Navigation basics

Let's start off with the basics of moving from one page to another using the react-navigation package.

Before starting, you should install the react-navigation package to our project and some additional dependencies related to the example:

npm install @react-navigation/native

Then, install native dependencies using expo:

expo install react-native-screens react-native-safe-area-context

The preceding installation steps will be required for each example in this chapter, but we need to add one more package related to the stack navigator:

npm install @react-navigation/native-stack

Now, we are ready to develop navigation. Here's what the App component looks like:

import * as React from "react";
import { NavigationContainer } from 
  "@react-navigation/native";
import { createNativeStackNavigator } from 
  "@react-navigation/native-stack";
import Home from "./Home";
import Settings...