CODEWITHSUNDEEP
androidreact-nativepush-notificationicons
Nathan Dullea
Nathan Dullea

Reputation: 353

How to set android push notification color and icon?

I am using react-native, amplify, and pinpoint.

I have followed several guides and stack overflow questions to set the android default color and icon for push notifications like this:

<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/patch_coral" />

I have a file colors.xml inside of android/app/src/main/res/values/ with this content:

<resources>
    <color name="patch_coral">#E97A6E</color>
</resources>

And for the icon I have drawable folders inside of android/app/src/main/res/ which contain the ic_notification.png generated in android asset studio as white icons as was instructed in several places.

I have also tested with debug and release builds to see if that would change anything; however, the push notifications still do not have the default icon or color, but it does have the app icon on the right side. Here is an example:

current android push notification example

What needs to be changed or added to get the color and icon to replace the default android color, and square icon?

Upvotes: 2

Views: 14486

Answers (3)

Mujtaba Ali
Mujtaba Ali

Reputation: 23

For color just go to

node_modules@react-native-firebase\messaging\android\src\main\AndroidManifest.xml

Change

<meta-data android:name="com.google.firebase.messaging.default_notification_color"
  android:resource="${firebaseJsonNotificationColor}" />

To

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

Now head towards

node_modules@react-native-firebase\messaging\android\src\main\res\values\colors.xml

Add:

  <color name="notification_color">#008EFE <!-- Any Color Code --> </color>

Rebuild Your App and you're done

Upvotes: 0

fadi Mashan
fadi Mashan

Reputation: 111

First of all create your icon: - go to photoshop or https://pixlr.com/x/ and open new image (456*456 PX) - chose a black background (you can choose any color doesn’t meters, we will change it later from manifest - add the logo in the meddle

Like this

  • then cutout the logo (there is some tools with photoshop or pixlr to do this)
  • then save it as PNG)

Should look like this

Then go to manifest and choose the image as default notification icon and the color in default notification color that will wrok when the app in the background or killed Manifest

If you want to change to work when the app in foreground u should do this in your Firebase class

Firebase class

the results is: results

Upvotes: 5

Karan Dhillon
Karan Dhillon

Reputation: 1234

What you need is to send this data through your push-notification.

Then read this data from the push notification payload and apply it to the notification Builder.

Upvotes: 0

Related Questions