How to prevent first route to show on notification click in react-native

Question

I have implemented the push notification using react-native-push-nofication here is my push notification configuration.

const configure = () => {

 var _token

 PushNotification.configure({

   onRegister: function(token) {
     //process token

     //alert(JSON.stringify(token));
     Clipboard.setString(JSON.stringify(token))
   },

   onNotification: function(notification) {
     // process the notification
     // required on iOS only
     navigator.navigate(notification.data.url);
    // notification.finish(PushNotificationIOS.FetchResult.NoData);
   },

   senderID: Config.GCMSENDERKEY,

   permissions: {
     alert: true,
     badge: true,
     sound: true
   },

   popInitialNotification: true,
   requestPermissions: true,

 });
};

This code is navigating to the desire route successfully but when the application is in background, when user click on notification it shows the root route of the application (splash screen) before navigating to the desire route. I don't want splash screen to show up at all.

Answer 1

I just reviewed the library and I have to say, it's really bad designed. You should move to react-native-firebase.

But if you want to stay with it:

The first thing we have to figure out, is, how we can get the notification with which the app was opened?

We can't use onNotification from the Library, because we don't know when the callback will be called.

The library has a option popInitialNotification which will throw the initial notification with which the app was opened. If you search for this variable in the source code of the library you will find the following:

    if ( this.hasPoppedInitialNotification === false &&
            ( options.popInitialNotification === undefined || options.popInitialNotification === true ) ) {
        this.popInitialNotification(function(firstNotification) {
            if ( firstNotification !== null ) {
                this._onNotification(firstNotification, true);
            }
        }.bind(this));
        this.hasPoppedInitialNotification = true;
    }

As you can see, it will call a function named popInitialNotification(callback) with a callback function with the initial notification.

You can now use the function to get the initial notification.

PushNotification.popInitialNotification(function(notification) {

});

With this you have now access to the initial notification directly, without to wait for onNotification.

From here on you can use SwitchNavigator from react-navigation like in the following example: https://reactnavigation.org/docs/en/auth-flow.html