React-native-firebase: [Notification/Messaging] bigPicture & color in background/killed

[deathart]

Issue

Good morning, everyone,

Here I am trying to integrate notifications into my applications, until everything is fine,
I integrate a bigPicture & color and I have a problem:

In foreground, I'm no problem, but in background/killed I just have the title and the body that appears:

So already if the application is killed or in background, we can display a bigPicture? to know that the image of the bigPicture comes from my notification data (So with each notification it will change)

Translated with www.DeepL.com/Translator

Environment

1. Application Target Platform:

Android

1. Development Operating System:

macOS Sierra

1. Build Tools:

Android Studio

1. React Native version:

0.56.0

1. React Native Firebase Version:

4.3.7

1. Firebase Module:

Messaging, Notification, Analytics

1. Are you using typescript?

no

---

Loving react-native-firebase? Please consider supporting them with any of the below:

• 👉 Back financially via Open Collective
• 👉 Follow React Native Firebase and Invertase on Twitter
• 👉 Star this repo on GitHub ⭐️

[Salakar]

Bienvenue 🇫🇷

Pourriez-vous fournir un exemple du code que vous utilisez pour créer vos notifications à l'aide de l'option "BigPicture"?

---

Comme react-native-firebase et le support que nous fournissons? S'il vous plaît envisager de nous soutenir avec l'un des ci-dessous:

• 👉 Faire un don via [Open Collective] (https://opencollective.com/react-native-firebase/donate)
• Suivez-nous: React Native Firebase et Invertase sur Twitter
• 👉 Star ce référentiel sur GitHub ⭐️

[deathart]

Hey, super un français :p

Oui bien sur voici le code :

let notification = new firebase.notifications.Notification();
    notification = notification.setTitle(message.data.title).setBody(message.data.body).setData(message.data);

    notification.android.setPriority(firebase.notifications.Android.Priority.High);
    notification.android.setChannelId("gentside");

    if(message.data.bigPicture) {
      notification.android.setBigPicture(message.data.bigPicture);
    }
    if(message.data.smallPicture) {
      notification.android.setLargeIcon(message.data.smallPicture);
    }
    if(message.data.color) {
      notification.android.setColor(message.data.color);
    }

    firebase.notifications().displayNotification(notification);

Comme je disait c'est que en killed/background ça ne fonctionne pas mais en foreground, aucun soucis

j'ai essayer :

AppRegistry.registerHeadlessTask('RNFirebaseBackgroundNotificationAction', () => bgNotification);

firebase.messaging().onMessage((message) => {
    console.log(message);
    return displayNotification(message);
  });

Par contre il y à que onNotification qui est appeler

this.notificationListener = firebase.notifications().onNotification(message => {});

Merci à vous

[Salakar]

Comment envoyez-vous le message? De la console Firebase?

Les messages contenant une propriété 'notification' sont automatiquement gérés par le système d'exploitation Android en arrière-plan ou lorsque l'application est fermée.

Pour personnaliser entièrement la manière dont la notification est affichée en arrière-plan, vous devez envoyer uniquement des messages de données, puis créer la notification vous-même en fonction des champs de données que vous avez envoyés.

Voir ce lien pour une description des types de messages.

---

Messages containing a 'notification' property (e.g. ones sent from the Firebase console) are automatically managed by the Android operating system when the application is in the background or is closed.

To fully customize how the notification is displayed in the background, you must send data-only messages and then create the notification yourself based on the data fields that you have sent.

See this link for a description of the types of messages.

[deathart]

J'envoie via un script en NodeJS

      condition: null,
      data: {
          article: this.dataArticle.url,
          bigPicture: this.dataArticle.image,
          channelId,
          color: this.dataArticle.color
      },
      notification: {
        body: this.body,
        title: this.title
      },
      token: (type === 'token' && this.token) ? this.token : null,
      topic: (type === 'topic' && this.topic) ? this.topic : null

[deathart]

Le problème c'est que j'ai remarquer que :

AppRegistry.registerHeadlessTask('RNFirebaseBackgroundNotificationAction', () => bgNotification);

Est jamais appelé, donc je peux pas construire moi même la notification

[Salakar]

Oui c'est le problème si vous supprimez "notification" de la charge utile et mettez vos champs body ettitle dans l'objet de données, alors vous serez bien de créer une notification personnalisée avec une "BigPicture" dans votre "HeadlessTask"

Voir ce lien sur comment configurer correctement votre tâche:

https://rnfirebase.io/docs/v4.3.x/messaging/receiving-messages#4)-(Optional)(Android-only)-Listen-for-FCM-messages-in-the-background

---

Yes this is the problem if you remove "notification" from the payload and put your fields "body" and "title" in the data object, then you'll be fine to create a custom notification with a "BigPicture" in your "headless task"

See this link on how to properly setup your headless task:

https://rnfirebase.io/docs/v4.3.x/messaging/receiving-messages#4)-(Optional)(Android-only)-Listen-for-FCM-messages-in-the-background

[deathart]

Justement j'ai suivie, mais c'est toujours pareille voici mon bgNotification.js :

import firebase from 'react-native-firebase';

export default async (message) => {
    console.log("RemoteMessage", message);

    const newNotification = new firebase.notifications.Notification()
        .android.setChannelId(message.data.channel_id)
        .setNotificationId(message.messageId)
        .setTitle(message.data.title)
        .setBody(message.data.body)
        .setData(message.Data);

        if(message.data.bigPicture) {
            newNotification.android.setBigPicture(message.data.bigPicture);
          }
          if(message.data.smallPicture) {
            newNotification.android.setLargeIcon(message.data.smallPicture);
          }
          if(message.data.color) {
            newNotification.android.setColor(message.data.color);
          }

        firebase.notifications().displayNotification(newNotification)
    return Promise.resolve();
}

Est voici ce que j'envoie:

priority: 'high',
condition: null,
article: this.dataArticle.url,
bigPicture: this.dataArticle.image,
channelId,
body: this.body,
title: this.title,
token: (type === 'token' && this.token) ? this.token : null,
topic: (type === 'topic' && this.topic) ? this.topic : null

Le bigPicture s'affiche bien en foreground mais pas en background

[guitar9]

can you upload a simple project without google-services.json with your implementation of firebase to github? I dont get it run with android...

[deathart]

No impossible, it's private sources for a company. I'm sorry.

[guitar9]

mmh okay. can you look at my issue https://github.com/invertase/react-native-firebase/issues/1321 or create a new little example project with the implemtation of Notification?

Did you do these steps in this order?
https://rnfirebase.io/docs/v4.3.x/installation/initial-setup
https://rnfirebase.io/docs/v4.3.x/messaging/android
https://rnfirebase.io/docs/v4.3.x/notifications/android

or something else?

[deathart]

Yeah, I followed everything, and I just reviewed everything. It's OK.

[guitar9]

i did all steps, too. can you look at my issue?

[guitar9]

@deathart which sdk version do you use? which verison have you in compileSdkVersion and tagetSdkVersion in build.gradle?

[deathart]

My build.gradle :

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        google()
        jcenter()
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.3'
        classpath 'com.google.gms:google-services:3.2.1'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
}

ext {
    buildToolsVersion = "27.0.3"
    minSdkVersion = 16
    compileSdkVersion = 26
    targetSdkVersion = 26
    supportLibVersion = "26.1.0"
}

[deathart]

@guitar9 : Yes I have looked at your issue, but I do not know this problem I begin in react-native

[deathart]

In fact what I notice is that if the app is in killed/bakcground, it's that the next party is never called :

AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => bgMessaging);

[deathart]

Hi, still no idea?

[deathart]

Hi I found for the background, actually you have to go through https://fcm.googleapis.com/fcm/send is not firebase admin (JS node)

On the other hand the killed, I have the notification but I can not modify it

[venux92]

Did you succeed @deathart ? I have the same issue.
I can only display the bigPicture in the foreground

++++++++

Tu as réussi? car j'ai exactement le même problème.
Rien ne s'affiche quand l'app est en arrière plan ou fermée que si j'ai l'application ouverte.

[deathart]

Hi I found for the background, actually you have to go through https://fcm.googleapis.com/fcm/send is not firebase admin (JS node)

[venux92]

@deathart I'm already sending through FCM
Can you show me how you send the notification?
-- EDIT --
All good it's working now I wasn't setting up properly the channel on android.

[ranjan-m]

I'm also facing the same problem. HeadlessTask doesn't get called when notification is sent through FCM HTTP protocol. We are sending data only message as mentioned here.

[maggialejandro]

Sending a custom_notification like this using firebase-admin works for me when the app is killed

const message = {
  ...,
  data: {
    custom_notification: JSON.stringify({
      sound: 'default',
      lights: 'true',
      icon: 'ic_notif',
      image: 'ic_launcher',
      largeIcon: 'ic_launcher',
      smallIcon: 'ic_launcher',
      title: 'Title',
      body: 'Body',
      color: '#3f78c3',
      bigPicture:
        'https://t-ec.bstatic.com/images/hotel/max1024x768/626/62617148.jpg',
    }),
  },
};

[ranjan-m]

Yeah. It works as expected. We ran into some other issue which was hampering with this.

[meliodev]

Salut @deathart, je sais que ce problème date ^^. Mais s'il te plaît peux-tu me donner quelque directives pour résoudre ce problème. Merci et bonne journée !