React-native-push-notification: Notification received while app is in background launches the app !

[ayeshq]

Hi I'm using react-native-push-notification latest build version, with react-native version 0.43.1.

I've installed and configured react-native-push-notification in my app exactly as documented, and everything works perfectly fine except for one thing that only happens on Android.

If the app receives a notification while is killed or has never been launched, the notification shows and launches the app at the same time !

Where should I look in my setup to fix this, I've double checked every step of the setup, and can't see where I've done something wrong !

Thanks

[jbolter]

I'm having the same issue. I thought I was doing something wrong but I can't seem to figure out what it is. I'm glad i'm not the only one... anyone have any ideas? I can confirm this is only an Android issue.

[jbolter]

I'm also using the wix-native-navigation package in case that has something to do with this. I'm not as familiar with Android as iOS but if anyone can point me in the right direction that would be much appreciated!

[JustinKasad]

It seems like there is a conflict with react-native-navigation.
https://github.com/wix/react-native-navigation/issues/566

RNN doesn't play nice with other components that start react context in background - we must address this asap and it will solve the issue. But this issue would have not surfaced if RNPN bothered to cleanup after its self by calling reactInstanceManager.destroy() after it finished handling incoming notifications in Js.

They recommend we switch to https://github.com/wix/react-native-notifications

[ayeshq]

@JustinKasad You're correct, using react-native-navigation along with react-native-push-notification is causing this issue, switching to wix react-native-notifications is the only available option I can think of at the moment :/

[noambonnie]

There is a solution without switching to react-native-notifications - https://wix.github.io/react-native-navigation/#/android-specific-use-cases?id=compatibility-with-headlessjs

[tmaly1980]

@noambonnie did you end up implementing that option? I'm having a tough time finding code samples.

[noambonnie]

@tmaly1980 I did. It works fine. One thing I noticed was that in some cases if the app was already in the background and then entered from tapping a notification, another instance of the app would get created. So I did something like this (keeping my comments deliberately - I'm not 100% sure whether my solution is correct):

let uiStarted = false;

...

// See handling Headless (required for BG notification handling):
// https://wix.github.io/react-native-navigation/#/android-specific-use-cases?id=compatibility-with-headlessjs
if (Platform.OS === 'android') {
    const appLaunched = await Navigation.isAppLaunched();
    if (appLaunched) {
        startUI(); // App is launched -> show UI
    }
    new NativeEventsReceiver().appLaunched(startUI); // App hasn't been launched yet -> show the UI only when needed.
}
else {
    startUI();
}

Then in startUI:

const startUI = (event) => {
    // Not sure what events NativeEventsReceiver gets, but this function gets called when tapping
    // a notification. So for a hack I am checking whether UI was started before and if so don't attempt
    // to start it again. Hack - I need to read more and understand why this is happening and whether
    // this is the correct solution.
    if (uiStarted) {
        return;
    }

    uiStarted = true;
    ...

    Navigation.startTabBasedApp(...)...
}

[tmaly1980]

@noambonnie where do you have your push notifications configure() and onNotification() ? in your index.js or somewhere else?

[noambonnie]

@tmaly1980 I gave up on this library and moved on to react-native-fcm :-( But there too - it was at the top of my App.js (essentially same as index.js).

I did see with the fcm library that they only set the notification handler at the top of the file, but other code (getting token, other listeners etc.) can happen later. I can't say I fully understand all that. But this seems to work ok now (Android as expected, iOS still some glitches when the app is killed/closed).

[tmaly1980]

@noambonnie

But how did you prevent the notification (merely being received, not necessarily clicking on it) from opening the app when it was closed?

The problem I'm seeing right now is that when I close my app after opening it, the notification gets received, but then it automatically opens the app, even though I didn't click on anything.

The code you have above only makes sure it doesn't launch the app multiple times - and that itself isn't necessary through the singleTop option in AndroidManifest.xml, from my understanding

[noambonnie]

@tmaly1980 I'm not sure I understand your question. I want notifications to open the app in the background (so I can process them). I just don't want the app to launch to the foreground. For that, the code provided by wix/react-native-navigation for Headless support works. "appLaunched" is a misleading name. It means app was explicitly launched by a user and should therefore come to the foreground.

[nadysaptra]

just add this on AndroidManifest.xml

<intent-filter> <action android:name="OPEN_MAIN_ACTIVITY" /> <category android:name="android.intent.category.DEFAULT" /> </intent-filter>

and add click_action: "OPEN_MAIN_ACTIVITY" on your fcm payload

{ "data": { "click_action": "OPEN_MAIN_ACTIVITY", "body": "Message body", "title": "Message title", "color": "#00ACD4", "priority": "high", "icon": "ic_notif", "show_in_foreground": "true", "id_progress": 1 }, "to": "<TOKEN>" }

And in App.js add this code outside class App blablabla {}

export function setupPushNotification(handleNotification) { PushNotification.configure({ onRegister: function (token) { Authentication.saveItem('fcm_token', token.token) Authentication.saveItem('fcm_os', token.os) console.log('NOTIFTOKEN:', token); }, onNotification: function (notification) { handleNotification(notification) }, // ANDROID ONLY: GCM or FCM Sender ID (product_number) (optional - not required for local notifications, but is need to receive remote push notifications) senderID: "<FCMID OR GCM>", permissions: { alert: true, badge: true, sound: true }, popInitialNotification: false, requestPermissions: true, }); return PushNotification }

and add this in App.js
async componentDidMount() { this.pushNotification = setupPushNotification(this._handleNotificationOpen) <--------- add this code }

add functions to below componentDidMount()

_scheduleCheckingNotification(notif) { this.pushNotification.localNotification({ /* Android Only Properties */ id: 0, ticker: notif.title, autoCancel: false, largeIcon: "ic_launcher", smallIcon: "ic_notification", bigText: notif.title, color: "green", // (optional) default: system default vibrate: false, // (optional) default: true vibration: 300, // vibration length in milliseconds, ignored if vibrate=false, default: 1000 tag: 'check_in_new_message', // (optional) add tag to message group: "group_checking", // (optional) add group to message ongoing: false, // (optional) set whether this is an "ongoing" notification id_progress: notif.id_progress, <--------- custom data from fcm payload /* iOS only properties */ message: notif.body, // (required) }); }
_handleNotificationOpen = (notif) => { PushNotification.cancelAllLocalNotifications() <------ cancelling all local notif so default notif from fcm is not showing this._scheduleCheckingNotification(notif) <------ run local notif to show dataa if (!notif.userInteraction) { this.pushNotification.setApplicationIconBadgeNumber(0); <--- this happens when notif received } else { if (notif.id_progress) { Actions.push('detail', { id: notif.id_progress }) <----- this happens when user click on notifications } } notif.finish(PushNotificationIOS.FetchResult.NoData); }

hope this helps someone in the future

[fadilhim]

Hi i'm currently having this issue, when app is in background and show localnotification it launch the app when i clicked on notification.
Is there any way to prevent app from launc ?
I'am using react-navigation