App.js

// This import is necessary for any file containing a React component
import React from "react";

// These imports are part of our navigation package, React Navigation
// https://reactnavigation.org/docs/getting-started
import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

// Our project has two screens: HomeScreen and GameScreen
// Thus, we import both of these screens
import HomeScreen from "./screens/HomeScreen";
import GameScreen from "./screens/GameScreen";
import { nameToPic } from "./constants/Constants";
import { Asset } from "expo-asset";

// To initialize and style our Navigation Stack, we call the default methods
// https://reactnavigation.org/docs/hello-react-navigation
const Stack = createStackNavigator();
const StackOptions = { headerTitleStyle: { fontFamily: "Avenir" } };

// Loading all images for quick use (eliminates lag problem)
// https://docs.expo.io/versions/latest/sdk/asset/
Asset.loadAsync(require("./assets/mdb_logo.png"));
for (var n in nameToPic) {
 Asset.loadAsync(nameToPic[n][1]);
}

// This is the default entry point of our application
// This function returns JSX: a tree-like structure of React components
export default function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 {/* Our Navigation Stack has two screens: 
 1) "Match the Members" - our HomeScreen, and...
 2) "Play" - our GameScreen 
 Notice how we can define exactly which components are used for
 each screen using the "component" parameter. */}
 <Stack.Screen
 options={StackOptions}
 name="Match the Members"
 component={HomeScreen}
 />
 <Stack.Screen
 options={StackOptions}
 name="Play"
 component={GameScreen}
 />
 </Stack.Navigator>
 </NavigationContainer>
 );
}