Two notification when use firebase v6 with react-native-push-notification

[enesozturk]

Issue

Hi! I am Enes. I am developing a mobile application with react-native-firebase. I migrate my application v5 to v6 with documentation in rnfirebase.io migration to v6. Everything is fine. I got notifications in foreground, background and quit states. But the issue for me is that;

1. In Quit State: Notification received.

• Problem 1: It just displaying in status bar, not from top of the phone
• Problem 2: When press the notification, launches the app but getInitialNotification not returning the notification message, it returns null

2. Background State: Same with Quit State. Just displayed in status bar. When I press the notification, remoteMessage is null in getInitialNotification
3. Foreground State: Notification received in messaging().onMessage() method. But not displayed on status bar or anywhere else.

So I decided to use https://rnfirebase.io/migrating-to-v6 with rn-firebase v6 as you suggested here

I used PushNotification.localNotification() method. That resolved the issue little bit. But another issue happened. This time it shows me two notification in status bar. But displays the notification by the way from top.

Some code snippets from my app;

In App.js file, I use setBackgroundMessageHandler as you suggested in documentation.

const showNotification = notification => {
    PushNotification.localNotification({
      title: 'Title',
      message: 'Body',
    });
  };

  useEffect(() => {
    messaging()
      .getInitialNotification()
      .then(response => {
        console.log('Message handled in the getInitialNotification!', response);
        if (response) showNotification(response);
      });

    messaging().onNotificationOpenedApp(async remoteMessage => {
      console.log('Message handled in the quit state!', remoteMessage);
      showNotification(remoteMessage);
    });

    const unsubscribe = messaging().onMessage(async remoteMessage => {
      // When app in foreground
      console.log('Message handled in the foregroud!', remoteMessage);
      showNotification(remoteMessage);
    });

    return () => {
      return unsubscribe;
    };
  }, []);

and

in main index.js file

messaging().setBackgroundMessageHandler(async remoteMessage => {
  console.log('Message handled in the background!', remoteMessage);
  PushNotification.localNotification({
    title: 'Title',
    message: 'Notification body in setBackgroundMessageHandler',
  });
});

Most of the code snippets are guided from documentation. Not specific code here.

I totally messed up. Any reference and guide for this setup (react-native-firebase + react-native-push-notification) or any other suggestion would be great.

Thanks in advance.

Project Files

Javascript

Click To Expand

package.json:

# N/A

firebase.json for react-native-firebase v6:

{
  "react-native": {
    "messaging_android_notification_channel_id": "@string/notification_channel_id",
    "messaging_android_notification_color": "@color/white"
  }
}

iOS

Click To Expand

ios/Podfile:

• I'm not using Pods
• I'm using Pods and my Podfile looks like:

# N/A

AppDelegate.m:

// N/A

---

Android

Click To Expand

Have you converted to AndroidX?

• my application is an AndroidX application?
• I am using android/gradle.settings jetifier=true for Android compatibility?
• I am using the NPM package jetifier for react-native compatibility?

android/build.gradle:

// N/A

android/app/build.gradle:

// N/A

android/settings.gradle:

// N/A

MainApplication.java:

// N/A

AndroidManifest.xml:

<!-- N/A -->

---

Environment

Click To Expand

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• react-native-firebase version you're using that has this issue:
  • e.g. 6.4.0
• Firebase module(s) you're using that has the issue:
  • e.g. Instance ID
• Are you using TypeScript?
  • N

---

• 👉 Check out React Native Firebase and Invertase on Twitter for updates on the library.

[foxfl]

The two notifications arrive as the OS of your phone handles any Push notification which includes the notification tag.
So, for a message containing

{
 "notification": {
    "title":"Test",
     "body":"Test",
   }
}

The OS will present the user with this notification. Then either onMessage or setBackgroundMessageHandler will be triggered, depending on the application state. In both you present the user a local notification. So, it’s just natural the you currently have two notifications.

If you do not want your push notification to be handled by the OS, just send a data message without the notification tag.

{
 "data": {
    "title":"Test",
     "body":"Test",
   }
}

Here, you would additionally need to set the priority to high / contentAvailable to true when sending the notification

// Required for background/quit data-only messages on iOS
contentAvailable: true,
// Required for background/quit data-only messages on Android
priority: 'high',

You can read more about that here: https://firebase.google.com/docs/cloud-messaging/concept-options

For your questions 2: I'm currrently facing a similar issue there.
For Question 3: Thats normal behavior . Remote Noficiations are not presented by the OS if the app is in foreground. This can be solved using local notifications.

[enesozturk]

Thanks @foxfl, it is now cleaner for me. Two notification problem fixed with "data" object.

Still get null on launched app and trying to solve. What is the point of using notifications if I cannot solve this..

[enesozturk]

Sending message with "data" tag not solved probably. In the foreground state, app returns twice the message handler, so I see two notification from top;

 LOG  Message handled in the foregroud! {"data": {"Nick": "Mario"}, "from": "1068519097680", "messageId": "0:1587644497370507%dbbd67c0f9fd7ecd", "sentTime": 1587644497358, "ttl": 2419200}
 LOG  Message handled in the foregroud! {"data": {"Nick": "Mario"}, "from": "1068519097680", "messageId": "0:1587644497370507%dbbd67c0f9fd7ecd", "sentTime": 1587644497358, "ttl": 2419200}

[foxfl]

Yeah, having a similar issue, described here #3514. I only send data messages and generate local messages through react-native-push-notifications. But none of the callbacks, from any of the libraries are triggered when a user clicks on a notification a launches/resumes to the app.

Are you sending through FCM console or through a SDK/REST? Because on FCM console you cannot send data only messages.

[enesozturk]

Sending message with "data" tag not solved probably. In the foreground state, app returns twice the message handler, so I see two notification from top;

 LOG  Message handled in the foregroud! {"data": {"Nick": "Mario"}, "from": "1068519097680", "messageId": "0:1587644497370507%dbbd67c0f9fd7ecd", "sentTime": 1587644497358, "ttl": 2419200}
 LOG  Message handled in the foregroud! {"data": {"Nick": "Mario"}, "from": "1068519097680", "messageId": "0:1587644497370507%dbbd67c0f9fd7ecd", "sentTime": 1587644497358, "ttl": 2419200}

Edit:
Probably problem in the return of App component's useEffect hook;
I changed this

const unsubscribe = messaging().onMessage(async remoteMessage => {
      // When app in foreground
      console.log('Message handled in the foregroud!', remoteMessage);
      showNotification(remoteMessage);
    });

return () => {
   return unsubscribe;
};

to this;

const unsubscribe = messaging().onMessage(async remoteMessage => {
      // When app in foreground
      console.log('Message handled in the foregroud!', remoteMessage);
      showNotification(remoteMessage);
 });

return unsubscribe;

And twice notification problem resolved.

[enesozturk]

Yeah, having a similar issue, described here #3514. I only send data messages and generate local messages through react-native-push-notifications. But none of the callbacks, from any of the libraries are triggered when a user clicks on a notification a launches/resumes to the app.

Are you sending through FCM console or through a SDK/REST? Because on FCM console you cannot send data only messages.

Yes I realized that when I try to send data message in Firebase Console. I am using REST in Django with this package.

[foxfl]

Have to mention: The callback problem is only on iOS for me. On Android everything works as expected. I'm using the latest @next tag on NPM. which is version 6.4.1-alpha.0

You could try to update the version of react-native-firebase.

[enesozturk]

Have to mention: The callback problem is only on iOS for me. On Android everything works as expected. I'm using the latest @next tag on NPM. which is version 6.4.1-alpha.0

You could try to update the version of react-native-firebase.

It is weird. I updated both app and messaging packages to 6.7.0 but still getting null in getInitialNotification on Android. Not tried in iOS because I want to resolve this first.

Edit 1: [email protected] not worked as well. Return null in getInitialNotification when I press the notification. Do I missing something?

[enesozturk]

This notification issue completely takes me away from React Native. There should not be so much gap on such an important issue. There is no proper documentation.

[kurroo10]

This notification issue completely takes me away from React Native. There should not be so much gap on such an important issue. There is no proper documentation.

did you solve your problem ?

[Ehesp]

This notification issue completely takes me away from React Native. There should not be so much gap on such an important issue. There is no proper documentation.

Welcome to OSS.

We've setup a test app on our org, just need assign one of the team some time to install various modules to cross test integration. It's looking like it'll be next week though.

[enesozturk]

This notification issue completely takes me away from React Native. There should not be so much gap on such an important issue. There is no proper documentation.

did you solve your problem ?

I could not solve the problem. Looks like I will not able to. I removed firebase totally from the project and tried OneSignal. It is really impressive. All the problems solved in easier way. You should give it a try.

[mrrazahussain]

I am facing exactly same issue,
onNotificationOpenedApp never trigger.
getInitialNotification always return null.

I have tried all possible combination of data only, data+notification and notification only.

[mrrazahussain]

I got getInitialNotification working from this link #3469 (comment). There are some modifications in splash screen activity

[stale]

Hello 👋, to help manage issues we automatically close stale issues.
This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[enesozturk]

Issue is still require the community's attention for future visitors and users.

[RishavKumar-3796]

Please don't use react native splash screen if you are facing issue in notification or add

import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        intent.putExtras(getIntent().getExtras());  
        startActivity(intent);
        finish();
    }
}

in SplashActivity.java

[engtom]

What worked for me and fixed the multiple notifications problem was remove the other previous services (from react-native-firebase v5 configuration) from manifest and add this one:

<service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService" android:exported="false" > <intent-filter> <action android:name="com.google.firebase.MESSAGING_EVENT" /> </intent-filter> </service>

in AndroidManifest.xml

[mohity777]

if i

What worked for me and fixed the multiple notifications problem was remove the other previous services (from react-native-firebase v5 configuration) from manifest and add this one:

<service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService" android:exported="false" > <intent-filter> <action android:name="com.google.firebase.MESSAGING_EVENT" /> </intent-filter> </service>

in AndroidManifest.xml

if i use this then messaging().onNotificationOpenedApp() and messaging()
.getInitialNotification() are not fired and clicking on notification when app is in background or quit, does not open/launch the app
i am using react-native-push-notification with cloud messaging v6. Any solution??

[stale]

Hello 👋, to help manage issues we automatically close stale issues.
This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[AbhiSri2020]

In my case, this was due to hot-reloading.
I was initializing it on ComponentDidMount() as:

componentDidMount() { messaging().onMessage( remoteMessage => {} ) }

So every time I do a hot reload it gets re-registered and show multiple notifications.

Just restart the app and it will work fine.

Make sure to Unsubscribe on unmount.