Merge pull request #15 from AudacityMusic/screen-navigator

Add basic navigation

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>
+  );
 }

package.json

@@ -12,14 +12,18 @@
   },
   "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",
     "expo-updates": "~0.25.17",
     "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",

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>