add lib @notifee/react-native for push notification forground

App.js

@@ -21,6 +21,7 @@ import Toast from 'react-native-toast-message'
 import SplashScreen from 'react-native-splash-screen'
 import { setBaseUrlByServerMode } from './src/api/api'
 import { Settings } from 'react-native-fbsdk-next';
+import notifee, { AndroidImportance } from '@notifee/react-native';
 
 Text.defaultProps = Text.defaultProps || {}
 Text.defaultProps.allowFontScaling = false
@@ -34,19 +35,24 @@ class App extends Component {
   constructor(props) {
     super(props)
     this._setDataFromInitState = this._setDataFromInitState.bind(this)
+    this.unsubscribe = null;
   }
 
   componentDidMount = async () => {
     SplashScreen.hide()
     Settings.initializeSDK();
 
-    // Test FCM token
+    await this.requestUserPermission();
+    this.unsubscribe = messaging().onMessage(async remoteMessage => {
+      console.log('A new FCM message arrived!', remoteMessage);
+      await this.onDisplayNotification(remoteMessage);
+    });
+
     try {
       const token = await messaging().getToken();
       console.log('Current FCM Token:', token);
       console.log('Token length:', token ? token.length : 0);
 
-      // ตรวจสอบ permission status
       const authStatus = await messaging().requestPermission();
       console.log('Permission status:', authStatus);
 
@@ -55,33 +61,47 @@ class App extends Component {
     }
   }
 
-  // เพิ่ม method ใหม่สำหรับ setup listeners
+  componentWillUnmount() {
-  setupNotificationListeners = () => {
+    if (this.unsubscribe) {
-    // Foreground message handler
+      this.unsubscribe();
-    messaging().onMessage(async remoteMessage => {
+    }
-      console.log('Foreground notification:', remoteMessage);
-    });
-
-    // Background/Quit message handler
-    messaging().setBackgroundMessageHandler(async remoteMessage => {
-      console.log('Background notification:', remoteMessage);
-    });
-
-    // Notification opened app handler
-    messaging().onNotificationOpenedApp(remoteMessage => {
-      console.log('Notification opened app:', remoteMessage);
-    });
-
-    // Check if app was opened from notification
-    messaging()
-      .getInitialNotification()
-      .then(remoteMessage => {
-        if (remoteMessage) {
-          console.log('App opened from notification:', remoteMessage);
-        }
-      });
   }
 
+  requestUserPermission = async () => {
+    const authStatus = await messaging().requestPermission();
+    const enabled =
+      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
+      authStatus === messaging.AuthorizationStatus.PROVISIONAL;
+
+    if (enabled) {
+      console.log('Authorization status:', authStatus);
+    }
+  };
+
+  onDisplayNotification = async (remoteMessage) => {
+    const channelId = await notifee.createChannel({
+      id: 'default',
+      name: 'Default Channel',
+      importance: AndroidImportance.HIGH,
+    });
+
+    await notifee.displayNotification({
+      title: remoteMessage.notification.title,
+      body: remoteMessage.notification.body,
+      android: {
+        channelId,
+        smallIcon: 'ic_launcher'
+      },
+      ios: {
+        foregroundPresentationOptions: {
+            badge: true,
+            sound: true,
+            banner: true,
+        },
+      },
+    });
+  };
+
   initNotification = async () => {
     try {
       await this.setPermission()

ios/Fix.swift

@@ -0,0 +1,8 @@
+//
+//  Untitled.swift
+//  csareactrn60
+//
+//  Created by BDA Office on 4/12/2568 BE.
+//  Copyright © 2568 BE Facebook. All rights reserved.
+//
+

ios/Podfile.lock

@@ -606,6 +606,11 @@ PODS:
     - React-Core
     - React-RCTImage
     - TOCropViewController
+  - RNNotifee (7.8.2):
+    - React-Core
+    - RNNotifee/NotifeeCore (= 7.8.2)
+  - RNNotifee/NotifeeCore (7.8.2):
+    - React-Core
   - RNPermissions (4.1.5):
     - React-Core
   - RNScreens (2.18.1):
@@ -687,6 +692,7 @@ DEPENDENCIES:
   - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
+  - "RNNotifee (from `../node_modules/@notifee/react-native`)"
   - RNPermissions (from `../node_modules/react-native-permissions`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
@@ -832,6 +838,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-gesture-handler"
   RNImageCropPicker:
     :path: "../node_modules/react-native-image-crop-picker"
+  RNNotifee:
+    :path: "../node_modules/@notifee/react-native"
   RNPermissions:
     :path: "../node_modules/react-native-permissions"
   RNScreens:
@@ -921,6 +929,7 @@ SPEC CHECKSUMS:
   RNFBMessaging: c05a432d82a2aa730161e62c56b2a53ca3b412f5
   RNGestureHandler: 6572a5f44759900730562b418da289c373de8d06
   RNImageCropPicker: 5c7ec5f529a8871ea5aea10c9d721034bdfd6a88
+  RNNotifee: 8768d065bf1e2f9f8f347b4bd79147431c7eacd6
   RNPermissions: 553c7539c121295b3eb984b8a7dce572a348ccdd
   RNScreens: 6a2106686e0de9866ab14ca250d7e47a49416b51
   RNSVG: af004514150de2bd928e11d215bca33a5d1c19ce

ios/csareactrn60-Bridging-Header.h

@@ -0,0 +1,4 @@
+//
+//  Use this file to import your target's public headers that you would like to expose to Swift.
+//
+

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@invertase/react-native-apple-authentication": "^1.1.2",
+    "@notifee/react-native": "7.8.2",
     "@react-native-async-storage/async-storage": "^2.1.2",
     "@react-native-camera-roll/camera-roll": "^7.10.0",
     "@react-native-community/datetimepicker": "^3.0.2",

yarn.lock

@@ -1088,7 +1088,20 @@
     "@babel/parser" "^7.27.2"
     "@babel/types" "^7.27.1"
 
-"@babel/traverse--for-generate-function-map@npm:@babel/traverse@^7.25.3", "@babel/traverse@^7.20.0", "@babel/traverse@^7.25.3", "@babel/traverse@^7.27.1", "@babel/traverse@^7.27.3", "@babel/traverse@^7.28.0":
+"@babel/traverse--for-generate-function-map@npm:@babel/traverse@^7.25.3":
+  version "7.28.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.28.0.tgz#518aa113359b062042379e333db18380b537e34b"
+  integrity sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg==
+  dependencies:
+    "@babel/code-frame" "^7.27.1"
+    "@babel/generator" "^7.28.0"
+    "@babel/helper-globals" "^7.28.0"
+    "@babel/parser" "^7.28.0"
+    "@babel/template" "^7.27.2"
+    "@babel/types" "^7.28.0"
+    debug "^4.3.1"
+
+"@babel/traverse@^7.20.0", "@babel/traverse@^7.25.3", "@babel/traverse@^7.27.1", "@babel/traverse@^7.27.3", "@babel/traverse@^7.28.0":
   version "7.28.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.28.0.tgz#518aa113359b062042379e333db18380b537e34b"
   integrity sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg==
@@ -1500,6 +1513,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@notifee/react-native@7.8.2":
+  version "7.8.2"
+  resolved "https://registry.yarnpkg.com/@notifee/react-native/-/react-native-7.8.2.tgz#72d3199ae830b4128ddaef3c1c2f11604759c9c4"
+  integrity sha512-VG4IkWJIlOKqXwa3aExC3WFCVCGCC9BA55Ivg0SMRfEs+ruvYy/zlLANcrVGiPtgkUEryXDhA8SXx9+JcO8oLA==
+
 "@react-native-async-storage/async-storage@^1.13.4":
   version "1.24.0"
   resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.24.0.tgz#888efbc62a26f7d9464b32f4d3027b7f2771999b"