diff --git a/packages/app/plugin/__tests__/androidPlugin.test.ts b/packages/app/plugin/__tests__/androidPlugin.test.ts index 20c20814cc..57d2ffa3b8 100644 --- a/packages/app/plugin/__tests__/androidPlugin.test.ts +++ b/packages/app/plugin/__tests__/androidPlugin.test.ts @@ -1,9 +1,14 @@ import fs from 'fs/promises'; import path from 'path'; -import { beforeAll, describe, expect, it } from '@jest/globals'; +import { beforeAll, describe, expect, it, jest } from '@jest/globals'; import { applyPlugin } from '../src/android/applyPlugin'; import { setBuildscriptDependency } from '../src/android/buildscriptDependency'; +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 () { let appBuildGradle: string; @@ -29,4 +34,59 @@ describe('Config Plugin Android Tests', function () { const result = applyPlugin(appBuildGradle); expect(result).toMatchSnapshot(); }); + + 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: ExpoConfig = 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(); + }); }); diff --git a/packages/app/plugin/__tests__/fixtures/application-example.ts b/packages/app/plugin/__tests__/fixtures/application-example.ts new file mode 100644 index 0000000000..c60f1936c7 --- /dev/null +++ b/packages/app/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; diff --git a/packages/app/plugin/__tests__/fixtures/expo-config-example.ts b/packages/app/plugin/__tests__/fixtures/expo-config-example.ts new file mode 100644 index 0000000000..c9aa9e1e27 --- /dev/null +++ b/packages/app/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; diff --git a/packages/app/plugin/src/android/index.ts b/packages/app/plugin/src/android/index.ts index 5b8c87369d..c556da70eb 100644 --- a/packages/app/plugin/src/android/index.ts +++ b/packages/app/plugin/src/android/index.ts @@ -1,5 +1,11 @@ import { withApplyGoogleServicesPlugin } from './applyPlugin'; import { withBuildscriptDependency } from './buildscriptDependency'; import { withCopyAndroidGoogleServices } from './copyGoogleServices'; +import { withExpoPluginFirebaseNotification } from './setupFirebaseNotifationIcon'; -export { withBuildscriptDependency, withApplyGoogleServicesPlugin, withCopyAndroidGoogleServices }; +export { + withBuildscriptDependency, + withApplyGoogleServicesPlugin, + withCopyAndroidGoogleServices, + withExpoPluginFirebaseNotification, +}; diff --git a/packages/app/plugin/src/android/setupFirebaseNotifationIcon.ts b/packages/app/plugin/src/android/setupFirebaseNotifationIcon.ts new file mode 100644 index 0000000000..0db28acc80 --- /dev/null +++ b/packages/app/plugin/src/android/setupFirebaseNotifationIcon.ts @@ -0,0 +1,81 @@ +import { ConfigPlugin, withAndroidManifest } from '@expo/config-plugins'; +import { ManifestApplication } from '@expo/config-plugins/build/android/Manifest'; +import { ExpoConfig } from '@expo/config-types'; + +/** + * Check if the developer has installed '@react-native-firebase/messaging' + * + * @return {boolean} + */ +function hasMessagingDependency(): boolean { + try { + require.resolve('@react-native-firebase/messaging'); + } catch (error) { + return false; + } + return true; +} + +/** + * 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 => { + const messagingInstalled = hasMessagingDependency(); + // If the developer is not using '@react-native-firebase/messaging', there is no need to do anything + if (!messagingInstalled) { + return config; + } + // If there is no need to build an Android program, there is no need to do anything + if (!config.android) { + return config; + } + 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) { + // 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) { + 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; +} diff --git a/packages/app/plugin/src/index.ts b/packages/app/plugin/src/index.ts index 441ef3967a..482071d391 100644 --- a/packages/app/plugin/src/index.ts +++ b/packages/app/plugin/src/index.ts @@ -4,6 +4,7 @@ import { withApplyGoogleServicesPlugin, withBuildscriptDependency, withCopyAndroidGoogleServices, + withExpoPluginFirebaseNotification, } from './android'; import { withFirebaseAppDelegate, withIosGoogleServicesFile } from './ios'; @@ -20,6 +21,7 @@ const withRnFirebaseApp: ConfigPlugin = config => { withBuildscriptDependency, withApplyGoogleServicesPlugin, withCopyAndroidGoogleServices, + withExpoPluginFirebaseNotification, ]); };