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

[email protected]
[email protected]

[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)