Add notifications

App.js

@@ -1,5 +1,5 @@
 import { StatusBar } from 'expo-status-bar';
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
@@ -8,8 +8,11 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Login from "./Views/Login.js"
 import Feed from "./Views/Feed.js"
 import Profile from "./Views/Profile.js"
-import Notifications from './Views/Notifications.js';
+import NotificationsView from './Views/NotificationsView.js';
 import SinglePost from './Views/SinglePost.js'
+import * as Device from 'expo-device';
+import * as Notifications from 'expo-notifications';
+import API from './API.js';
 
 
 const Tab = createMaterialBottomTabNavigator();
@@ -25,7 +28,77 @@ const theme = {
     },
 };
 
+Notifications.setNotificationHandler({
+    handleNotification: async () => ({
+        shouldShowAlert: true,
+        shouldPlaySound: false,
+        shouldSetBadge: false,
+    }),
+});
+
+async function registerForPushNotificationsAsync() {
+    let token;
+    if (Device.isDevice) {
+        const { status: existingStatus } = await Notifications.getPermissionsAsync();
+        let finalStatus = existingStatus;
+        if (existingStatus !== 'granted') {
+            const { status } = await Notifications.requestPermissionsAsync();
+            finalStatus = status;
+        }
+        if (finalStatus !== 'granted') {
+            alert('Failed to get push token for push notification!');
+            return;
+        }
+        token = (await Notifications.getExpoPushTokenAsync()).data;
+        console.log(token);
+    } else {
+        alert('Must use physical device for Push Notifications');
+    }
+
+    if (Platform.OS === 'android') {
+        Notifications.setNotificationChannelAsync('default', {
+            name: 'default',
+            importance: Notifications.AndroidImportance.MAX,
+            vibrationPattern: [0, 250, 250, 250],
+            lightColor: '#FF231F7C',
+        });
+    }
+    console.log(token);
+    return token;
+}
+
+
+
 const MainNavigation = () => {
+    const [expoPushToken, setExpoPushToken] = useState('');
+    const [notification, setNotification] = useState(false);
+    const notificationListener = useRef();
+    const responseListener = useRef();
+
+    useEffect(() => {
+        registerForPushNotificationsAsync().then(async (token) => {
+            let isLoggedIn = await API.isLoggedIn();
+            if (isLoggedIn) API.registerToken(token);
+            return setExpoPushToken(token);
+        });
+
+        // This listener is fired whenever a notification is received while the app is foregrounded
+        notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
+            setNotification(notification);
+        });
+
+        // This listener is fired whenever a user taps on or interacts with a notification (works when app is foregrounded, backgrounded, or killed)
+        responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
+            console.log(response);
+        });
+
+        return () => {
+            Notifications.removeNotificationSubscription(notificationListener.current);
+            Notifications.removeNotificationSubscription(responseListener.current);
+        };
+    }, []);
+
+
     return (
         <Tab.Navigator initialRouteName="Home"
             activeColor="#0d6efd"
@@ -47,9 +120,9 @@ const MainNavigation = () => {
                     },
                 })}
             />
-            <Tab.Screen 
-                name="Notifications" 
-                component={Notifications} 
+            <Tab.Screen
+                name="Notifications"
+                component={NotificationsView}
                 options={{
                     tabBarLabel: 'Notifications',
                     tabBarIcon: ({ color }) => (
@@ -58,7 +131,7 @@ const MainNavigation = () => {
                     tabBarBadge: false
                 }}
             />
-            
+
             <Tab.Screen name="Logout" component={Login} />
         </Tab.Navigator>
     )
@@ -71,10 +144,10 @@ export default function App() {
         }} theme={theme}>
             <NavigationContainer>
                 <Stack.Navigator>
-                    <Stack.Screen 
-                        name="Home" 
-                        component={MainNavigation} 
-                        options={{ headerShown: false }} 
+                    <Stack.Screen
+                        name="Home"
+                        component={MainNavigation}
+                        options={{ headerShown: false }}
                     />
                     <Stack.Screen
                         name="Profile"