Nativescript-plugin-firebase: How to put a custom notification icon

[LakshmiEvana]

I send notifications to devices from website to respective tokens.Is there any way to put my custom icon while sending notification?

[deepak4u2006]

@LakshmiEvana Didi u got any solution for this?

[Aks659]

@LakshmiEvana , @deepak4u2006 . Looking for exact same thing :).
Did you find anything ?

[LakshmiEvana]

Noo

[Aks659]

@LakshmiEvana , @deepak4u2006 Looks like duplicate of #113

[erkanarslan]

It seems that you cannot use a random image from internet for notifications. It should exist in App Resources folder. Then, you can set icon when sending the push message to Firebase servers. This will only set small icon. For large icon, small icon will be used and a background color will be used. You can set this background color. However, if you send a data-only message, you can set small and big icons separately.

[Skintillion]

In App_Resources / Android

my_notification_image.png

PNG, BLACK BACKGROUND, WHITE FOREGROUND. NO OTHER COLORS.

In values/colors.xml AND values-v21/colors.xml

<resources>
  <!--Other color entries may exist here-->
  <color name="my_special_red">#FF0000</color>
</resources>

In AndroidManifest.xml

<application
  android:name="com.tns.NativeScriptApplication"
  android:allowBackup="true"
  android:icon="@drawable/icon"
  android:label="@string/app_name"
  android:theme="@style/AppTheme">
    <!-- INSERT THE FOLLOWING -->
    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/my_notification_image" />
    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/my_special_red" />
    <!-- END OF INSERT -->
    <activity
      android:name="com.tns.NativeScriptActivity"
      android:label="@string/title_activity_kimera"
      android:configChanges="keyboardHidden|orientation|screenSize"
      android:theme="@style/LaunchScreenTheme">

Keep in mind, Android will modify the color slightly to fit within their allowed colored parameters.

[Whip]

@Skintillion solution works. Just make sure you create your icons in the right format.

https://developer.android.com/guide/practices/ui_guidelines/icon_design_status_bar

[Tavohg16]

@EddyVerbruggen or someone, is there a way to send (using Firebase Cloud Functions) through the notification payload the url of the icon that you want to show on the notification for Android and iOS? And if there is, how can you show that icon using the url? For example, on the official firebase cloud function code samples is this, used to send a push notification to a device or a group of devices:

// Notification details.
      const payload = {
        notification: {
          title: 'You have a new follower!',
          body: `${follower.displayName} is now following you.`,
          icon: follower.photoURL
        }
      };

      // Listing all tokens as an array.
      tokens = Object.keys(tokensSnapshot.val());
      // Send notifications to all tokens.
      const response = await admin.messaging().sendToDevice(tokens, payload);

But I don't know how to handle the 'icon' property, on Android the default notifications icon that is set on the AndroidManifest.xml keeps showing. I haven't tested on iOS.

This is the code I'm using to handle the notification when the app is on foreground, but when I try to print the 'data' I just get JS: Data: [object Object].

firebase
      .init({
        persist: false,
        onMessageReceivedCallback: (message: Message) => {
          console.log(`Title: ${message.title}`);
          console.log(`Body: ${message.body}`);
          console.log(`Data: ${message.data}`);
        }
      })
      .then(
        () => {
          console.log('firebase.init done');
        },
        (error: any) => {
          console.log(`firebase.init error: ${error}`);
        }
      );

I found that I could use the nativescript-push-notifications plugin, but it is now deprecated.

[aranmohyeddin]

I just wanted to suggest everyone to generate their splashes with the following command:

tns resources generate splashes splash.png --background '#FFFFFF'

(replace #FFFFFF with your preferred background color)
where splash.png is a picture with transparent background.
then you can just use @drawable/logo to have the same image as your splash screen icon and notification icon.