🔥 messaging().onNotificationOpenedApp is never triggered, messaging().getInitialNotification() is triggered but remoteMessage is always null

[StefanoMartella]

Issue

I successfully registered a background handler with setBackgroundMessageHandler and everything works fine. Now I'm trying to handle notification tap when the app is in background/quit and I'm using onNotificationOpenedApp/getInitialNotification respectively. The problem I'm facing is that the first method is never triggered while the second is triggered but remoteMessage parameter is always null. I've also tried to generate a release build but the result is the same.

index.js

import React from 'react';
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import messaging from '@react-native-firebase/messaging';
import App from './src/App';

messaging().setBackgroundMessageHandler(async remoteMessage => {
  // storing the message with redux
});

function HeadlessCheck({isHeadless}) {
  return isHeadless ? null : <App />;
}

AppRegistry.registerComponent(appName, () => HeadlessCheck);

App.js

// other imports
import messaging from '@react-native-firebase/messaging';
import {store, persistor} from './Store';

export default function App() {
  useEffect(() => {
    (async () => await messaging().registerDeviceForRemoteMessages())();

    const unsubscribe = messaging().onMessage(async remoteMessage => {
      store.dispatch(storeNews(remoteMessage));
    });

    messaging().onNotificationOpenedApp(remoteMessage => {
      // The below code gets never executed
      Alert.alert('here');
      console.log(
        'Notification caused app to open from background state:',
        remoteMessage,
      );
    });

    messaging()
      .getInitialNotification()
      .then(remoteMessage => {
        console.log(remoteMessage); // always prints null
        if (remoteMessage) {
          // Never reached
          Alert.alert('here');
          console.log(
            'Notification caused app to open from quit state:',
            remoteMessage,
          );
        }
      });

    return unsubscribe;
  }, []);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <RootNavigator />
        </PersistGate>
      </Provider>
    </>
  );
}

---

Project Files

Javascript

Click To Expand

package.json:

{
  ...
  "@react-native-firebase/app": "^6.4.0",
  "@react-native-firebase/messaging": "^6.4.0",
  ...
}

react-native info:

#### `firebase.json` for react-native-firebase v6:

```json
# N/A

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:

System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 6.90 GB / 15.73 GB
  Binaries:
    Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.9.4 - C:\Users\user\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.1 - C:\Program Files\nodejs\npm.CMD
  SDKs:
    Android SDK:
    API Levels: 21, 22, 23, 24, 25, 26, 27, 28
    Build Tools: 23.0.1, 25.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
    System Images: Google APIs Intel x86 Atom, android-27
Intel x86 Atom
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.6010548
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5

• 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:
  • 6.4.0
• Firebase module(s) you're using that has the issue:
  • react-native-firebase/messaging
• Are you using TypeScript?
  • N

I tried to run the code on both a physical Android device and on an Android emulator and I got the same behaviour.

Physical device specs:

Model code: SM-G975F 
Android version: 10

Emulator specs:

Name: Nexus_5X_API_27_x86
Device: Nexus 5X (Google)
Path: C:\Users\user\.android\avd\Nexus_5X_API_27_x86.avd
Based on: Android API 27 Tag/ABI: google_apis/x86

I appreciate any help. Many thanks in advance.

---

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

[LucasGarcez]

Almost the same problems here. In IOS the onNotificationOpenedApp works on both state, background and quit. But on Android never work.
And getInitialNotification is always called if App is in Quit state, but I think that it's OK, because this method isn't a listener, so always the component is mounted it will be called. But the remoteMessage is always null, here are the problem :(

Using 6.4.0

How do you implemented the listener for notification interaction before the introduction this methods on version 6.4.0 ?

[StefanoMartella]

Before this version I was working with v5.5.5, there I was able to handle these behaviours throught notifications module. In particular, .notifications().getInitialNotification allowed me to manage the cold start and .notifications().onNotificationOpened the tap on the notification when the app was in background

[LucasGarcez]

Before this version I was working with v5.5.5, there I was able to handle these behaviours throught notifications module. In particular, .notifications().getInitialNotification allowed me to manage the cold start and .notifications().onNotificationOpened the tap on the notification when the app was in background

I'm thinking that I will have to go back do V5, two days working on that an nothing for now.

[LucasGarcez]

I find what cause my problem. I have in my app a config for native Splash Screen, implementation necessary to use the react-native-splash-screen package.

I added a news file called SplashActivity.java:

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        try {
            super.onCreate(savedInstanceState);
            Intent intent = new Intent(this, MainActivity.class);
            startActivity(intent);
            finish();
       }
        catch(Exception e) {
           System.out.println(e.getMessage());
       }
  }
}

I mande the SplashActivity my main Activity , in AndroidManifest.xml:

       <activity
          android:name=".SplashActivity"
          android:theme="@style/SplashTheme"
          android:label="@string/app_name">
          <intent-filter>
              <action android:name="android.intent.action.MAIN" />
              <category android:name="android.intent.category.LAUNCHER" />
          </intent-filter>
        </activity>
        
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize"
        android:exported="true" />

Then changes some logic on my MainActivity.java, that looks like :

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;
public class MainActivity extends ReactActivity {
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }
}

So the events are not passed correctly, more information about see this comments on issue #1272

• About problem on this comment: onNotificationOpened not working on Android (background/foreground) #1272 (comment)

My solution to this problem is pretty implementation specific, but you never know what might help.

My issue was that I had a splash activity which was the actual launcher activity. To get the callbacks to fire in App.js I had to:
Add "singleTop" to the activity tag for SplashActivity.java in AndroidManifest.xml
Use "this.getIntent();" within the onCreate method of SplashActivity.java to intercept the intent from the firebase notification open event
Use .getExtras() to take the bundle from the intercepted intent and attach it to a new intent forwarded to .MainActivity
As soon as .MainActivity had access to the intent all of the callbacks began firing on the correct events.

• Implementation to solve the problem on this comment: onNotificationOpened not working on Android (background/foreground) #1272 (comment)

So I added this logic on may SplashActivity:

        Bundle extras = getIntent().getExtras();
        if (extras != null) {
            intent.putExtras(extras);
        }

Now looks like:

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        try {
  //  Block of code to try
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);

        // Pass along FCM messages/notifications etc.
        Bundle extras = getIntent().getExtras();
        if (extras != null) {
            intent.putExtras(extras);
        }
        startActivity(intent);
        finish();
}
catch(Exception e) {
  //  Block of code to handle errors
  System.out.println(e.getMessage());
}
    }
}

Now I can get getInitialNotification() return and onNotificationOpenedApp() events.
On Android if the app is in background or quit state it's always calling getInitialNotification(), this is probably because my logic from Splash Screen. But for me it's OK for now, I would do exactly the same thing on both

[StefanoMartella]

You made my day. Same problem, your solution worked brilliantly. I think getInitialNotification() being always called is the wanted behaviour.

[mircoservices]

We are using https://github.com/zo0r/react-native-push-notification to emit local notifications (since its not part of this library) and expected that onNotificationOpenedApp would be able to handle these.

To make this work for iOS we simply added 'gcm.message_id': '123' to the userInfo and thus passed the necessary if statements of the native code.

On Android this is not as easy.. react-native-push-notification emits an intent similar to this:

{
  notification: {
    message: "My Notification Message", 
    message_id: "123" 
  }
}

But ReactNativeFirebaseMessagingModule expects message_id to be a key at the root-level of the Extras in the Intent.

Maybe this will help someone who also trys to integrate with react-native-push-notification.

[Ehesp]

@mirco312312 the problem is, if we don't check for a message_id then we'll be overriding everything that comes through on the device (even if it's nothing to do with FCM, like an APNs message, or one from react-native-push-notification).

[mircoservices]

Yap makes sense! Just wanted to note here, maybe somebody else wants to handle local notifications as well as firebase.

If there is an issue I think its on react-native-push-notification side since the local notifications payloads differ on Android and iOS.

[girish54321]

@LucasGarcez thanks worked form me i had SplashActivity so your same code worked for me too
thank you bro...
if any one has SplashActivity in there app plz try out this way.. @LucasGarcez

[jasperkuperus]

Awesome, thanks @LucasGarcez ! This worked for me.

I think a lot of people use react-native-splash-screen, so this might be worth a note in the documentation for getInitialNotification and onNotificationOpenedApp?

[andersonaddo]

@jasperkuperus your can go ahead and submit a PR using the edit button at the to of the doc pages. If you do, though, you should take note of this: #3894 (comment)

[jasperkuperus]

@andersonaddo Thanks for pointing that out! I'll givereact-native-bootsplash a shot soon. If indeed react-native-bootsplash is a better alternative nowadays, I will not edit the documentation to reflect the suggestion in this topic.

[andersonaddo]

@jasperkuperus I think regardless it couldn't hurt for the docs to talk about this a bit to prevent people from using react-native-splash-screen

[jasperkuperus]

@andersonaddo Alright, there we go: #3966

[kmanishk1]

Thank you so much @LucasGarcez Sir, was stuck on it for 2 days, thanks a lot again

[axeljeremy7]

I don't use react-native-splash-screen or react-native-bootsplash and the following methods onNotificationOpenedApp and getInitialNotification are never triggered, but onMessage and setBackgroundMessageHandler are fine. I am using react-native-notifications to show the notifications and the issue I am having is to show the notification when the app is closed.

[girish54321]

@axeljeremy7 you should try react-native-push-notification
react-native-notifications is not good and not well maintain

[superdopey]

I had the same problem on react-native 0.60.4. Upgrading to the latest react-native version 0.63.2 fixed the problem.

edit:
After the react-native upgrade onNotificationOpenedApp is working as intended. getInitialNotification() always return null.

This behavior is the same in a newly created RN (0.63.2) app. I will create a new issue for this.

[miketrinh1995]

I don't use react-native-splash-screen , any help?

[mikehardy]

All I can is I strongly recommend using react-native-boot-splash in order to do a boot screen
If you have something else going on where on android you pass control between Activities you need to pass the Intent Extras as well

[marquina-abreu]

@mikehardy thanks, it was that in the backend they were sending the push notification with 'send' and not with 'sendToDevice'.

[vijya76]

try {
  //  Block of code to try
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);

        // Pass along FCM messages/notifications etc.
        Bundle extras = getIntent().getExtras();
        if (extras != null) {
            intent.putExtras(extras);
        }
        startActivity(intent);
        finish();
}
catch(Exception e) {
  //  Block of code to handle errors
  System.out.println(e.getMessage());
}

What if I don't have a SplashScreen.java file but I'm still using react-native-splash-screen library.

[mikehardy]

To be clear, my opinion is that you should not under any circumstances use that library, and I will not address any issues that involve it. Switch to a maintained splash screen library that does not have documented failures. Why would you do anything with a library that has documented failures and is unmaintained? I simply do not understand that, and certainly don't have time to discover yet another problem with an unmaintained library, who does? https://github.com/zoontek/react-native-bootsplash

[OrkhanAlikhanov]

I am coming from docs. Sorry to ping you all. As of now, react-native-splash-screen library does not guide us to create separate SplashActivity.java. Entry point stays MainActivity.java. So, docs is false positive here.

[mikehardy]

That's nice that the old react-native-splash-screen library is finally doing that right but I can tell you which commit graph looks like a well maintained package and which doesn't - I'd still never use react-native-splash-screen now that bootsplash exists:

https://github.com/crazycodeboy/react-native-splash-screen/graphs/code-frequency

https://github.com/zoontek/react-native-bootsplash/graphs/code-frequency

[OrkhanAlikhanov]

@mikehardy I agree with you, another indicator is the issue count which is ~300 for react-native-splash-screen. 3 forbootsplash.

The issue is that we already have the react-native-splash-screen integrated and working without issues. Migrating to react-native-bootsplash is not that important right now for us. The urgency of migration that docs raised in my mind was false positive. That's all I wanted to point out.

[pamydev]

I was facing the same problem and I found a solution that solved all the problems for me and I'm still using react-native-splash-screen as it is already in production and refactor this part would not be productive for me at the moment.

The fact is that both messaging().onNotificationOpenedApp and messaging().getInitialNotification don't seem to work anymore, so I gave up trying to make it work and looked for another solution.

Then I realized that Notifee has methods that could help handle the user's click on the notification, whether the app is open (foreground), in the background or closed (quit).

First step - Quit state

To work we need to create the listener in index.js

// index.js

// ...
import notifee, {EventType} from '@notifee/react-native';
// ...
notifee.onBackgroundEvent(async ({type, detail}) => {
  if (type === EventType.PRESS) {
    global.toNotifications = true;
  }
});

However index.js does not have the power to change the state of the react application created by app.js, so the solution is to save any change that will be applied to the application when it is opened to a variable, in my case global.toNotifications, because when the user opens the app by clicking on a notification I want them to be taken to the notifications screen.

Now it is enough that when the application is assembled, the global variable is taken into account, in my case I called the method that checks the variable and applies the change of testNotifications() and called it in componentDidMount();

// app.js

async componentDidMount() {
    // ...

    this.testNotifications();
  }

 testNotifications() {
    if (global.toNotifications) {
   
   // your other logic here

      this.setState({
      // your new state here
      // or could be a react navigation as well
      // or whatever you use 
      });

      // disassemble the var to not 
      // reapply repeatably 
      global.toNotifications = false;
    } else {
      // do nothing (in my case) 
    }
  }

With this logic you good to go with open app from a quit state and manipulate their state.

Second step - background state

Background state is when the app is open but minimized. Here I use almost the same logic as the quit state, but I can't call the testNotifications function in componentDidMount since the app is already assembled. In this case, I use logic that uses the AppState of react-native.

// app.js

import {
  // ...
  AppState,
  // ...
} from 'react-native';

// other code ...

state = {
    // ...
    appState: AppState.currentState,
   // ...
  };

// componentDidMount:
 this.appStateUnsub = AppState.addEventListener(
      'change',
      this._handleAppStateChange,
    );

  // ...

 _handleAppStateChange = nextAppState => {
    if (
      this.state.appState.match(/inactive|background/) &&
      nextAppState === 'active'
    ) {
     // other logic of my application ...
     // in this case, app como to foreground, so:
        this.testNotifications();
      } catch (e) {}
    } else {
      // ...
      } catch (e) {}
    }
    try {
     
      this.state.appState = nextAppState;
    } catch (e) {}
  };

Third Step - Foreground state

For the foreground it is the simplest logic of all. Notifee already has a method to handle this, just implement it.

// app.js

// ...
import notifee, {EventType} from '@notifee/react-native';
// ...

// on componentDidMount...
notifee.onForegroundEvent(async ({type, detail}) => {
      if (type === EventType.PRESS) {
        global.toNotifications = true;
        this.testNotifications();
      }
    });

Conclusion

So, with this code I fix my notifications.
I hope this solution works for everyone who is having this problem and if this is indeed a satisfactory solution, that the notifee and react-native-firebase documentation can change their explanations to make it easier for everyone, as it was quite difficult to think of this solution without proper documentation.

[quicksilverr]

All I can is I strongly recommend using react-native-boot-splash in order to do a boot screen
If you have something else going on where on android you pass control between Activities you need to pass the Intent Extras as well

@mikehardy Shall we do this while using notifee?

[amitasort123]

Below replacement worked for me..

Refer: wix/react-native-notifications#884 (comment).

./android/app/build.gradle

dependencies {
    ...
    implementation project(':react-native-notifications')
    implementation platform('com.google.firebase:firebase-bom:31.1.1')
    implementation 'com.google.firebase:firebase-messaging'
    implementation 'com.google.firebase:firebase-analytics'
}  

[Darren120]

someone help when app is killed, getInitialNotification dont work, getLastNotificationResponseAsync dont work,

[eggybot]

someone help when app is killed, getInitialNotification dont work, getLastNotificationResponseAsync dont work,

After looking for solution to this issue, I decided to give-up and just utilize the setBackgroundMessageHandler. What I come-up is to use AsyncStorage to save the return data from setBackgroundMessageHandler. When notification click it will call the save data via AsyncStorage and use the data as configuration to redirect to the specific screen.

[budiadiono]

I have similar issue, even using react-native-bootsplash.

My workaround is to make sure that await messaging().requestPermission() resolved before calling onNotificationOpenedApp or getInitialNotification.

Here's my solutions -- by creating HoC component and call onNotificationOpenedApp or getInitialNotification in the WrappedComponent:

import { Component, ComponentType } from 'react';
import { LoaderScreen } from 'react-native-ui-lib';
import { messaging } from '@react-native-firebase/messaging';

export function withNotification<T extends WithNotificationProps>(
  WrappedComponent: ComponentType<T>
) {
  return class WithNotification extends Component<T, WithNotificationState> {
    state = {
      loading: true,
      allowNotification: false,
    };

    componentDidMount(): void {
      messaging().requestPermission()
        .then((authStatus) => {
          const allowed =
            authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
            authStatus === messaging.AuthorizationStatus.PROVISIONAL;

          this.setState({
            loading: false,
            allowNotification: allowed
          });
        })
        .catch(() => {
          this.setState({ loading: false });
        });
    }

    render() {
      return this.state.loading ? (
        <LoaderScreen />
      ) : (
        <WrappedComponent
          {...this.props}
          allowNotification={this.state.allowNotification}
        />
      );
    }
  };
}

export interface WithNotificationState {
  loading: boolean;
  allowNotification: boolean;
}

export interface WithNotificationProps {
  allowNotification?: boolean;
}

Not sure is this the best way, but it worked! 🙂

[suriya-hub]

I am not using splash screen what to do now?

[mikehardy]

@suriya-hub - examine how to use github formatting, specifically enclose your code in triple quotes with a keyword on the language. It is unreadable as it is now

// this is what a formatted code block should look like
if (formatted) {
  peopleMayReadAndHelpYou();
}

[cervebar]

We also hit this issue in 2024, app background is completely ok, but from app in quit (killed) state .getInitialNotification is null.

---

⚠️ EDIT ⚠️: we found what was causing this problem, so I'm keeping here this comment for somebody like us.

->
We had also dependency in our code for library react-native-notifications, which causes some mishmash for Android and we never get the initialNotification. Once removed working like a charm. 🙌

---

build.gradle:

dependencies {
    implementation platform('com.google.firebase:firebase-bom:32.7.0')
    implementation 'com.google.firebase:firebase-messaging'
    implementation 'com.google.firebase:firebase-analytics'
    implementation 'com.google.firebase:firebase-iid:21.1.0'

package.json:

    "@react-native-firebase/analytics": "18.7.3",
    "@react-native-firebase/app": "18.7.3",
    "@react-native-firebase/messaging": "18.7.3",

simplest code fragment:

const App = (): JSX.Element | null => {
  useNotifications()
...

export const useNotifications = (): void => {
  useEffect(() => {
    ;(async () => await messaging().registerDeviceForRemoteMessages())()

    const unsubscribe = messaging().onMessage(async (remoteMessage) => {
      console.log('onMessage', remoteMessage)
    })

    messaging().onNotificationOpenedApp((remoteMessage) => { // ok from background
      console.log('Notification caused app to open from background state:', remoteMessage)
    })

    messaging()
      .getInitialNotification()
      .then((remoteMessage) => {
        console.log('remoteMessage', remoteMessage) // always prints null
        if (remoteMessage) {
          // Never reached
          Alert.alert('here')
          console.log('Notification caused app to open from quit state:', remoteMessage)
        }
      })

    return unsubscribe
  }, [])
}

other context:

• "expo-splash-screen": "0.22.0", - we removed any splash screens and result is same
• Hermes enabled

Any help appreciated.🙏🏻

[D4uS1]

We also are still facing the issue that the result of getInitialNotification is null and onNotificationOpenedApp does not trigger. We are also using react-native-bootsplash and are not using react-native-notifications. Please re-open the issue since this seems to be still a problem.

Both does not work on iOS and Android.

[mikehardy]

sure, will probably need a minimal + fully self-contained App.js to reproduce, based on current versions of everything - https://stackoverflow.com/help/minimal-reproducible-example

[github-actions]

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 attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

[autimio]

Using react-native-notifications worked for me.

import { Notifications } from 'react-native-notifications';
Notifications.getInitialNotification().then(async remoteMessage => {}).catch(err => { console.error(err, 'err') })

[rajeevCs]

LucasGarcez

@LucasGarcez thank you so much , i was struggling with issues since last 2 days , your are a life saver man, thank