Navigation basics

Let's start off with the basics of moving from one page to another using react-navigation. Here's what the App component looks like:

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import Home from "./Home";
import Settings from "./Settings";

export default createAppContainer(
  createStackNavigator({ Home, Settings }, { initialRouteName: "Home" })
);

The createStackNavigator() function sets up your navigation. The first argument to this function maps to the screen components that can be navigated. The second argument is for more general navigation options—in this case, you're telling the navigator that Home should be the default screen component that's rendered. The createAppContainer() function is necessary so that the screen components get all of the navigation properties that they need.

Here's what the Home component looks...