expo: Push Notification Icon not working on Pixel Android 13

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.

Screenshot_20231012-094746

Here is what the notification icon file looks like:

notification-icon

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

About this issue

Original URL
State: open
Created 9 months ago
Reactions: 6
Comments: 36

Most upvoted comments

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.

josh- on Dec 12, 2023

@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']

zxcodes on Mar 21, 2024

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

robcaldecott on Nov 23, 2023

@jkstrawn did you manage to work this out?

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

drdpedroso on Nov 17, 2023

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

jkstrawn on Oct 16, 2023

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.

jkstrawn on Feb 1, 2024

We only use remotely pushed notifications.

robcaldecott on Feb 1, 2024

@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

robcaldecott on Jan 31, 2024

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",
},

robcaldecott on Nov 24, 2023

@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

jkstrawn on Nov 20, 2023