React-native-fcm: [android] Cannot set custom notification icon

[namxam]

1. What version of RN and react-native-fcm are you running?
   11.2.0
2. What device are you using? (e.g iOS9 emulator, Android 6 device)?
   Android 8.0 (OnePlus 5)
3. Is your app running in foreground, background or not running?
   background / not running

I am trying to change the notification icon. But so far I have not been able to do that. I have read tons of articles about this, but I have no idea what's wrong with my setup. Everything else works as expected.

AndroidManifest.xml

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

The colour is actually working and I see the notification icons tinted:

But they do not have the expected shape. I tried several things.

• I tried to copy the icons from the firebase example project.
• I created custom icons and added them to mipmap and drawables

None of that worked so far. If anyone has an idea what might be wrong, I would be very happy for any hint / help. What's really weird is that android-shaped icon with the droid. I have no idea where that is coming from.

Icon sizes are according to those guides:

• https://developer.android.com/guide/practices/ui_guidelines/icon_design_status_bar.html
• http://iconhandbook.co.uk/reference/chart/android/

[evollu]

what is your notification payload?

[namxam]

My most recent test would be

{
  "to": "MYDEVICETOKEN",
  "notification": {
    "body": "Test from postman",
    "icon": "ic_notification"
  }
}

[namxam]

Ok, now I am getting:

E/FirebaseMessaging: Icon with id: 2131099780 uses an invalid gradient. Using fallback icon.
E/FirebaseMessaging: Icon with id: 2131361793 uses an invalid gradient. Using fallback icon.
W/FirebaseMessaging: Icon resource ic_notification not found. Notification will use default icon.

But I cannot find anything about how to solve it.

[evollu]

so you are using FCM's notification payload so FCM SDK will build it. You can send a help ticket to firebase team if you want to use notification object.
This library only builds notification when you use data object and use custom_notification.

Icon with id: 2131099780 uses an invalid gradient. I guess your icon is somewhat incompatible?

[namxam]

If someone else is encountering the issue, it seems to be related to android 8.0 and firebase-messaging > 11.6.0. I could not fix it, but this stackoverflow discussion has a suggestion how to fix it.

https://stackoverflow.com/questions/48137775/fcm-default-icon-uses-invalid-gradient

For now I have more important things to do, but this will be kept on my agenda and I will report any findings I will have.

[Titozzz]

There is effectively a bug with the version 11.8.0, just downgrade to 11.6.2

[jasperkuperus]

Had the same issue. Don't downgrade, you can upgrade all google/firebase dependencies to 15+. My list of dependencies:

force "com.google.firebase:firebase-messaging:15.0.2"
force "com.google.firebase:firebase-core:15.0.2"
force "com.google.android.gms:play-services-gcm:15.0.1"
force "com.google.android.gms:play-services-base:15.0.1"
force "com.google.android.gms:play-services-maps:15.0.1"
force "com.google.android.gms:play-services-auth:15.0.1"
force "com.google.android.gms:play-services-auth-api-phone:15.0.1"
force "com.google.android.gms:play-services-auth-base:15.0.1"
force "com.google.firebase:firebase-analytics:15.0.2"
force "com.google.firebase:firebase-invites:15.0.1"

I also had to update react-native-firebase to 4.2.0 in the process. Check out their releases page and go back to your version and work your way back to 4.2.0 with breaking changes and upgrade notes:

• https://github.com/invertase/react-native-firebase/releases

4.0.0 and 4.2.0 are the most important parts, containing information on upgrading gradle to 4.4. For me it wasn't directly clear I had to change all compile parts to implementation in android/app/build.gradle. Also. I had to add flavorDimensions after upgrading gradle:

• https://developer.android.com/studio/build/build-variants#flavor-dimensions

Last but not least. Check if your iOS build still works. I had to update cocoapods and some react-native-firebase initialization code.

But after that, my push icon worked :-)

[Definitely-Not-Vlad]

Faced this same issue while using 11.8.0 and lower on Android 8.0.

Using firebase 12.0.0 and google play services 12.0.0 resolved the issue.