Headers, footers, and navigation

To implement navigation in our app, we'll use the react-navigation package. Here's what our App component looks like:

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

const AppNavigator = createStackNavigator(
  {
    Home,
    Settings,
    Help,
    Contact
  },
  {
    defaultNavigationOptions: {
      headerShown: false
    }
  }
);

export default createAppContainer(AppNavigator);

The AppNavigator component is created with four screen components from our app: Home, Settings, Help, and Contact. The other thing to note here is that we're setting the headerShown option to false because each of our screen components includes the header as part of the Container component. Next, let's take a look at the Home...