Push Notification Icon not working on Android

[jkstrawn]

Minimal reproducible example

https://github.com/jkstrawn/notify-genie

Summary

The push notification icon for my expo app shows up as a white circle on my Pixel 7 Android 13 phone. I've made a test project "Notify Genie" for demonstrating the issue.

Here is what the notification icon file looks like:

I'm sending the push notification through the FCM "Notification" type message. I understand this doesn't make use of the expo-notifications library, but I'm still using the library for setting channels and granting permission.

I'm setting the app icon in the app.config.ts file like this:

const assetUrl = "./src/assets/images";

{
...
    notification: {
        icon: `${assetUrl}/notification-icon.png`,
        color: "#5e71bc",
    },
...
}

The request I'm sending to FCM looks like this:

{
  "message": {
    "token": "fUJpTkIBR3yt3_lZIdRaMH:APA9...",
    "notification": {
      "title": "This is a default message",
      "body": "how does the icon look? 😢",
    }
  }
}

I'm testing by creating a build, downloading the app onto my phone, and sending the push notification request through FCM.

eas build -p android --profile alpha

I haven't seen anyone getting this particular icon issue, so I don't know if there's something funky about my particular app setup or what. The icon for the app itself works fine, it's only the notification icon that isn't working, and only on some of the phones that it's been tested on. I'm still working on compiling a list of working/not-working phones from my team, but at least for my particular phone the icon doesn't work.

Please let me know if there's any other information I should provide. Thank you

Environment

expo-env-info 1.0.5 environment info:
System:
OS: Windows 10 10.0.22621
Binaries:
Node: 18.0.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
npm: 8.6.0 - C:\Program Files\nodejs\npm.CMD
npmPackages:
@expo/webpack-config: ^19.0.0 => 19.0.0
expo: 49.0.8 => 49.0.8
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.72.5 => 0.72.5
react-native-web: ~0.19.0 => 0.19.9
Expo Workflow: managed

[chanphiromsok]

please check your applicationId and google-play-service.json have the same and device is register before push remote if you are using Expo Go is not possible please use prebuild

[jkstrawn]

@chanphiromsok If any of those weren't the case I wouldn't be receiving notifications at all, but I am.

[chanphiromsok]

@chanphiromsok If any of those weren't the case I wouldn't be receiving notifications at all, but I am.

Ahh sorry I didn't read issue clearly. How about other android device ?

• did you set up your app icon ?
• expo-notification I think it use for remote message and local message only if you are using firebase it will push from firebase internal native code you can not custom with expo notifications unless local push

[jkstrawn]

Yes I set up the app icon and the notification icon using the app.config.ts file. The app icon displays correctly, both the iOS and android adaptive icon. The notification icon is what is not working for some android phone. I'm not using expo-notifications for setting the icon, just for setting up notification channels.

My team has done some testing on their phones, so far a notification icon is visible for all iPhones and some androids. BUT even when an icon is showing on android phones, the "app icon" image is being displayed in the notification rather than the expo.notification.icon image as set in the app.config.ts file. So it appears as though the expo.notification.icon value isn't being used at all.

Here are the results from the testing:

• iPhone 11 / iOS 16.6.1 / shows app icon
• iPhone 12 / iOS 16.6.1 / shows app icon
• Galaxy s10 / Android 12 / shows app icon
• Galaxy S20 / Android 13 / shows app icon
• Pixel 5a / Android 13 / shows white circle
• Pixel 6 / Android 14 / shows white circle
• Pixel 7 / Android 13 / shows white circle
• Moto g Stylus / Android 11 / shows white circle

[josh-]

@jkstrawn we're running into the same situation as you are. were you able to make any further progress here?

we've also tried configuring the icon via the expo-notifications plugin (in addition to notification.icon), which hasn't seemed to have helped. for example:

[
  'expo-notifications',
  {
    icon: './assets/android-icon-transparent.png',
    color: '#FF0000',
  },
],

[drdpedroso]

@jkstrawn did you manage to work this out?

I'm also facing the same issue only on Pixel phones with Android 13

[josh-]

Yeah we're seeing this issue on Pixels, Motorola phones, Samsung phones and the Android Emulator.

We've also confirmed that the PNG is being successfully copied into the APK when building with EAS.

[jkstrawn]

@josh- @drdpedroso

No sorry, I haven't had time to figure it out yet. My plan was to try editing the manifest file using a custom config plugin to change the notification icon settings manually.

https://forums.expo.dev/t/how-to-edit-android-manifest-was-build/65663

https://github.com/expo/expo/tree/master/packages/expo-notifications#configure-for-android

[josh-]

interesting - thanks for the details @jkstrawn. when I analyze our built APK I can see the following values from our app config seemingly successfully being applied to the AndroidManifest.xml file:

<meta-data
    android:name="expo.modules.notifications.default_notification_color"
    android:resource="@ref/0x7f060135" />

<meta-data
    android:name="expo.modules.notifications.default_notification_icon"
    android:resource="@ref/0x7f080134" />

// ...

<meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@ref/0x7f060179" />

however I note there isn't a com.google.firebase.messaging.default_notification_icon entry which might be required?

[SidZadaun02]

facing the same issue

[josh-]

cc @cruzach @sjchmiela can see you've both done some work on android notification icons - wondering if either of you would have a hunch as to why this is occurring? 🙏

[SidZadaun02]

cc @jkstrawn
Hey, The issue you're experiencing seems to be related to the drawable you're using. Some devices, such as Pixel, may not support certain drawable formats like PNG or SVG. Instead, they might require drawables with a specific size, typically 24dp, in order to accommodate different resolutions.

To address this problem, you should convert your drawable to the appropriate format and size. Ensure that you have a 24dp version of the drawable available for different screen resolutions. This should help resolve the compatibility issues on devices like Pixel.

You can use this: https://romannurik.github.io/AndroidAssetStudio/icons-generic.html#source.type=image&source.space.trim=1&source.space.pad=0.05&size=45&padding=9&color=rgb(94%2C%2023%2C%20219)&name=ic_icon_75

to generate icon for your notifications.

[robcaldecott]

We're having the same issue and assumed that Expo would deal with all app icons automatically including notifications? We just supply a 1024x1024 PNG as the icon in our app.json and let Expo Build do its thing. I don't see anything in the Expo docs that explicitly mentions this could be a concern.

Happy to generate a custom icon just for Android notifications if anyone has specifics on what format is going to work across all Android versions/devices.

[josh-]

@SidZadaun02 I used that tool when debugging the same issue on my project, and still saw the white circle as illustrated in this issue when using icons generated from it.

@robcaldecott details are in the expo docs here. you can also observe how @jkstrawn has configured this in the reproducible example.

[SidZadaun02]

@josh- i was facing the same issue. I tried png and svg both put didn't work.

But after i make icon from android studio it work smoothly.

Step to make notification Icon :

1. Go to Resource Manager.
2. Click Plus Icon.
3. Click Image Asset.
   4.In Icon Type Select Notification Icon.

src="https://github.com/expo/expo/assets/119805008/964e8c3e-c420-4491-962b-252744e7b4c3"

[josh-]

@SidZadaun02 just tried your approach and I still see an empty icon.

I generated this icon from the Android Studio Resource manager (note that it's an all-white icon with transparency):

icon file here:

and then used this config in my expo app config:

  notification: {
    icon: './assets/notification-icon.png',
    color: '#faa200',
  },

  // ...

  plugins: [
    [
      'expo-notifications',
      {
        icon: './assets/notification-icon.png',
        color: '#faa200',
      },
    ],
  ],

and this is the result after sending a message via Firebase Cloud Messaging:

notifications panel	status bar

---

I've now tried many different permutations of icon files and none have worked so I'm fairly certain the issue is not related to the icon file itself, but must be another issue.

[SidZadaun02]

@josh- @jkstrawn just use transparent background icon, it will solve your problem.

[josh-]

@SidZadaun02 did you see the icon that I linked? it does have a transparent background. here is a screenshot of it being rendered in VS Code:

[robcaldecott]

Tried the icon tool linked above today and still get the generic circle icon. I'm out of ideas now.

[SidZadaun02]

This is my notification builder code ->

val notification = NotificationCompat.Builder(context, ContextCompat.getString(context,R.string.default_notification_channel_id))
.setSmallIcon(R.drawable.ic_notification3)
.setColor(ContextCompat.getColor(context,R.color.colorPrimary))
.setContentTitle(title)
.setContentText(message)
.setContentIntent(NotificationUtilses.getMainIntent(context, screen, ""))
.setAutoCancel(true)
.build()

This is my notification Icon ->

Working fine on all deveices

[josh-]

@SidZadaun02 that looks like native android code. this issue is specifically related to android notification icons when using expo and react native.

[robcaldecott]

OK, I have made this work (we use a custom development build via EAS build) and using the notification settings and NOT the expo-notifications plugin settings as it tells you in the docs. Used a PNG with a white logo and transparent background and it now works on my Android 14 Pixel 7a.

app.config.js

notification: {
  icon: "./assets/notification-icon.png",
  color: "#523BF5",
},

[josh-]

thanks for the datapoint @robcaldecott - I've just tried only setting the icon in the root notification property (and not the expo-notifications), and unfortunately still see the an empty circle after creating a new development build with that configuration.

[josh-]

just following up here - we were able to get this working in our app by using the new @react-native-firebase/messaging expo plugin (which is available from version 18.7.0).

  plugins: [
     '@react-native-firebase/app',
+    '@react-native-firebase/messaging',
  ],

this plugin reads the value from notification.icon and includes this icon in the com.google.firebase.messaging.default_notification_icon in the resulting android APK, which is then correctly shown for FCM messages sent to our app.

[techgerm]

@robcaldecott could you share what version of expo and expo-notifications you're on?

I've tried using the notification settings and/or the expo-notifications plugin settings and none seem to fix the problem for me. For reference, I'm on expo: 49.0.10 & expo-notifications: 0.20.1

[robcaldecott]

@robcaldecott could you share what version of expo and expo-notifications you're on?

I've tried using the notification settings and/or the expo-notifications plugin settings and none seem to fix the problem for me. For reference, I'm on expo: 49.0.10 & expo-notifications: 0.20.1

expo@49.0.11
expo-notifications@0.20.1

[techgerm]

@robcaldecott are you only relying on locally scheduled notifications?

For us, it seems locally scheduled notifications show the icon but when we send them remotely via expo push notification tool it doesn't work. I'm curious if you're seeing the same.

[robcaldecott]

We only use remotely pushed notifications.

[jkstrawn]

just following up here - we were able to get this working in our app by using the new @react-native-firebase/messaging expo plugin (which is available from version 18.7.0).

  plugins: [
     '@react-native-firebase/app',
+    '@react-native-firebase/messaging',
  ],

this plugin reads the value from notification.icon and includes this icon in the com.google.firebase.messaging.default_notification_icon in the resulting android APK, which is then correctly shown for FCM messages sent to our app.

I can confirm that this fixed the notification icon for us! Thank you @josh- for posting this solution.

[a-eid]

@jkstrawn @josh- how do you show notifications when the app is foregrounded ?

async function onMessageReceived(message: FirebaseMessagingTypes.RemoteMessage) {
  // what code goes here 
}

messaging().onMessage(onMessageReceived)
messaging().setBackgroundMessageHandler(onMessageReceived)

[jetaggart]

@josh- @jkstrawn I'm running into this issue as well. Do you use react-native-firebase/messaging for anything besides getting the icon to work? We don't currently use that and concerned it will cause issues.

[jetaggart]

@robcaldecott are you using react-native-firebase/messaging as well?

[luklapp]

Thanks @josh- , this seems to work :) I had the same issue when switching from FCM Legacy to FCM V1 (through expo-notifications).

@jetaggart If you don't want to install @react-native-firebase/messaging, you can probably just use a custom config plugin and copy & paste the config plugin from the package. I didn't try it yet, but it should do the job :)

[zxcodes]

@josh- @jkstrawn I'm running into this issue as well. Do you use react-native-firebase/messaging for anything besides getting the icon to work? We don't currently use that and concerned it will cause issues.

I wrote a config plugin to add the resource to AndroidManifest, here's the plugin:

const {AndroidConfig, withAndroidManifest} = require('@expo/config-plugins');

const withFirebaseMessagingNotificationIcon = config => {
  return withAndroidManifest(config, async config => {
    config.modResults = await setFirebaseMessagingConfig(
      config,
      config.modResults
    );
    return config;
  });
};

async function setFirebaseMessagingConfig(config, androidManifest) {
  // Ensure that the manifest has an application node
  const mainApplication =
    AndroidConfig.Manifest.getMainApplication(androidManifest);

  // Add the custom meta-data
  AndroidConfig.Manifest.addMetaDataItemToMainApplication(
    mainApplication,
    // value for android:name
    'com.google.firebase.messaging.default_notification_icon',
    // value for android:resource
    '@drawable/notification_icon',
    'resource'
  );

  return androidManifest;
}

module.exports = withFirebaseMessagingNotificationIcon;

Reference this in your app.config.js/ts:

plugins:[...existingPlugins, './withFirebaseMessagingNotificationIcon.js']

[jetaggart]

@luklapp I ended up doing that, thanks. It freaks me out a little bit cause I have all the firebase native code sitting in my project now, but I didn't configure anything so hopefully it doesn't mess anything up.

@zxcodes thanks for sharing that, I feel like expo really should include this since their package does not work out of the box.

[nhuthan]

@josh- @jkstrawn I'm running into this issue as well. Do you use react-native-firebase/messaging for anything besides getting the icon to work? We don't currently use that and concerned it will cause issues.

I wrote a config plugin to add the resource to AndroidManifest, here's the plugin:

const {AndroidConfig, withAndroidManifest} = require('@expo/config-plugins');

const withFirebaseMessagingNotificationIcon = config => {
  return withAndroidManifest(config, async config => {
    config.modResults = await setFirebaseMessagingConfig(
      config,
      config.modResults
    );
    return config;
  });
};

async function setFirebaseMessagingConfig(config, androidManifest) {
  // Ensure that the manifest has an application node
  const mainApplication =
    AndroidConfig.Manifest.getMainApplication(androidManifest);

  // Add the custom meta-data
  AndroidConfig.Manifest.addMetaDataItemToMainApplication(
    mainApplication,
    // value for android:name
    'com.google.firebase.messaging.default_notification_icon',
    // value for android:resource
    '@drawable/notification_icon',
    'resource'
  );

  return androidManifest;
}

module.exports = withFirebaseMessagingNotificationIcon;

Reference this in your app.config.js/ts:

plugins:[...existingPlugins, './withFirebaseMessagingNotificationIcon.js']

Thanks for sharing.
You can also add com.google.firebase.messaging.default_notification_color entry to set icon color

[expo-bot]

Thank you for filing this issue!
This comment acknowledges we believe this may be a bug and there’s enough information to investigate it.
However, we can’t promise any sort of timeline for resolution. We prioritize issues based on severity, breadth of impact, and alignment with our roadmap. If you’d like to help move it more quickly, you can continue to investigate it more deeply and/or you can open a pull request that fixes the cause.

[brentvatne]

@christopherwalter and @douglowder are working on this. sorry for the huge delay here, and thank you to everyone who managed to figure out great workarounds with config plugins for sharing those!

[marthinhaugeterki]

Same issue here. Icon is white and data object is empty, addNotificationResponseReceivedListener, and getLastNotificationResponseAsync not working
Android, expo sdk 50, "expo-notifications": "~0.27.7"

[krazykriskomar]

@josh- @jkstrawn I'm running into this issue as well. Do you use react-native-firebase/messaging for anything besides getting the icon to work? We don't currently use that and concerned it will cause issues.

I wrote a config plugin to add the resource to AndroidManifest, here's the plugin:

const {AndroidConfig, withAndroidManifest} = require('@expo/config-plugins');

const withFirebaseMessagingNotificationIcon = config => {
  return withAndroidManifest(config, async config => {
    config.modResults = await setFirebaseMessagingConfig(
      config,
      config.modResults
    );
    return config;
  });
};

async function setFirebaseMessagingConfig(config, androidManifest) {
  // Ensure that the manifest has an application node
  const mainApplication =
    AndroidConfig.Manifest.getMainApplication(androidManifest);

  // Add the custom meta-data
  AndroidConfig.Manifest.addMetaDataItemToMainApplication(
    mainApplication,
    // value for android:name
    'com.google.firebase.messaging.default_notification_icon',
    // value for android:resource
    '@drawable/notification_icon',
    'resource'
  );

  return androidManifest;
}

module.exports = withFirebaseMessagingNotificationIcon;

Reference this in your app.config.js/ts:

plugins:[...existingPlugins, './withFirebaseMessagingNotificationIcon.js']

OMG THANK YOU! I have been beating my head against the keyboard on this one!

[krazykriskomar]

@josh- @jkstrawn I'm running into this issue as well. Do you use react-native-firebase/messaging for anything besides getting the icon to work? We don't currently use that and concerned it will cause issues.

I wrote a config plugin to add the resource to AndroidManifest, here's the plugin:

const {AndroidConfig, withAndroidManifest} = require('@expo/config-plugins');

const withFirebaseMessagingNotificationIcon = config => {
  return withAndroidManifest(config, async config => {
    config.modResults = await setFirebaseMessagingConfig(
      config,
      config.modResults
    );
    return config;
  });
};

async function setFirebaseMessagingConfig(config, androidManifest) {
  // Ensure that the manifest has an application node
  const mainApplication =
    AndroidConfig.Manifest.getMainApplication(androidManifest);

  // Add the custom meta-data
  AndroidConfig.Manifest.addMetaDataItemToMainApplication(
    mainApplication,
    // value for android:name
    'com.google.firebase.messaging.default_notification_icon',
    // value for android:resource
    '@drawable/notification_icon',
    'resource'
  );

  return androidManifest;
}

module.exports = withFirebaseMessagingNotificationIcon;

Reference this in your app.config.js/ts:

plugins:[...existingPlugins, './withFirebaseMessagingNotificationIcon.js']

Thanks for sharing. You can also add com.google.firebase.messaging.default_notification_color entry to set icon color

I was so hopeful, but alas, this did not fix the issue. Icon still not showing :(

[krazykriskomar]

I have been banging my head against the keyboard with this one. Is there any workaround? The one above doesn't work for me. Is there any estimate of a fix? I'm on Expo 51.0.1 and it still doesn't work.

[brentvatne]

hey @krazykriskomar and others in this thread - @douglowder and @christopherwalter are currently investigating this. we're sorry that it took a long time to get to this. if the above fix isn't working for you, another option that is always available is to run npx expo prebuild -p android to generate the android directory and then modify it manually, following the android documentation. we'll keep folks updated. this issue and others are being tracked in #28656. another option to consider is to use onesignal, it is a fantastic service for notifications and they make it easy to use in your expo/react-native apps: https://documentation.onesignal.com/docs/react-native-expo-sdk-setup