@react-native-firebase/messaging 18.6.2 → 18.7.1

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [18.7.1](https://github.com/invertase/react-native-firebase/compare/v18.7.0...v18.7.1) (2023-11-29)
+
+**Note:** Version bump only for package @react-native-firebase/messaging
+
+## [18.7.0](https://github.com/invertase/react-native-firebase/compare/v18.6.2...v18.7.0) (2023-11-28)
+
+### Features
+
+- **messaging:** Adding support for Firebase Messaging via Expo config plugin. ([#7369](https://github.com/invertase/react-native-firebase/issues/7369)) ([34152ed](https://github.com/invertase/react-native-firebase/commit/34152edd189bc899e85cb4ceee92d44f1175a422))
+
 ## [18.6.2](https://github.com/invertase/react-native-firebase/compare/v18.6.1...v18.6.2) (2023-11-23)
 
 **Note:** Version bump only for package @react-native-firebase/messaging

package/app.plugin.js

@@ -0,0 +1 @@
+module.exports = require('./plugin/build');

package/lib/version.js

@@ -1,2 +1,2 @@
 // Generated by genversion.
-module.exports = '18.6.2';
+module.exports = '18.7.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-firebase/messaging",
-  "version": "18.6.2",
+  "version": "18.7.1",
   "author": "Invertase <oss@invertase.io> (http://invertase.io)",
   "description": "React Native Firebase - React Native Firebase provides native integration of Firebase Cloud Messaging (FCM) for both Android & iOS. FCM is a cost free service, allowing for server-device and device-device communication. The React Native Firebase Messaging module provides a simple JavaScript API to interact with FCM.",
   "main": "lib/index.js",
@@ -8,7 +8,9 @@
   "scripts": {
     "build": "genversion --semi lib/version.js",
     "build:clean": "rimraf android/build && rimraf ios/build",
-    "prepare": "yarn run build"
+    "build:plugin": "rimraf plugin/build && tsc --build plugin",
+    "lint:plugin": "eslint plugin/src/*",
+    "prepare": "yarn run build && yarn run build:plugin"
   },
   "repository": {
     "type": "git",
@@ -22,10 +24,19 @@
     "messaging"
   ],
   "peerDependencies": {
-    "@react-native-firebase/app": "18.6.2"
+    "@react-native-firebase/app": "18.7.1",
+    "expo": ">=47.0.0"
+  },
+  "devDependencies": {
+    "expo": "^49.0.20"
+  },
+  "peerDependenciesMeta": {
+    "expo": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8673f3162667f5fd9f942ccac24cecbd18a79aa3"
+  "gitHead": "f8b7794db23185c8a934a3e3623e996ce282c1f7"
 }

package/plugin/__tests__/androidPlugin.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { setFireBaseMessagingAndroidManifest } from '../src/android/setupFirebaseNotifationIcon';
+import { ExpoConfig } from '@expo/config-types';
+import expoConfigExample from './fixtures/expo-config-example';
+import manifestApplicationExample from './fixtures/application-example';
+import { ManifestApplication } from '@expo/config-plugins/build/android/Manifest';
+
+describe('Config Plugin Android Tests', function () {
+  it('applies changes to app/src/main/AndroidManifest.xml with color', async function () {
+    const config: ExpoConfig = JSON.parse(JSON.stringify(expoConfigExample));
+    const manifestApplication: ManifestApplication = JSON.parse(
+      JSON.stringify(manifestApplicationExample),
+    );
+    setFireBaseMessagingAndroidManifest(config, manifestApplication);
+    expect(manifestApplication['meta-data']).toContainEqual({
+      $: {
+        'android:name': 'com.google.firebase.messaging.default_notification_icon',
+        'android:resource': '@drawable/notification_icon',
+      },
+    });
+    expect(manifestApplication['meta-data']).toContainEqual({
+      $: {
+        'android:name': 'com.google.firebase.messaging.default_notification_color',
+        'android:resource': '@color/notification_icon_color',
+        'tools:replace': 'android:resource',
+      },
+    });
+  });
+
+  it('applies changes to app/src/main/AndroidManifest.xml without color', async function () {
+    const config = JSON.parse(JSON.stringify(expoConfigExample));
+    const manifestApplication: ManifestApplication = JSON.parse(
+      JSON.stringify(manifestApplicationExample),
+    );
+    config.notification!.color = undefined;
+    setFireBaseMessagingAndroidManifest(config, manifestApplication);
+    expect(manifestApplication['meta-data']).toContainEqual({
+      $: {
+        'android:name': 'com.google.firebase.messaging.default_notification_icon',
+        'android:resource': '@drawable/notification_icon',
+      },
+    });
+    expect(manifestApplication['meta-data']).not.toContainEqual({
+      $: {
+        'android:name': 'com.google.firebase.messaging.default_notification_icon',
+        'android:resource': '@drawable/notification_icon_color',
+        'tools:replace': 'android:resource',
+      },
+    });
+  });
+
+  it('applies changes to app/src/main/AndroidManifest.xml without notification', async function () {
+    const warnSpy = jest.spyOn(console, 'warn');
+    const config: ExpoConfig = JSON.parse(JSON.stringify(expoConfigExample));
+    const manifestApplication: ManifestApplication = JSON.parse(
+      JSON.stringify(manifestApplicationExample),
+    );
+    config.notification = undefined;
+    setFireBaseMessagingAndroidManifest(config, manifestApplication);
+    expect(warnSpy).toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+});

package/plugin/__tests__/fixtures/application-example.ts

@@ -0,0 +1,12 @@
+import { ManifestApplication } from '@expo/config-plugins/build/android/Manifest';
+
+/**
+ * @type {import('"@expo/config-plugins/build/android/Manifest"').ManifestApplication}
+ */
+const manifestApplicationExample: ManifestApplication = {
+  $: {
+    'android:name': '',
+  },
+};
+
+export default manifestApplicationExample;

package/plugin/__tests__/fixtures/expo-config-example.ts

@@ -0,0 +1,15 @@
+import { ExpoConfig } from '@expo/config-types';
+
+/**
+ * @type {import('@expo/config-types').ExpoConfig}
+ */
+const expoConfigExample: ExpoConfig = {
+  name: 'FirebaseMessagingTest',
+  slug: 'fire-base-messaging-test',
+  notification: {
+    icon: 'IconAsset',
+    color: '#1D172D',
+  },
+};
+
+export default expoConfigExample;

package/plugin/build/android/index.d.ts

@@ -0,0 +1,2 @@
+import { withExpoPluginFirebaseNotification } from './setupFirebaseNotifationIcon';
+export { withExpoPluginFirebaseNotification };

package/plugin/build/android/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withExpoPluginFirebaseNotification = void 0;
+const setupFirebaseNotifationIcon_1 = require("./setupFirebaseNotifationIcon");
+Object.defineProperty(exports, "withExpoPluginFirebaseNotification", { enumerable: true, get: function () { return setupFirebaseNotifationIcon_1.withExpoPluginFirebaseNotification; } });

package/plugin/build/android/setupFirebaseNotifationIcon.d.ts

@@ -0,0 +1,8 @@
+import { ConfigPlugin } from '@expo/config-plugins';
+import { ManifestApplication } from '@expo/config-plugins/build/android/Manifest';
+import { ExpoConfig } from '@expo/config-types';
+/**
+ * Create `com.google.firebase.messaging.default_notification_icon` and `com.google.firebase.messaging.default_notification_color`
+ */
+export declare const withExpoPluginFirebaseNotification: ConfigPlugin;
+export declare function setFireBaseMessagingAndroidManifest(config: ExpoConfig, application: ManifestApplication): ManifestApplication | ExpoConfig;

package/plugin/build/android/setupFirebaseNotifationIcon.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setFireBaseMessagingAndroidManifest = exports.withExpoPluginFirebaseNotification = void 0;
+const config_plugins_1 = require("@expo/config-plugins");
+/**
+ * Determine whether a ManifestApplication has an attribute.
+ */
+const hasMetaData = (application, metaData) => {
+    return application['meta-data']?.some(item => item['$']['android:name'] === metaData);
+};
+/**
+ * Create `com.google.firebase.messaging.default_notification_icon` and `com.google.firebase.messaging.default_notification_color`
+ */
+const withExpoPluginFirebaseNotification = config => {
+    return (0, config_plugins_1.withAndroidManifest)(config, async (config) => {
+        // Add NS `xmlns:tools to handle boundary conditions.
+        config.modResults.manifest.$ = {
+            ...config.modResults.manifest.$,
+            'xmlns:tools': 'http://schemas.android.com/tools',
+        };
+        const application = config.modResults.manifest.application[0];
+        setFireBaseMessagingAndroidManifest(config, application);
+        return config;
+    });
+};
+exports.withExpoPluginFirebaseNotification = withExpoPluginFirebaseNotification;
+function setFireBaseMessagingAndroidManifest(config, application) {
+    // If the notification object is not defined, print a friendly warning
+    if (!config.notification) {
+        // This warning is important because the notification icon can only use pure white on Android. By default, the system uses the app icon as the notification icon, but the app icon is usually not pure white, so you need to set the notification icon
+        // eslint-disable-next-line no-console
+        console.warn('For Android 8.0 and above, it is necessary to set the notification icon to ensure correct display. Otherwise, the notification will not show the correct icon. For more information, visit https://docs.expo.dev/versions/latest/config/app/#notification');
+        return config;
+    }
+    // Defensive code
+    application['meta-data'] ??= [];
+    const metaData = application['meta-data'];
+    if (config.notification.icon &&
+        !hasMetaData(application, 'com.google.firebase.messaging.default_notification_icon')) {
+        // Expo will automatically create '@drawable/notification_icon' resource if you specify config.notification.icon.
+        metaData.push({
+            $: {
+                'android:name': 'com.google.firebase.messaging.default_notification_icon',
+                'android:resource': '@drawable/notification_icon',
+            },
+        });
+    }
+    if (config.notification.color &&
+        !hasMetaData(application, 'com.google.firebase.messaging.default_notification_color')) {
+        metaData.push({
+            $: {
+                'android:name': 'com.google.firebase.messaging.default_notification_color',
+                'android:resource': '@color/notification_icon_color',
+                // @react-native-firebase/messaging will automatically configure the notification color from the 'firebase.json' file, setting 'tools:replace' = 'android:resource' to overwrite it.
+                // @ts-ignore
+                'tools:replace': 'android:resource',
+            },
+        });
+    }
+    return application;
+}
+exports.setFireBaseMessagingAndroidManifest = setFireBaseMessagingAndroidManifest;

package/plugin/build/index.d.ts

@@ -0,0 +1,3 @@
+import { ConfigPlugin } from '@expo/config-plugins';
+declare const _default: ConfigPlugin<void>;
+export default _default;

package/plugin/build/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_plugins_1 = require("@expo/config-plugins");
+const android_1 = require("./android");
+/**
+ * A config plugin for configuring `@react-native-firebase/app`
+ */
+const withRnFirebaseApp = config => {
+    return (0, config_plugins_1.withPlugins)(config, [
+        // iOS
+        // Android
+        android_1.withExpoPluginFirebaseNotification,
+    ]);
+};
+const pak = require('@react-native-firebase/messaging/package.json');
+exports.default = (0, config_plugins_1.createRunOncePlugin)(withRnFirebaseApp, pak.name, pak.version);

package/plugin/src/android/index.ts

@@ -0,0 +1,3 @@
+import { withExpoPluginFirebaseNotification } from './setupFirebaseNotifationIcon';
+
+export { withExpoPluginFirebaseNotification };

package/plugin/src/android/setupFirebaseNotifationIcon.ts

@@ -0,0 +1,77 @@
+import { ConfigPlugin, withAndroidManifest } from '@expo/config-plugins';
+import { ManifestApplication } from '@expo/config-plugins/build/android/Manifest';
+import { ExpoConfig } from '@expo/config-types';
+
+/**
+ * Determine whether a ManifestApplication has an attribute.
+ */
+const hasMetaData = (application: ManifestApplication, metaData: string) => {
+  return application['meta-data']?.some(item => item['$']['android:name'] === metaData);
+};
+
+/**
+ * Create `com.google.firebase.messaging.default_notification_icon` and `com.google.firebase.messaging.default_notification_color`
+ */
+export const withExpoPluginFirebaseNotification: ConfigPlugin = config => {
+  return withAndroidManifest(config, async config => {
+    // Add NS `xmlns:tools to handle boundary conditions.
+    config.modResults.manifest.$ = {
+      ...config.modResults.manifest.$,
+      'xmlns:tools': 'http://schemas.android.com/tools',
+    };
+
+    const application = config.modResults.manifest.application![0];
+    setFireBaseMessagingAndroidManifest(config, application);
+    return config;
+  });
+};
+
+export function setFireBaseMessagingAndroidManifest(
+  config: ExpoConfig,
+  application: ManifestApplication,
+) {
+  // If the notification object is not defined, print a friendly warning
+  if (!config.notification) {
+    // This warning is important because the notification icon can only use pure white on Android. By default, the system uses the app icon as the notification icon, but the app icon is usually not pure white, so you need to set the notification icon
+    // eslint-disable-next-line no-console
+    console.warn(
+      'For Android 8.0 and above, it is necessary to set the notification icon to ensure correct display. Otherwise, the notification will not show the correct icon. For more information, visit https://docs.expo.dev/versions/latest/config/app/#notification',
+    );
+    return config;
+  }
+
+  // Defensive code
+  application['meta-data'] ??= [];
+
+  const metaData = application['meta-data'];
+
+  if (
+    config.notification.icon &&
+    !hasMetaData(application, 'com.google.firebase.messaging.default_notification_icon')
+  ) {
+    // Expo will automatically create '@drawable/notification_icon' resource if you specify config.notification.icon.
+    metaData.push({
+      $: {
+        'android:name': 'com.google.firebase.messaging.default_notification_icon',
+        'android:resource': '@drawable/notification_icon',
+      },
+    });
+  }
+
+  if (
+    config.notification.color &&
+    !hasMetaData(application, 'com.google.firebase.messaging.default_notification_color')
+  ) {
+    metaData.push({
+      $: {
+        'android:name': 'com.google.firebase.messaging.default_notification_color',
+        'android:resource': '@color/notification_icon_color',
+        // @react-native-firebase/messaging will automatically configure the notification color from the 'firebase.json' file, setting 'tools:replace' = 'android:resource' to overwrite it.
+        // @ts-ignore
+        'tools:replace': 'android:resource',
+      },
+    });
+  }
+
+  return application;
+}

package/plugin/src/index.ts

@@ -0,0 +1,17 @@
+import { ConfigPlugin, withPlugins, createRunOncePlugin } from '@expo/config-plugins';
+import { withExpoPluginFirebaseNotification } from './android';
+
+/**
+ * A config plugin for configuring `@react-native-firebase/app`
+ */
+const withRnFirebaseApp: ConfigPlugin = config => {
+  return withPlugins(config, [
+    // iOS
+
+    // Android
+    withExpoPluginFirebaseNotification,
+  ]);
+};
+
+const pak = require('@react-native-firebase/messaging/package.json');
+export default createRunOncePlugin(withRnFirebaseApp, pak.name, pak.version);

package/plugin/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@tsconfig/node-lts/tsconfig",
+  "compilerOptions": {
+    "outDir": "build",
+    "rootDir": "src",
+    "declaration": true
+  },
+  "include": ["./src"]
+}