trying to navigate using group button to group link page

firebase-messaging-sw.js

@@ -0,0 +1,18 @@
+import { getMessaging, getToken } from "firebase/messaging";
+
+// Get registration token. Initially this makes a network call, once retrieved
+// subsequent calls to getToken will return from cache.
+const messaging = getMessaging();
+getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
+  if (currentToken) {
+    // Send the token to your server and update the UI if necessary
+    // ...
+  } else {
+    // Show permission request UI
+    console.log('No registration token available. Request permission to generate one.');
+    // ...
+  }
+}).catch((err) => {
+  console.log('An error occurred while retrieving token. ', err);
+  // ...
+});

src/firebase/index.js

@@ -1,7 +1,9 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from 'firebase/app';
+import { getMessaging } from "firebase/messaging";
 import { getAuth } from 'firebase/auth';
 import { getFirestore } from 'firebase/firestore';
+import { doc, setDoc } from "firebase/firestore";
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
 
@@ -31,8 +33,10 @@ const firebaseConfig = {
 // https://firebase.google.com/docs/web/setup
 // https://docs.expo.dev/guides/using-firebase/
 const app = initializeApp(firebaseConfig);
-
+const messaging = getMessaging(app);
+messaging.getToken({vapidKey:"BDGGnJytH87x6d886c7RfRvftpPViuXWxHb4ev9rGP72YuvmvuXCJ7XxaPDsFo9_IX7JlTGSvByeifflY6DOpHM"});
 const auth = getAuth();
 const db = getFirestore(app);
 
-export { auth, db };
+
+export { auth, db, };

src/navigation/AppNavigator.js

@@ -11,6 +11,7 @@ import {
     AuthScreen,
     LoginScreen,
     HomeScreen,
+    GroupLinkScreen,
 } from '../screens';
 
 const Stack = createNativeStackNavigator();
@@ -51,6 +52,11 @@ const AppNavigator = () => {
                 options={{ headerTitle: 'Supper Snacks' }}
                 component={AuthScreen}
             />
+            <Stack.Screen
+                name="Group"
+                options={{ title: 'Group Link Page' }}
+                component={GroupLinkScreen}
+            />            
 
         </Stack.Navigator>
     );

src/screens/GroupLinkScreen.js

@@ -0,0 +1,38 @@
+import { StyleSheet, View, Pressable, Text } from 'react-native';
+import React from 'react';
+
+const MainScreen = ({ navigation }) => {
+    return (
+        <View style={styles.container}>
+            <Pressable
+                style={styles.button}
+                onPress={() => navigation.navigate('Auth')}
+                android_ripple={{ color: '#FFF' }}
+            >
+                <Text style={styles.text}>Supper Snacks</Text>
+            </Pressable>
+        </View>
+    );
+};
+
+export default GroupLinkScreen;
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: '#EBECF0',
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    button: {
+        backgroundColor: '#407BFF',
+        marginVertical: 10,
+        paddingVertical: 10,
+        width: '80%',
+        alignItems: 'center',
+        borderRadius: 4,
+    },
+    text: {
+        color: 'white',
+    },
+});

src/screens/HomeScreen.js

@@ -22,7 +22,7 @@ const THEME = '#407BFF';
 
 const { width } = Dimensions.get('window');
 
-const HomeScreen = () => {
+const HomeScreen = ({navigation}) => {
     const [task, setTask] = useState('');
     const [taskList, setTaskList] = useState([]);
 /*
@@ -92,7 +92,6 @@ const HomeScreen = () => {
         >
             <SafeAreaView style={styles.container}>
                 <View style={styles.contentContainer}>
-                    <Text style={styles.headerText}>Your Orders 🍔</Text>
                     <Text style={styles.headerText}>Choose Your Group</Text>
                     <View style={styles.listContainer}>
                         <FlatList
@@ -108,17 +107,25 @@ const HomeScreen = () => {
                             showsVerticalScrollIndicator={false}
                         />
                         <Pressable
-                            android_ripple={{ color: 'white' }}
                             style={styles.button}
+
+                            android_ripple={{ color: 'white' }}
                         >
                             <Text style={styles.buttonText}>Halls</Text>
                         </Pressable>
                         <Pressable
                             android_ripple={{ color: 'white' }}
+                            onPress={() => navigation.navigate('Group')}
                             style={styles.button}
                         >
                             <Text style={styles.buttonText}>Residential Colleges</Text>
                         </Pressable>
+                        <Pressable
+                            android_ripple={{ color: 'white' }}
+                            style={styles.button}
+                        >
+                            <Text style={styles.buttonText}>Residences</Text>
+                        </Pressable>
                         <Pressable
                             android_ripple={{ color: 'white' }}
                             style={styles.button}
@@ -193,7 +200,7 @@ const styles = StyleSheet.create({
     },
     button: {
         width: width * 0.22,
-        paddingVertical: 10,
+        paddingVertical: 20,
         paddingHorizontal: 6,
         backgroundColor: THEME,
         borderRadius: 5,

src/screens/index.js

@@ -4,3 +4,5 @@ export { default as MainScreen } from './MainScreen';
 // 21 May
 export { default as AuthScreen } from './AuthScreen';
 export { default as HomeScreen } from './HomeScreen';
+export { default as GroupLinkScreen } from './GroupLinkScreen';
+