[🐛] FCM onMessage triggers when the app moves from background to foreground [iOS]

[aslihanturkdonmez]

trafficstars

Issue

When I send a notification while the app is in the background, the notification is received, and when I enter the app, onMessage is triggered, causing the notification to appear again. This works well on Android.

Javascript

useEffect(() => {
  const unsubscribe = messaging().onMessage(async (remoteMessage) => {
    Alert.alert("Hello");
  });

  return unsubscribe;
}, []);

Notification Content

{
  "token": "token",
  "data": {
    "notificationType": "xxx",
    "priority": "high",
    "id": "123435436",
    "actions": "[{\"title\" : \"test\",\"id\" : \"1\"}, {\"title\" : \"test2\",\"id\" : \"2\"}]",
    "title": "Test!",
    "body": "Test notification"
  },
  "notification": {
    "title": "Test!",
    "body": "Test notification"
  },
  "apns": {
    "payload": {
      "aps": {
        "content-available": 1,
        "mutable-content": 1,
        "sound": {
          "critical": true,
          "name": "default",
          "volume": 1.0
        }
      }
    }
  },
  "android": {
    "priority": "high"
  }
}

---

Project Files

Javascript

Click To Expand

package.json:

{
  "name": "testproject",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@notifee/react-native": "^7.8.2",
    "@react-native-async-storage/async-storage": "^1.21.0",
    "@react-native-community/netinfo": "^11.2.1",
    "@react-native-firebase/app": "^20.1.0",
    "@react-native-firebase/app-distribution": "^20.1.0",
    "@react-native-firebase/crashlytics": "^20.1.0",
    "@react-native-firebase/messaging": "^20.1.0",
    "@react-navigation/drawer": "^6.6.11",
    "@react-navigation/native": "^6.1.14",
    "@react-navigation/native-stack": "^6.9.22",
    "@reduxjs/toolkit": "^2.0.1",
    "axios": "^1.6.3",
    "i18n-js": "^4.3.2",
    "iso-639-1": "^3.1.0",
    "moment": "^2.30.1",
    "qs": "^6.11.2",
    "react": "18.2.0",
    "react-native": "0.73.4",
    "react-native-blob-util": "^0.19.9",
    "react-native-date-picker": "^5.0.2",
    "react-native-device-info": "^10.12.0",
    "react-native-gesture-handler": "^2.15.0",
    "react-native-image-picker": "^7.1.0",
    "react-native-keychain": "~8.1.2",
    "react-native-localize": "^3.0.4",
    "react-native-paper": "^5.12.3",
    "react-native-reanimated": "^3.7.2",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.29.0",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^15.1.0",
    "react-native-toast-message": "^2.2.0",
    "react-native-vector-icons": "^10.0.3",
    "react-native-vision-camera": "^3.7.0",
    "react-native-webview": "^13.6.4",
    "react-redux": "^9.0.4",
    "rn-qr-generator": "^1.4.0",
    "victory-chart": "^36.7.0",
    "victory-native": "^36.7.0",
    "victory-pie": "^36.7.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/plugin-transform-export-namespace-from": "^7.23.4",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "^0.73.21",
    "@react-native/eslint-config": "^0.73.2",
    "@react-native/metro-config": "^0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/qs": "^6.9.11",
    "@types/react": "^18.2.6",
    "@types/react-native-vector-icons": "^6.4.18",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-native-svg-transformer": "^1.3.0",
    "react-test-renderer": "18.2.0",
    "reactotron-react-native": "^5.1.0",
    "reactotron-redux": "^3.1.7",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

firebase.json for react-native-firebase v6:

# N/A

iOS

Click To Expand

ios/Podfile:

• [ ] I'm not using Pods
• [x] I'm using Pods and my Podfile looks like:

# N/A

AppDelegate.m:

// N/A

---

Android

Click To Expand

Have you converted to AndroidX?

• [ ] my application is an AndroidX application?
• [ ] I am using android/gradle.settings jetifier=true for Android compatibility?
• [ ] I am using the NPM package jetifier for react-native compatibility?

android/build.gradle:

// N/A

android/app/build.gradle:

// N/A

android/settings.gradle:

// N/A

MainApplication.java:

// N/A

AndroidManifest.xml:

<!-- N/A -->

---

Environment

Click To Expand

react-native info output:

System:
  OS: macOS 14.2.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 95.42 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.6.2
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.4
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - watchOS 10.2
  Android SDK:
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11330709
  Xcode:
    version: 15.1/15C65
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.4
    wanted: 0.73.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

• Platform that you're experiencing the issue on:
  • [ ] iOS
  • [ ] Android
  • [ ] iOS but have not tested behavior on Android
  • [ ] Android but have not tested behavior on iOS
  • [ ] Both
• react-native-firebase version you're using that has this issue:
  • e.g. 5.4.3
• Firebase module(s) you're using that has the issue:
  • e.g. Instance ID
• Are you using TypeScript?
  • Y/N & VERSION

---

• 👉 Check out React Native Firebase and Invertase on Twitter for updates on the library.