How to handle expo push notification icon in 2022?

Question

As per documentation all you need to do is set some keys in app.json

In the managed workflow, set your notification.icon and notification.color keys in app.json, rebuild your app, and you're good to go!

For bare workflow and EAS Build users you need to configure plugins section:

"plugins": [
      [
        "expo-notifications",
        {
          "icon": "./local/assets/notification-icon.png",
          "color": "#ffffff",
          "sounds": [
            "./local/assets/notification-sound.wav",
            "./local/assets/notification-sound-other.wav"
          ]
        }
      ]
    ]

The only problem is that none of those solutions works, I thought that maybe the problem is with the icon because the docs also says that:

For your notification icon, make sure you follow Google's design guidelines (the icon must be all white with a transparent background) or else it may not be displayed as intended.

So I have tried with the standard expo adaptive-icon.png that is in the assets folder which is different than expo logo shown as the icon in the push notification but no, it did not work as well. Can someone please tell me how to do it? This is my app.json

{
  "expo": {
    "name": "my-app",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "privacy": "unlisted",
    "icon": "./assets/adaptive-icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#C3F458"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "config": {
        "googleMapsApiKey": "AIzaSyaAWAQ-4X_hhkQsczxr6oJFWbgeyidWEDasSczLxzlOE2xWNHeY8"
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#C3F458"
      },
      "config": {
        "googleMaps": {
          "apiKey": "AIzaSyaAWAQ-4X_hhkQsczxr6oJFWbgeyidWEDasSczLxzlOE2xWNHeY8"
        }
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "notification": {
      "icon": "./assets/adaptive-icon.png",
      "color": "#C3F458"
    },
    "plugins": [
      [
        "expo-notifications",
        {
          "icon": "./assets/adaptive-icon.png",
          "color": "#ffffff",
          "sounds": []
        }
      ]
    ]
  }
}

I have also tried to change the color in the schedulePushNotification handler in the component like so:

  async function schedulePushNotification() {
    await Notifications.scheduleNotificationAsync({
      content: {
        autoDismiss: false,
        color: "#AEDE2D",
        title: "hey",
        body: "hello",
        data: { data: "goes here" },
      },
      trigger: { seconds: 3 },
    });
  }

And despite I have set autoDismiss to false is disappears after a few seconds and id did not take the requested color. In my App.tsx above the component definition I have a function

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

like they are showing in the docs https://docs.expo.dev/versions/latest/sdk/notifications/ and than in the component i do import * as Notifications from "expo-notifications"; and I use it in the schedulePushNotification handler above, does it make a call to this same object?

Answer 1

1. Create a compatible icon here .
2. Put it in your assets folder.
3. Edit app.json

"notification": {
 "icon": "./assets/notif-icon.png",
 "color": "#fff"
},

4. Build your app!

Answer 2

I have exactly the same problem. Followed the docs, but no icon shows, even when built.

I also cannot get the notification to display on Android - I only get an update in the statusbar/tray