React-native-firebase: Not getting callback to either onNotificationOpened or getInitialNotification()

[SkyTreasure]

Issue

I am sending the data payload as follows -

 {
    "to": "/topics/react_test",
    "priority" : "high",

    "data" : { 
           "title":"WednesdayWisdom",
           "type":"cod",
    } 
 }

I am receiving the notification in the bgMessaging.js and there I am creating the Notification() and pushing it into the tray. I am not getting any callback when user clicks on the notification.

Is this the right way of doing it or is there any other way ? Am i missing anything.

Here's the code for my bgMessaging.js

 // @flow
import RNfirebase from "react-native-firebase";
// Optional flow type
import type { RemoteMessage } from "react-native-firebase";

export default async (message: RemoteMessage) => {
  console.log("RECEIVED IN BG MESSAGING", message);

  const remoteInput = new RNfirebase.notifications.Android.RemoteInput(
    "inputText"
  );
  remoteInput.setLabel("Message");
  const action = new RNfirebase.notifications.Android.Action(
    "test_action",
    "ic_launcher",
    "My Test Action"
  );
  action.addRemoteInput(remoteInput);

  const notification = new RNfirebase.notifications.Notification();
  notification
    .setTitle(message.data.title)
    .setBody(message.data.type)
    .setNotificationId(message.data.type)
    .setSound("default")
    .android.setChannelId("autocaptions")

    .android.setBigPicture(
      message.data.notification_image,
      "https://www.google.co.in/images/branding/product/ico/googleg_lodp.ico",
      "test title 1",
      "test title 2"
    )
    .android.setClickAction(message.data.type)
    .android.setPriority(RNfirebase.notifications.Android.Priority.Max);

  // .android.addAction(action)

  await RNfirebase.notifications().displayNotification(notification);

  RNfirebase.notifications().onNotificationOpened(n => {
    console.log("BGonNotificationOpened: ", n);
    this.props.navigation.push("Featured");
  });

  RNfirebase.notifications().onNotification(n => {
    console.log("BGonNotification: ", n);
  });
  RNfirebase.notifications().onNotificationOpened(n => {
    console.log("BGonNotificationOpened: ", n);
  });
  RNfirebase.notifications().onNotificationDisplayed(n => {
    console.log("BGonNotificationDisplayed: ", n);
  });

  return Promise.resolve();
};

Environment

1. Application Target Platform:
   Android
2. Development Operating System:
   MacOS
3. Build Tools:
   VSCode
4. React Native version:
   0.55.3
5. React Native Firebase Version:
   4.3.0
6. Firebase Module:
   FCM CLoud Messaging and Notifications

---

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 ⭐️

[aMarCruz]

@SkyTreasure , try moving your onNotification* handlers out of bgMessaging

[SkyTreasure]

@aMarCruz I removed it.
I have a HomeScreen.jsx where i am subscribing to topic and in that file i have the below method in the componentDidMount() . From the documentation, if payload has only data module. It should call getInitialNotification() if i am right? But notificationOpen is null when i opened the notification.
```
firebase
.notifications()
.getInitialNotification()
.then((notificationOpen: NotificationOpen) => {
console.log("GET INITIAL NOTIFICATION CALLED,", notificationOpen);
if (notificationOpen) {

      console.log(
        "App was opened by a notification-",
        notificationOpen.action
      );

  });

```

[aMarCruz]

@SkyTreasure ,
I have never included RemoteInput in my notifications, nor custom actions. In a notification without these features and when the App is closed this is the life-cycle:

1. bgMessaging is called with the RemoteMessage
2. create local notification
3. user taps notification
4. App opens
5. getInitialNotification is fulfilled with the notification opened

Note: 1 y 2 is executed by Headless JS, but you can share 2 with regular App code.

With the App at the front:

1. onMessage is called with the RemoteMessage
2. create local notification
3. user taps notification
4. onNotificationOpened is called with the notification opened

So, bgMessaging can be something like this:

// bgMessaging.js
import { sendNotification } from './notificationHelpers'
export default sendNotification

Your onMessage handler must do the same:

// in App.js o whatever
import { sendNotification, handleNotification } from './notificationHelpers'
...
componentDidMount () {
  this.listeners = [
    firebase.messaging().onMessage(sendNotification),
    firebase.notifications().onNotificationOpened(handleNotification),
  ]

  // you can check the initial notification here
  firebase.notifications().getInitialNotification().then((data: NotificationOpen) => {
    if (data) {
      handleNotification(data, true)   // 2nd parameter can be useful
    }
  }
}

componentWillUnmount () {
  while (this.listeners.length) { this.listeners.pop()() }
}

The shared sendNotification must create the local notification and return a Promise,
handleNotification will receive the notification opened by the user:

// notificationHelpers.js
...
// shared by bgMessage & onMessage
export function sendNotification (message: RemoteMessage) {
  if (message.data) {
    // ... create and display notification
  }
  return Promise.resolve()  // for HeadlessJS
}

// shared by onNotificationOpened & getInitialNotification
export function handleNotification (data: NotificationOpen, initial?: boolean) {
  const { notification } = data
  if (notification) {
    // ... handle it
  }
}

If you are not reaching any of these points, your setup is incorrect. Check the RNF docs for both messaging and notifications.

I wrote this code on the fly and without testing, so they may have errors but follow the logic, it is simple.
Hope this help you.

ADDED:
Take into account that there is a brief moment, when the user opens and touches the notification, in which the App goes to the background. This usually does not affect, but it is better to know.

[SkyTreasure]

@aMarCruz Thanks for the reply.
I have implemented as you suggested and as per the documentation.

Here is my code snippet(App.jsx, componentDidMount())-

      .notifications()
      .getInitialNotification()
      .then((data: NotificationOpen) => {
        console.log("INITIALIZING NOTIFICATION - ", data);
        if (data) {
          handleNotification(data, true); // 2nd parameter can be useful
        } else {
          console.log("ELSE NOTIFICATION HANDLING ");
        }
      })
      .catch(err => {
        console.log("ERROR - NOTIFICATION ", err);
      });

The code is always hitting the else block i.e., the data is always null. That's the reason, it's not invoking handleNotification method.

The handleNotification function is exactly as per documentation and as what you've shared above. I just have a console.log inside the if(notification). But, the point is, its not even hitting that method, as data is null always(whether I open the app from app-icon or from notification)

Any pointers on what I am missing?

[naoey]

I've followed all the setup processes as described in RNF docs but can't seem to get onNotificationOpened or getIntialNotification to work either. I receive onNotification in which case when app is in the foreground nothing is displayed, so I create a local notification expecting onNotificationOpened to be executed when the user taps it, but absolutely nothing happens when tapped. The app opens but no callbacks are fired and the notification is not popped from the notification tray.

EDIT: Turns out I had to use a notification channel even though I'm using it on a device with Android 6.0.0 (23).

[aMarCruz]

@SkyTreasure , unfortunately the setup for all this is complex and the problem may be elsewhere. It would be better if you share a repo that reproduces the problem.

@naoey , this issue is related to conversion and display of notifications comming from _data-only_ messages but you are receiving notifications from the server, so please open another issue (I think it already exists).

[SkyTreasure]

@aMarCruz Hi i created a new firebase project and a new react-native app only to test this feature with the packages
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-firebase": "^4.3.0"

implementation "com.google.firebase:firebase-core:16.0.1"
implementation 'com.google.firebase:firebase-messaging:17.1.0'

I copied the same code from my main project to this sample project. Its working in Sample project but not in the Main project. All dependencies have the same version in both project and even the files are also same no change between the two project. But am unable to figure out what i am missing out in main project.

Any idea what could have gone wrong?

[aMarCruz]

@SkyTreasure no idea, but try deleting node_modules, android/.gradle, and android/app/build of the original project, then install with "yarn" and run "react-native run-android" again.

$ rm -rf $TMPDIR/react-* && watchman watch-del-all && cd android && ./gradlew clean
$ rm -rf node_modules && rm -rf android/.gradlew && rm -rf android/app/build
$ yarn && react-native run-android

[NikhilVerma]

@SkyTreasure Do you have any other activity apart from MainActivity as your screen? It's a possible reason for the intent to not be delivered to you.

[SkyTreasure]

@NikhilVerma No I don't have any other activity. I went on to create a new separate react-native project and moved all code to that! Kept all firebase version and all node dependencies same across both the project. Its working in new project and not in old project! Have no clue what's wrong.

[cx5168]

@SkyTreasure Did you turn off the issue because it solved the problem? How do I solve it? Thanks!

[SkyTreasure]

@cx5168 I closed the issue because I thought it was the problem with my project! I resolved it by creating new project with react-native init NewProjectName and then moving all code to that repo...

Try creating new project and import invertase and setup FCM and see if it works?

[SathishSaminathan]

Try this... https://github.com/invertase/react-native-firebase/issues/1108#issuecomment-427006332

[saurabh874]

@mikehardy and anybody have any solution for this.
i am also facing same issue in iOS only in release build.
this is my sample code
// If your app is in background

    this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen) => {
        badgeCount = 0;
        const { data } = notificationOpen.notification;
        firebase.notifications().setBadge(0);
        const campaignID = _.get(data, 'campaign_id', '');
        if (campaignID && campaignID !== '' && campaignID !== 'null') {
            this.handleCampaign(data);
        } else {
            this.handleContactDetail(data);
        }
        firebase.notifications().removeDeliveredNotification(notificationOpen.notification._notificationId);
    });

[mikehardy]

This is an issue from 2019. Open a new issue with full template details provided an an App.js we can drop into a test harness to reproduce. A skeleton project may be built with this: https://github.com/mikehardy/rnfbdemo/blob/master/make-demo.sh for reproduction purposes.

I will be clear though: on current stable versions this works for me in my project, I use these methods. So you will have a project-specific issue that I won't help with much. The idea is that in carefully attempting to reproduce you will see that it works and then hunt for the issue in your project (maybe not registering listeners before mounting your main component? listeners not async?). But on the off chance the library isn't working well then at least you'll have a reproduction and we may fix it