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












2















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.










share|improve this question





























    2















    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.










    share|improve this question



























      2












      2








      2








      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.










      share|improve this 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.







      reactjs react-native react-native-push-notification






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 21 '18 at 9:34







      Ahsan Sohail

















      asked Nov 21 '18 at 8:30









      Ahsan SohailAhsan Sohail

      421312




      421312
























          1 Answer
          1






          active

          oldest

          votes


















          0














          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






          share|improve this answer
























          • Where do i write this code inside PushNotification.configure or anywhere else in my code?

            – Ahsan Sohail
            Dec 2 '18 at 6:42











          • plus the library you mentioned react-native-firebase can i use this to get push notification on IOS and android both?

            – Ahsan Sohail
            Dec 2 '18 at 6:42











          • Outside of PushNotification.configure. Put it there where you display the splash screen.

            – Patrick Wozniak
            Dec 3 '18 at 11:34











          • Yes, with react-native-firebase you can use both platforms.

            – Patrick Wozniak
            Dec 3 '18 at 11:34











          • unfortunately it showing me the same behaviour.. my problem is not getting the notification object.. my problem was that it showing the root screen of stack before navigating i don't want that i want to directly navigate to the desire screen

            – Ahsan Sohail
            Dec 4 '18 at 7:12











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407948%2fhow-to-prevent-first-route-to-show-on-notification-click-in-react-native%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          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






          share|improve this answer
























          • Where do i write this code inside PushNotification.configure or anywhere else in my code?

            – Ahsan Sohail
            Dec 2 '18 at 6:42











          • plus the library you mentioned react-native-firebase can i use this to get push notification on IOS and android both?

            – Ahsan Sohail
            Dec 2 '18 at 6:42











          • Outside of PushNotification.configure. Put it there where you display the splash screen.

            – Patrick Wozniak
            Dec 3 '18 at 11:34











          • Yes, with react-native-firebase you can use both platforms.

            – Patrick Wozniak
            Dec 3 '18 at 11:34











          • unfortunately it showing me the same behaviour.. my problem is not getting the notification object.. my problem was that it showing the root screen of stack before navigating i don't want that i want to directly navigate to the desire screen

            – Ahsan Sohail
            Dec 4 '18 at 7:12
















          0














          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






          share|improve this answer
























          • Where do i write this code inside PushNotification.configure or anywhere else in my code?

            – Ahsan Sohail
            Dec 2 '18 at 6:42











          • plus the library you mentioned react-native-firebase can i use this to get push notification on IOS and android both?

            – Ahsan Sohail
            Dec 2 '18 at 6:42











          • Outside of PushNotification.configure. Put it there where you display the splash screen.

            – Patrick Wozniak
            Dec 3 '18 at 11:34











          • Yes, with react-native-firebase you can use both platforms.

            – Patrick Wozniak
            Dec 3 '18 at 11:34











          • unfortunately it showing me the same behaviour.. my problem is not getting the notification object.. my problem was that it showing the root screen of stack before navigating i don't want that i want to directly navigate to the desire screen

            – Ahsan Sohail
            Dec 4 '18 at 7:12














          0












          0








          0







          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






          share|improve this answer













          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







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Dec 1 '18 at 21:33









          Patrick WozniakPatrick Wozniak

          20627




          20627













          • Where do i write this code inside PushNotification.configure or anywhere else in my code?

            – Ahsan Sohail
            Dec 2 '18 at 6:42











          • plus the library you mentioned react-native-firebase can i use this to get push notification on IOS and android both?

            – Ahsan Sohail
            Dec 2 '18 at 6:42











          • Outside of PushNotification.configure. Put it there where you display the splash screen.

            – Patrick Wozniak
            Dec 3 '18 at 11:34











          • Yes, with react-native-firebase you can use both platforms.

            – Patrick Wozniak
            Dec 3 '18 at 11:34











          • unfortunately it showing me the same behaviour.. my problem is not getting the notification object.. my problem was that it showing the root screen of stack before navigating i don't want that i want to directly navigate to the desire screen

            – Ahsan Sohail
            Dec 4 '18 at 7:12



















          • Where do i write this code inside PushNotification.configure or anywhere else in my code?

            – Ahsan Sohail
            Dec 2 '18 at 6:42











          • plus the library you mentioned react-native-firebase can i use this to get push notification on IOS and android both?

            – Ahsan Sohail
            Dec 2 '18 at 6:42











          • Outside of PushNotification.configure. Put it there where you display the splash screen.

            – Patrick Wozniak
            Dec 3 '18 at 11:34











          • Yes, with react-native-firebase you can use both platforms.

            – Patrick Wozniak
            Dec 3 '18 at 11:34











          • unfortunately it showing me the same behaviour.. my problem is not getting the notification object.. my problem was that it showing the root screen of stack before navigating i don't want that i want to directly navigate to the desire screen

            – Ahsan Sohail
            Dec 4 '18 at 7:12

















          Where do i write this code inside PushNotification.configure or anywhere else in my code?

          – Ahsan Sohail
          Dec 2 '18 at 6:42





          Where do i write this code inside PushNotification.configure or anywhere else in my code?

          – Ahsan Sohail
          Dec 2 '18 at 6:42













          plus the library you mentioned react-native-firebase can i use this to get push notification on IOS and android both?

          – Ahsan Sohail
          Dec 2 '18 at 6:42





          plus the library you mentioned react-native-firebase can i use this to get push notification on IOS and android both?

          – Ahsan Sohail
          Dec 2 '18 at 6:42













          Outside of PushNotification.configure. Put it there where you display the splash screen.

          – Patrick Wozniak
          Dec 3 '18 at 11:34





          Outside of PushNotification.configure. Put it there where you display the splash screen.

          – Patrick Wozniak
          Dec 3 '18 at 11:34













          Yes, with react-native-firebase you can use both platforms.

          – Patrick Wozniak
          Dec 3 '18 at 11:34





          Yes, with react-native-firebase you can use both platforms.

          – Patrick Wozniak
          Dec 3 '18 at 11:34













          unfortunately it showing me the same behaviour.. my problem is not getting the notification object.. my problem was that it showing the root screen of stack before navigating i don't want that i want to directly navigate to the desire screen

          – Ahsan Sohail
          Dec 4 '18 at 7:12





          unfortunately it showing me the same behaviour.. my problem is not getting the notification object.. my problem was that it showing the root screen of stack before navigating i don't want that i want to directly navigate to the desire screen

          – Ahsan Sohail
          Dec 4 '18 at 7:12




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407948%2fhow-to-prevent-first-route-to-show-on-notification-click-in-react-native%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Biblatex bibliography style without URLs when DOI exists (in Overleaf with Zotero bibliography)

          ComboBox Display Member on multiple fields

          Is it possible to collect Nectar points via Trainline?