react-native-push-notification icon indicating copy to clipboard operation
react-native-push-notification copied to clipboard

notification icon

Open mohamedadlyflyfox opened this issue 4 years ago • 3 comments

dear please any one faced this issue before ? in some android devices notification not show get grey color

mohamedadlyflyfox avatar Jul 08 '21 12:07 mohamedadlyflyfox

Hi @mohamedadlyflyfox,

I hope you have resolved this issue. However, In case someone comes across the same issue, here's the solution.

The issue is that, from Android Lollipop, "Notification icons must be entirely white" [1]. So you have to create entirely white notification icons using Android Studio or I use Ape Tools for this. Then you can set the color for the icon background using

PushNotification.localNotification({
...,
color: "red"
})

References:

  1. https://stackoverflow.com/questions/30795431/android-push-notifications-icon-not-displaying-in-notification-white-square-sh
  2. https://stackoverflow.com/questions/28387602/notification-bar-icon-turns-white-in-android-5-lollipop
  3. https://stuff.mit.edu/afs/sipb/project/android/docs/design/style/iconography.html
  4. https://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=clipart&source.clipart=ac_unit&source.space.trim=1&source.space.pad=0&name=ic_stat_ac_unit
  5. https://developer.android.com/studio/write/image-asset-studio#notification
  6. https://developer.android.com/about/versions/lollipop#Notifications
  7. https://material.io/design/platform-guidance/android-notifications.html#anatomy-of-a-notification
  8. https://stackoverflow.com/questions/28807121/android-icon-generator-for-actionbar-and-notification-not-working-grey-shape

Niweera avatar Jul 27 '21 20:07 Niweera

I have found the solutions to display the notification icon, if you are using @react-native-firebase/messaging & react-native-push-notification libraries to display the remote notification and local notification, please add the following lines to AndroidManifest.xml file:

<meta-data
            android:name="com.dieam.reactnativepushnotification.notification_color"
            android:resource="@color/ic_notification_color" />
<meta-data
            android:name="com.dieam.reactnativepushnotification.notification_icon"
            android:resource="@drawable/ic_notification" />

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

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

If you are using local notification then please add the smallIcon field in PushNotificationScheduleObject for example: Screenshot 2021-09-07 at 9 57 20 PM

NOTE: @drawable/ic_notification file must be follow the guidelines provide by Android Developer in link: http://spot.pcc.edu/~mgoodman/developer.android.com/preview/notifications.html Screenshot 2021-09-07 at 9 07 37 PM

You can apply the tint colour of notification icon by adding the field messaging_android_notification_color in firebase.json file like:

{
  "react-native": {
    "crashlytics_debug_enabled": true,
    "messaging_android_notification_color": "@color/ic_notification_color"
  }
}

aareusoftnet avatar Sep 07 '21 16:09 aareusoftnet

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

github-actions[bot] avatar Oct 21 '24 00:10 github-actions[bot]