Application containers

Before we can pull out the NativeBase UI components and render them on our application screens, there are a couple of initialization tasks we have to perform. NativeBase requires you to load font files in order to work. Additionally, we want to set up the same general screen structure for every screen using top-level NativeBase components. To accomplish both of these goals, we can implement a Container component, which can then be used by our screens. We'll start by importing everything that we need:

import React from "react";
import { StatusBar } from "react-native";
import { NativeBaseProvider, Box, Text, HStack } from
  "native-base";
import AppLoading from "expo-app-loading";
import {
  useFonts,
  Roboto_500Medium,
  Roboto_400Regular,
} from "@expo-google-fonts/roboto";
import { Ionicons } from "@expo/vector-icons";
import { theme } from "./theme...