[🐛] This method is deprecated for Cloud Messaging - Expo 51

[pilotpirxie]

Issue

Even after the update to modular getMessaging I'm getting a bunch of warnings on Android. What I'm doing wrong? I'm using Expo 51.

 WARN  This method is deprecated (as well as all React Native Firebase namespaced API) and will be removed in the next major release as part of move to match Firebase Web modular SDK API. Please see migration guide for more details: https://rnfirebase.io/migrating-to-v22 Please use `getApp()` instead. [Component Stack]

My code:

import { getApp } from '@react-native-firebase/app';
import {FirebaseMessagingTypes, getMessaging, onMessage, requestPermission} from '@react-native-firebase/messaging';
import { useEffect } from 'react';
import { Alert, PermissionsAndroid } from 'react-native';

enum AuthorizationStatus {
  NOT_DETERMINED = -1,
  DENIED = 0,
  AUTHORIZED = 1,
  PROVISIONAL = 2,
}

export async function requestUserPermission() {
  try {
    const app = getApp();
    const messaging = getMessaging(app) as FirebaseMessagingTypes.Module;

    const authStatus = await requestPermission(messaging);
    const enabled =
      // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
      authStatus === AuthorizationStatus.AUTHORIZED ||
      // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
      authStatus === AuthorizationStatus.PROVISIONAL;

    console.info('Authorization status:', authStatus);

    if (!enabled) {
      void PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS);
    }
  } catch (error) {
    console.error('Error requesting user permission:', error);
  }
}

export function useSubscribeToNotifications() {
  useEffect(() => {
    const app = getApp();
    const messaging = getMessaging(app) as FirebaseMessagingTypes.Module;

    const unsubscribe = onMessage(messaging, (remoteMessage) => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
    });

    return unsubscribe;
  }, []);
}

package.json:

{
  "name": "app",
  "version": "1.0.0",
  "main": "index.ts",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "prebuild": "expo prebuild",
    "prebuild:clean": "expo prebuild --clean",
    "build:android": "expo run:android --variant release",
    "build:ios": "expo run:ios --configuration Release",
    "check-compatibility": "npx expo install --check",
    "lint": "eslint ./src/",
    "fix": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src/",
    "generate-rtk-query": "npx @rtk-query/codegen-openapi ./src/data/generated/openapi-config.ts"
  },
  "dependencies": {
    "@faker-js/faker": "^9.2.0",
    "@react-native-firebase/app": "^21.11.0",
    "@react-native-firebase/messaging": "^21.7.3",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/stack": "^6.4.1",
    "@reduxjs/toolkit": "^2.3.0",
    "expo": "~51.0.39",
    "expo-build-properties": "~0.12.5",
    "expo-dev-client": "~4.0.29",
    "expo-status-bar": "~1.12.1",
    "node-html-markdown": "^1.3.0",
    "react": "18.2.0",
    "react-native": "0.74.5",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-markdown-display": "^7.0.2",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-redux": "^9.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@rtk-query/codegen-openapi": "^2.0.0",
    "@types/react": "~18.2.79",
    "@typescript-eslint/eslint-plugin": "^8.11.0",
    "@typescript-eslint/parser": "^8.11.0",
    "eslint": "^8.57.0",
    "eslint-config-expo": "~7.1.2",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-native": "^4.1.0",
    "eslint-plugin-simple-import-sort": "^12.1.1",
    "ts-node": "^10.9.2",
    "typescript": "~5.3.3"
  },
  "private": true
}

firebase.json for react-native-firebase v6:

{
  "$schema": "./node_modules/@react-native-firebase/app/firebase-schema.json",
  "react-native": {
    "android_task_executor_maximum_pool_size": 1,
    "android_task_executor_keep_alive_seconds": 3,

    "analytics_auto_collection_enabled": false,
    "google_analytics_adid_collection_enabled": true,
    "google_analytics_ssaid_collection_enabled": true,
    "analytics_idfv_collection_enabled": true,
    "google_analytics_automatic_screen_reporting_enabled": true,
    "app_log_level": "debug"
  }
}

Environment

Click To Expand

react-native info output:

 OUTPUT GOES HERE

• 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.

[MichaelVerdon]

Which method exactly are you talking about? And the migration to Modular API is still a WIP in some areas which is something I am currently trying to refine so there is a chance some might not be implemented yet.

[pilotpirxie]

@MichaelVerdon

getMessaging(app)

[MichaelVerdon]

Can you try getMessaging without the casting?
const messaging = getMessaging(app);

[RaveloMevaSoavina]

any update here ?