Local notifications

app.json

@@ -31,6 +31,10 @@
       }
     },
     "owner": "kir-dev",
-    "plugins": ["expo-router"]
+    "plugins": ["expo-router"],
+    "notification": {
+      "icon": "./assets/notification-icon.png",
+      "color": "#000000"
+    }
   }
 }

app/(tabs)/_layout.tsx

@@ -4,9 +4,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { TabbarBackground } from '../../components/tabbar/tabbar-background';
 import { TabbarIcon } from '../../components/tabbar/tabbar-icon';
 import { TabbarLabel } from '../../components/tabbar/tabbar-label';
+import { useNotificationObserver } from '../../hooks/use-notification-observer';
 import { colors } from '../../theme/colors';
 
 export default function TabsLayout() {
+  useNotificationObserver();
   const { top, bottom, left, right } = useSafeAreaInsets();
   return (
     <Tabs

components/schedule/favorite-button.tsx

@@ -3,21 +3,22 @@ import { useMemo } from 'react';
 import { Pressable } from 'react-native';
 
 import { useFavoriteEvents } from '../../contexts/favorite-events.context';
+import { ScheduleEvent } from '../../types/schedule-event.type';
 
 interface FavoriteButtonProps {
-  eventId: string;
+  event: ScheduleEvent;
 }
 
-export function FavoriteButton({ eventId }: FavoriteButtonProps) {
+export function FavoriteButton({ event }: FavoriteButtonProps) {
   const { isFavoriteEvent, addFavoriteEvent, removeFavoriteEvent } = useFavoriteEvents();
 
-  const isFavorite = useMemo(() => isFavoriteEvent(eventId), [eventId, isFavoriteEvent]);
+  const isFavorite = useMemo(() => isFavoriteEvent(event.id), [event, isFavoriteEvent]);
 
   const onPress = () => {
     if (isFavorite) {
-      removeFavoriteEvent(eventId);
+      removeFavoriteEvent(event.id);
     } else {
-      addFavoriteEvent(eventId);
+      addFavoriteEvent(event);
     }
   };
 

components/schedule/schedule-details-page.tsx

@@ -26,7 +26,7 @@ export function ScheduleDetailsPage({ id }: ScheduleDetailsPageProps) {
         </Subtitle>
       </Header>
       <StyledText className='mx-5 text-xl'>{data?.description}</StyledText>
-      <FavoriteButton eventId={id} />
+      <FavoriteButton event={data} />
     </Screen>
   );
 }

contexts/favorite-events.context.tsx

@@ -1,12 +1,14 @@
 import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
 
 import { FavoriteEventStorageService } from '../services/favorite-event.service';
+import { NotificationService } from '../services/notification.service';
 import { FavoriteEvent } from '../types/favorite-event.type';
+import { ScheduleEvent } from '../types/schedule-event.type';
 
 type FavoriteEventsContextType =
   | {
       favoriteEvents: FavoriteEvent[];
-      addFavoriteEvent: (eventId: string) => void;
+      addFavoriteEvent: (event: ScheduleEvent) => void;
       removeFavoriteEvent: (eventId: string) => void;
       isFavoriteEvent: (eventId: string) => boolean;
     }
@@ -17,14 +19,18 @@ const FavoriteEventsContext = createContext<FavoriteEventsContextType>(undefined
 export function FavoriteEventsProvider({ children }: PropsWithChildren) {
   const [favoriteEvents, setFavoriteEvents] = useState<FavoriteEvent[]>([]);
 
-  function addFavoriteEvent(eventId: string) {
-    setFavoriteEvents((prev) => [...prev, { eventId }]);
-    FavoriteEventStorageService.addFavoriteEvent(eventId);
+  async function addFavoriteEvent(event: ScheduleEvent) {
+    const notificationId = await NotificationService.scheduleEventNotification(event);
+    const favoriteEvent = { eventId: event.id, notificationId };
+    setFavoriteEvents((prev) => [...prev, favoriteEvent]);
+    FavoriteEventStorageService.addFavoriteEvent(favoriteEvent);
   }
 
   function removeFavoriteEvent(eventId: string) {
+    const favoriteEvent = favoriteEvents.find((item) => item.eventId === eventId);
     setFavoriteEvents((prev) => prev.filter((item) => item.eventId !== eventId));
     FavoriteEventStorageService.removeFavoriteEvent(eventId);
+    NotificationService.removeScheduledNotification(favoriteEvent?.notificationId);
   }
 
   function isFavoriteEvent(eventId: string) {

hooks/use-notification-observer.ts

@@ -0,0 +1,35 @@
+import * as Notifications from 'expo-notifications';
+import { useRouter } from 'expo-router';
+import { useEffect } from 'react';
+
+//From: https://docs.expo.dev/versions/latest/sdk/notifications/#handle-push-notifications-with-navigation
+export function useNotificationObserver() {
+  const router = useRouter();
+  useEffect(() => {
+    let isMounted = true;
+
+    function redirect(notification: Notifications.Notification) {
+      const tab = notification.request.content.data?.tab;
+      const screen = notification.request.content.data?.screen;
+      const id = notification.request.content.data?.id;
+      if (tab) router.push({ pathname: tab });
+      if (screen) router.push({ pathname: `${tab}/${screen}`, params: { id } });
+    }
+
+    Notifications.getLastNotificationResponseAsync().then((response) => {
+      if (!isMounted || !response?.notification) {
+        return;
+      }
+      redirect(response?.notification);
+    });
+
+    const subscription = Notifications.addNotificationResponseReceivedListener((response) => {
+      redirect(response.notification);
+    });
+
+    return () => {
+      isMounted = false;
+      subscription.remove();
+    };
+  }, []);
+}

package.json

@@ -21,8 +21,10 @@
     "date-fns": "^3.2.0",
     "expo": "~49.0.21",
     "expo-constants": "~14.4.2",
+    "expo-device": "~5.4.0",
     "expo-linking": "~5.0.2",
-    "expo-router": "^2.0.0",
+    "expo-notifications": "~0.20.1",
+    "expo-router": "^2.0.14",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
     "nativewind": "^2.0.11",

services/favorite-event.service.ts

@@ -17,10 +17,10 @@ export class FavoriteEventStorageService {
     }
   }
 
-  static async addFavoriteEvent(eventId: string): Promise<void> {
+  static async addFavoriteEvent(favorite: FavoriteEvent): Promise<void> {
     try {
       const favoriteEvents = await this.listFavoriteEvents();
-      const newFavoriteEvents = [...favoriteEvents, { eventId }];
+      const newFavoriteEvents = [...favoriteEvents, favorite];
       await this.saveFavoriteEvents(newFavoriteEvents);
     } catch (error) {
       console.log(error);

services/notification.service.ts

@@ -0,0 +1,53 @@
+import { isBefore } from 'date-fns';
+import * as Notifications from 'expo-notifications';
+import { Platform } from 'react-native';
+
+import { ScheduleEvent } from '../types/schedule-event.type';
+
+export class NotificationService {
+  static notificationEnabled = false;
+
+  private static async registerForPushNotifications() {
+    if (Platform.OS === 'android') {
+      await Notifications.setNotificationChannelAsync('default', {
+        name: 'default',
+        importance: Notifications.AndroidImportance.HIGH,
+      });
+    }
+
+    const { status: existingStatus } = await Notifications.getPermissionsAsync();
+    this.notificationEnabled = existingStatus === 'granted';
+    if (existingStatus !== 'granted') {
+      const { status } = await Notifications.requestPermissionsAsync();
+      this.notificationEnabled = status === 'granted';
+    }
+  }
+
+  static async scheduleEventNotification(event: ScheduleEvent) {
+    await this.registerForPushNotifications();
+    if (!this.notificationEnabled) {
+      console.log('Notification permission not granted, not scheduling notification');
+      return;
+    }
+    if (isBefore(new Date(event.start), new Date())) {
+      console.log('Event is in the past, not scheduling notification');
+      return;
+    }
+
+    const triggerDate = new Date(event.start);
+
+    return await Notifications.scheduleNotificationAsync({
+      content: {
+        title: event.title,
+        body: `Hamarosan kezdődik a(z) ${event.location} teremben!`,
+        data: { tab: 'schedule', screen: 'schedule-details', id: event.id },
+      },
+      trigger: triggerDate,
+    });
+  }
+
+  static async removeScheduledNotification(notificationId: string | undefined): Promise<void> {
+    if (!notificationId) return;
+    await Notifications.cancelScheduledNotificationAsync(notificationId);
+  }
+}

types/favorite-event.type.ts

@@ -1,3 +1,4 @@
 export type FavoriteEvent = {
   eventId: string;
+  notificationId: string | undefined;
 };