From 8bf0241db35e265e67da192a911fb8af5b9eccac Mon Sep 17 00:00:00 2001
From: TenType <55125103+TenType@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:01:20 -0700
Subject: [PATCH] Add basic navigation

---
 App.js                    |  18 +++-
 package-lock.json         | 197 ++++++++++++++++++++++++++++++++++++++
 package.json              |   6 +-
 src/screens/HomeScreen.js |  16 +++-
 4 files changed, 230 insertions(+), 7 deletions(-)

diff --git a/App.js b/App.js
index ad99c2d..6cbb521 100644
--- a/App.js
+++ b/App.js
@@ -1,7 +1,23 @@
 import "@expo/metro-runtime";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
 import HomeScreen from "./src/screens/HomeScreen";
+import SignInScreen from "./src/screens/SignInScreen";
+import DonateScreen from "./src/screens/DonateScreen";
+import WebsitesScreen from "./src/screens/WebsitesScreen";
+
+const Stack = createNativeStackNavigator();
 
 export default function App() {
-  return <HomeScreen />;
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Home">
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Sign In" component={SignInScreen} />
+        <Stack.Screen name="Donate" component={DonateScreen} />
+        <Stack.Screen name="Websites" component={WebsitesScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
 }
diff --git a/package-lock.json b/package-lock.json
index f07186e..f5d8ac6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "1.0.0",
       "dependencies": {
         "@react-native-community/cli": "^13.6.9",
+        "@react-navigation/native": "^6.1.17",
+        "@react-navigation/native-stack": "^6.9.26",
         "expo": "~51.0.11",
         "expo-constants": "^16.0.2",
         "expo-status-bar": "~1.12.1",
@@ -16,6 +18,8 @@
         "react": "^18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.74.2",
+        "react-native-safe-area-context": "4.10.1",
+        "react-native-screens": "3.31.1",
         "react-native-web": "~0.19.10"
       },
       "devDependencies": {
@@ -5668,6 +5672,99 @@
         }
       }
     },
+    "node_modules/@react-navigation/core": {
+      "version": "6.4.16",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.16.tgz",
+      "integrity": "sha512-UDTJBsHxnzgFETR3ZxhctP+RWr4SkyeZpbhpkQoIGOuwSCkt1SE0qjU48/u6r6w6XlX8OqVudn1Ab0QFXTHxuQ==",
+      "dependencies": {
+        "@react-navigation/routers": "^6.1.9",
+        "escape-string-regexp": "^4.0.0",
+        "nanoid": "^3.1.23",
+        "query-string": "^7.1.3",
+        "react-is": "^16.13.0",
+        "use-latest-callback": "^0.1.9"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/@react-navigation/core/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-navigation/core/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/@react-navigation/elements": {
+      "version": "1.3.30",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.30.tgz",
+      "integrity": "sha512-plhc8UvCZs0UkV+sI+3bisIyn78wz9O/BiWZXpounu72k/R/Sj5PuZYFJ1fi6psvriUveMCGh4LeZckAZu2qiQ==",
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0"
+      }
+    },
+    "node_modules/@react-navigation/native": {
+      "version": "6.1.17",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.17.tgz",
+      "integrity": "sha512-mer3OvfwWOHoUSMJyLa4vnBH3zpFmCwuzrBPlw7feXklurr/ZDiLjLxUScOot6jLRMz/67GyilEYMmP99LL0RQ==",
+      "dependencies": {
+        "@react-navigation/core": "^6.4.16",
+        "escape-string-regexp": "^4.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^3.1.23"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/@react-navigation/native-stack": {
+      "version": "6.9.26",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.9.26.tgz",
+      "integrity": "sha512-++dueQ+FDj2XkZ902DVrK79ub1vp19nSdAZWxKRgd6+Bc0Niiesua6rMCqymYOVaYh+dagwkA9r00bpt/U5WLw==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.30",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
+    "node_modules/@react-navigation/native/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-navigation/routers": {
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz",
+      "integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==",
+      "dependencies": {
+        "nanoid": "^3.1.23"
+      }
+    },
     "node_modules/@rnx-kit/chromium-edge-launcher": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@rnx-kit/chromium-edge-launcher/-/chromium-edge-launcher-1.0.0.tgz",
@@ -7021,6 +7118,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/deep-extend": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -8005,6 +8110,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -8105,6 +8215,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -12181,6 +12299,23 @@
         "qrcode-terminal": "bin/qrcode-terminal.js"
       }
     },
+    "node_modules/query-string": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
+      "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
+      "dependencies": {
+        "decode-uri-component": "^0.2.2",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/querystring": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
@@ -12291,6 +12426,17 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-freeze": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz",
+      "integrity": "sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -12355,6 +12501,28 @@
         }
       }
     },
+    "node_modules/react-native-safe-area-context": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.10.1.tgz",
+      "integrity": "sha512-w8tCuowDorUkPoWPXmhqosovBr33YsukkwYCDERZFHAxIkx6qBadYxfeoaJ91nCQKjkNzGrK5qhoNOeSIcYSpA==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-screens": {
+      "version": "3.31.1",
+      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.31.1.tgz",
+      "integrity": "sha512-8fRW362pfZ9y4rS8KY5P3DFScrmwo/vu1RrRMMx0PNHbeC9TLq0Kw1ubD83591yz64gLNHFLTVkTJmWeWCXKtQ==",
+      "dependencies": {
+        "react-freeze": "^1.0.0",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.12.tgz",
@@ -13406,6 +13574,14 @@
         "node": "*"
       }
     },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -13481,6 +13657,14 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -14366,6 +14550,14 @@
       "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.0.tgz",
       "integrity": "sha512-EGXjXJZhIHiQMK2pQukuFcL303nskqIRzWvPvV5O8miOfwoUb9G+a/Cld60kUyeaybEI94wvVClT10DtfeAExA=="
     },
+    "node_modules/use-latest-callback": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz",
+      "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -14421,6 +14613,11 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warn-once": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.1.tgz",
+      "integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q=="
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
diff --git a/package.json b/package.json
index c05e0e3..2a2fe9f 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "@react-native-community/cli": "^13.6.9",
+    "@react-navigation/native": "^6.1.17",
+    "@react-navigation/native-stack": "^6.9.26",
     "expo": "~51.0.11",
     "expo-constants": "^16.0.2",
     "expo-status-bar": "~1.12.1",
@@ -19,7 +21,9 @@
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.2",
-    "react-native-web": "~0.19.10"
+    "react-native-web": "~0.19.10",
+    "react-native-screens": "3.31.1",
+    "react-native-safe-area-context": "4.10.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
index 555eea2..99d455a 100644
--- a/src/screens/HomeScreen.js
+++ b/src/screens/HomeScreen.js
@@ -1,21 +1,27 @@
 import { StyleSheet, Text, Image, View, Pressable } from "react-native";
 
-export default function HomeScreen() {
+export default function HomeScreen({ navigation }) {
   return (
     <View style={styles.container}>
       <Image source={require("./../assets/logo.png")} style={styles.logo} />
-      <Pressable style={styles.volunteer}>
+      <Pressable
+        style={styles.volunteer}
+        onPress={() => navigation.navigate("Sign In")}
+      >
         <Text style={styles.buttonText}>Volunteer</Text>
       </Pressable>
-      <Pressable style={styles.request}>
+      <Pressable
+        style={styles.request}
+        onPress={() => navigation.navigate("Sign In")}
+      >
         <Text style={[styles.buttonText, { fontSize: 24 }]}>
           Request a Concert
         </Text>
       </Pressable>
-      <Pressable>
+      <Pressable onPress={() => navigation.navigate("Donate")}>
         <Text style={styles.smallButton}>Donate</Text>
       </Pressable>
-      <Pressable>
+      <Pressable onPress={() => navigation.navigate("Websites")}>
         <Text style={styles.smallButton}>Visit our websites</Text>
       </Pressable>
     </View>