[expo-notifications] Push notification icon is a gray square/circle on One Plus

Summary of Issue

In a bare project, the push notification icon is a gray square instead of the app icon. This only has happened to me on One Plus devices (5T and 6T). Working fine on my Huawei and on iOS.

Environment

Platform: android

expo diagnostics:

Expo CLI 3.28.1 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.14.1 - /usr/local/bin/node
      Yarn: 1.21.1 - /usr/local/bin/yarn
      npm: 6.13.4 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.7.2 - /Users/accountable/.rvm/gems/ruby-2.6.3/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
      Android SDK:
        API Levels: 23, 26, 27, 28, 29
        Build Tools: 27.0.3, 28.0.0, 28.0.2, 28.0.3, 29.0.2, 29.0.3
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.6010548
      Xcode: 12.0.1/12A7300 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~39.0.2 => 39.0.3
      react: 16.13.1 => 16.13.1
      react-dom: 16.13.1 => 16.13.1
      react-native: ~0.63.3 => 0.63.3
      react-native-web: ~0.13.12 => 0.13.18
    npmGlobalPackages:
      expo-cli: 3.11.5
    Expo Workflow: bare

Reproducible Demo

Created this MCVE, change the experienceId according to your expo username.

https://github.com/clems36/demo-push-notif

Steps to Reproduce

• expo init
• select bare project
• expo install expo-notifications
• follow basic setup instructions from here: https://docs.expo.io/push-notifications/push-notifications-setup/
• yarn android (run on One Plus device)
• send push notif via curl command

I’ve tried setting useNextNotificationsApi: true and other notifications settings in app.json but this doesn’t seem to affect the bare workflow. In the past I wasn’t using Expo for push notifications and this piece of code did the trick:

android/app/src/main/java/com/evollu/react/fcm/SendNotificationTask.java

Resources res = mContext.getResources();
int smallIconResId = res.getIdentifier("ic_launcher", "mipmap", packageName);
            if(smallIconResId != 0){
                notification.setSmallIcon(smallIconResId);
            }

AndroidManifest.xml

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_launcher" />
    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/colorAccent" />

I found some related issues for the managed workflow but not for the bare workflow. I think the docs are not clear on how the icon is handled in the bare workflow.

Expected Behavior vs Actual Behavior

Expected behaviour would be for One Plus devices to behave like other android devices. Here’s the correct display on Huawei:

And here it is on One Plus:

Notice that the app icon is correctly displayed in the status bar though (still on One Plus):

[cruzach]

To customize your notification app icon and color on android, you should follow this guide here.

Android recommends making that statusbar notification icon all white with a transparent background, otherwise that exact behavior ( blank gray square/circle) can happen- https://developer.android.com/design/style/iconography.html#notification

So make sure the image for ic_stat_notifications in

<meta-data
      android:name="expo.modules.notifications.default_notification_icon"
      android:resource="@drawable/ic_stat_notifications" />

follows those guidelines

[TomasSestak]

To customize your notification app icon and color on android, you should follow this guide here.

Android recommends making that statusbar notification icon all white with a transparent background, otherwise that exact behavior ( blank gray square/circle) can happen- https://developer.android.com/design/style/iconography.html#notification

So make sure the image for ic_stat_notifications in

<meta-data
      android:name="expo.modules.notifications.default_notification_icon"
      android:resource="@drawable/ic_stat_notifications" />

follows those guidelines

The link is dead now 😦