How to customize icon of expo push notifications?

Question

I'm sending push notifications to an expo app, and I would like to customize the icon of the notification. How can this be done?

Privity

Answer 1

It can be set in app.json in Expo.

"notification"

Configuration for remote (push) notifications.

{
   "expo":{
      "name":"firstApp",
      "description":"firstApp",
      "slug":"firstApp",
      "privacy":"public",
      "sdkVersion":"31.0.0",
      "notification":{
         "icon":"./assets/images/iconPushNotification.png"
      },
      "ios":{
         "bundleIdentifier":"com.firstApp.firstApp"
      },
      "android":{
         "package":"com.firstApp.firstApp",
         "versionCode":1,
         "permissions":[
            ""
         ]
      },
      "platforms":[
         "ios",
         "android"
      ],
      "version":"1.0.0",
      "orientation":"portrait",
      "icon":"./assets/images/robot-prod.png"
   }
}

If your app is a stand-alone app,(use Expokit)

ExpoKit: To change the notification icon, edit or replace the shell_notification_icon.png files in android/app/src/main/res/mipmap-. On iOS, notification icons are the same as the app icon. All other properties are set at runtime.

Natty

I already did that but it does not work, and in addition I also did something in api { "to" => $ tokenOfMobile, "title" => $ message ['title'], "Icon" => $ path } nothing has changed – Privity

{ "expo": { "name": "firstApp", "description": "firstApp", "slug": "firstApp", "privacy": "public", "sdkVersion": "31.0.0", "notification": { "icon": "./assets/images/iconPushNotification.png" }, "ios": { "bundleIdentifier": "com.firstApp.firstApp" }, "android": { "package": "com.firstApp.firstApp", "versionCode":1 , "permissions":[""] }, "platforms": [ "ios", "android" ], "version": "1.0.0", "orientation": "portrait", "icon": "./assets/images/robot-prod.png", } – Privity

@zakitutu Please edit and post the questions so that you can see them – Natty

@zakitutu was this happening because u were in dev mode? Currently I am experiencing same problem but I haven't test this in production – Disembody

@zakitutu did you find a way to get the right icon for push notifications on iOS? Having same issue. – Cecilia

Having this issue with iOS, I publish the app to Test Flight and icon show is the expo icon. – Cecilia

Answer 2

I used expo-notification package for receiving notifications,

I needed to add extra configurations in the plugin section.

And also it needs to be all white and with transparent background.

"plugins": [
      [
        "expo-notifications",
        {
          "icon": "./assets/images/notification-icon.png"
        }
      ]
    ],

Veloz