Bring Android React Native App to Foreground On Receipt of Data Only Firebase Cloud Message

Question

I am successfully using Firebase Cloud Messaging with react-native-firebase to send and receive data only messages between Android devices.

When a device receives a message, if the app is in the background or has been killed I would like to bring the app to the foreground. I am getting notifications that will display a console.log() under both circumstances, but I'm having trouble figuring out how to best approach 'waking up' the app / bring it to the foreground:

  firebase.messaging().onMessage((message) => {
    // Process your message as required
    console.log('You got a message!', message);
  });
}

The above code is executed as expected under both circumstances.

Are there React Native packages I can look at to help achieve what I'm trying to do or should I be considering having to write some Java?

Update

I am trying to achieve something like this but not sure if it's possible to add code like this straight in to my React Native application?

Update 2

I have discovered this package react-native-invoke-app that uses HeadlessJS.

HeadlessJS requires you to use this code in your index.js:

AppRegistry.registerHeadlessTask('SomeTaskName', () => require('SomeTaskName'));

However Firebase Cloud Messaging already needs you to provide this line of code in the same place, which I'm guessing does the same thing as above:

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

Following the react-native-invoke-app docs I am then placing the call to invoke my app inside the firebase.messaging().onMessage((message)) callback like so:

firebase.messaging().onMessage((message) => {
    // Process your message as required
    invokeApp();
    console.log('You got message!', message);
  });
}

However this is not bringing my app to the foreground.

Update 3

I've now moved the invokeApp() call inside the Firebase backgroundNotificationListener function which is a headless task which seems like the correct approach:

import invokeApp from 'react-native-invoke-app';

const incomingMessage = async (message) => {
  // handle your message
  invokeApp();
  return Promise.resolve();
}
export default incomingMessage;

But the app will still not come to the foreground when the incomingMessage function is called.

Update 4

I have raised this issue on the react-native-invoke-app github page which has more details on the issues I'm facing.

Answer 1

The reason this doesn't work is that react-native-invoke-app doesn't support Android versions > 8. If anyone knows an alternative to this package please comment below, thank you.

Answer 2

instead of invokeapp(); you can describe a url scheme and to open the url related to that scheme, to make the app get opened and come in foreground.

ON Android:

add <data android:scheme=“my-awesome-app” /> intent in ./android/app/src/main/AndroidManifest.xml under the ` tag.

ON iOS

1. open your xcode, bring the iOS project up and open Info.plist file in xcode.

2. add URL types row under the root key, then add an item e.g: Item 0, then URL Schemes then an item with a string value. (in our example it's my-awesome-app). Just like the picture below

Now after setting things the url scheme up, now you can call it like this.

import {Linking} from 'react-native';

Linking.openURL('my-awesome-app://');

you can use it everywhere you'd like.

Answer 3

Using react-native-invoke-app should get the job done.

1. Make sure to have your AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => backgroundMessaging); on your root application component.
2. export the backgroundMessaging from whichever child component you have it in and import it to your app root component.
3. have the invokeApp() call inside the function in your child component, pretty much like what you have done.
4. Dont forget this for when the app is not running.

I have not tested this but i dont see a reason why it should not work.

Hope this Helps!