upd

: notifikasi in app

Deskripsi:
- package baru
- menampilkan notifikasi saat sedang membuka app

NoIssues

app/(application)/_layout.tsx

@@ -9,17 +9,26 @@ import HeaderRightProjectList from "@/components/project/headerProjectList";
 import { Headers } from "@/constants/Headers";
 import store from "@/lib/store";
 import { useAuthSession } from "@/providers/AuthProvider";
+import messaging from "@react-native-firebase/messaging";
 import { Redirect, router, Stack } from "expo-router";
 import { StatusBar } from 'expo-status-bar';
 import { useEffect } from "react";
-import { Alert, Text } from "react-native";
+import { Text } from "react-native";
+import { Easing, Notifier } from 'react-native-notifier';
 import { Provider } from "react-redux";
-import messaging from "@react-native-firebase/messaging";
 
 export default function RootLayout() {
    useEffect(() => {
       const unsubscribe = messaging().onMessage(async remoteMessage => {
-         Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
+         Notifier.showNotification({
+            title: remoteMessage.notification?.title,
+            description: remoteMessage.notification?.body,
+            duration: 5000,
+            animationDuration: 500,
+            showEasing: Easing.ease,
+            onPress: () => router.push('/notification'),
+            hideOnPress: false,
+         });
       });
 
       return unsubscribe;

app/_layout.tsx

@@ -5,6 +5,8 @@ import * as SplashScreen from 'expo-splash-screen';
 import { StatusBar } from 'expo-status-bar';
 import { useEffect } from 'react';
 import 'react-native-reanimated';
+import { NotifierWrapper } from 'react-native-notifier';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -25,15 +27,17 @@ export default function RootLayout() {
   }
 
   return (
-    <>
-      <AuthProvider>
-        <Stack>
-          <Stack.Screen name="index" options={{ headerShown: false }} />
-          <Stack.Screen name="verification" options={{ headerShown: false }} />
-          <Stack.Screen name="(application)" options={{ headerShown: false }} />
-        </Stack>
-        <StatusBar style="auto" />
-      </AuthProvider>
-    </>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <NotifierWrapper>
+        <AuthProvider>
+          <Stack>
+            <Stack.Screen name="index" options={{ headerShown: false }} />
+            <Stack.Screen name="verification" options={{ headerShown: false }} />
+            <Stack.Screen name="(application)" options={{ headerShown: false }} />
+          </Stack>
+          <StatusBar style="auto" />
+        </AuthProvider>
+      </NotifierWrapper>
+    </GestureHandlerRootView>
   );
 }

package.json

@@ -69,6 +69,7 @@
     "react-native-mime-types": "^2.5.0",
     "react-native-modal": "^14.0.0-rc.1",
     "react-native-modal-datetime-picker": "^18.0.0",
+    "react-native-notifier": "^2.0.0",
     "react-native-otp-entry": "^1.8.4",
     "react-native-reanimated": "~3.17.4",
     "react-native-reanimated-carousel": "^4.0.2",