How to navigate screen on notification open in React Native with One Signal?












5















Here is my code, how can I navigate user to the desired screen when clicked on a notification or button in a notification.



componentWillMount() {
OneSignal.addEventListener('received', this.onReceived);
OneSignal.addEventListener('opened', this.onOpened);
OneSignal.addEventListener('registered', this.onRegistered);
OneSignal.addEventListener('ids', this.onIds);

OneSignal.inFocusDisplaying(2);
OneSignal.requestPermissions({
alert: true,
badge: true,
sound: true
});
}

componentWillUnmount() {
this.isUnmounted = true;

OneSignal.removeEventListener('received', this.onReceived);
OneSignal.removeEventListener('opened', this.onOpened);
OneSignal.removeEventListener('registered', this.onRegistered);
OneSignal.removeEventListener('ids', this.onIds);
}

onReceived(notification) {
console.log("Notification received: ", notification);
}

onOpened(openResult) { // HERE I WANT TO NAVIGATE TO ANOTHER SCREEN INSTEAD OF HOME SCREEN
this.isNotification = true;

let data = openResult.notification.payload.additionalData;
let inFocus = openResult.notification.isAppInFocus;

console.log('Message: ', openResult.notification.payload.body);
console.log('Data: ', openResult.notification.payload.additionalData);
console.log('isActive: ', openResult.notification.isAppInFocus);
console.log('openResult: ', openResult);
}

onRegistered(notifData) {
console.log("Device had been registered for push notifications!", notifData);
}

onIds(device) {
try {
AsyncStorage.setItem("@SC:deviceInfo", JSON.stringify(device));
} catch (error) {
console.log(error);
}
}


Do anyone have knowledge about all this, React Native + OneSignal + React Navigation + Redux. Please help!










share|improve this question



























    5















    Here is my code, how can I navigate user to the desired screen when clicked on a notification or button in a notification.



    componentWillMount() {
    OneSignal.addEventListener('received', this.onReceived);
    OneSignal.addEventListener('opened', this.onOpened);
    OneSignal.addEventListener('registered', this.onRegistered);
    OneSignal.addEventListener('ids', this.onIds);

    OneSignal.inFocusDisplaying(2);
    OneSignal.requestPermissions({
    alert: true,
    badge: true,
    sound: true
    });
    }

    componentWillUnmount() {
    this.isUnmounted = true;

    OneSignal.removeEventListener('received', this.onReceived);
    OneSignal.removeEventListener('opened', this.onOpened);
    OneSignal.removeEventListener('registered', this.onRegistered);
    OneSignal.removeEventListener('ids', this.onIds);
    }

    onReceived(notification) {
    console.log("Notification received: ", notification);
    }

    onOpened(openResult) { // HERE I WANT TO NAVIGATE TO ANOTHER SCREEN INSTEAD OF HOME SCREEN
    this.isNotification = true;

    let data = openResult.notification.payload.additionalData;
    let inFocus = openResult.notification.isAppInFocus;

    console.log('Message: ', openResult.notification.payload.body);
    console.log('Data: ', openResult.notification.payload.additionalData);
    console.log('isActive: ', openResult.notification.isAppInFocus);
    console.log('openResult: ', openResult);
    }

    onRegistered(notifData) {
    console.log("Device had been registered for push notifications!", notifData);
    }

    onIds(device) {
    try {
    AsyncStorage.setItem("@SC:deviceInfo", JSON.stringify(device));
    } catch (error) {
    console.log(error);
    }
    }


    Do anyone have knowledge about all this, React Native + OneSignal + React Navigation + Redux. Please help!










    share|improve this question

























      5












      5








      5


      2






      Here is my code, how can I navigate user to the desired screen when clicked on a notification or button in a notification.



      componentWillMount() {
      OneSignal.addEventListener('received', this.onReceived);
      OneSignal.addEventListener('opened', this.onOpened);
      OneSignal.addEventListener('registered', this.onRegistered);
      OneSignal.addEventListener('ids', this.onIds);

      OneSignal.inFocusDisplaying(2);
      OneSignal.requestPermissions({
      alert: true,
      badge: true,
      sound: true
      });
      }

      componentWillUnmount() {
      this.isUnmounted = true;

      OneSignal.removeEventListener('received', this.onReceived);
      OneSignal.removeEventListener('opened', this.onOpened);
      OneSignal.removeEventListener('registered', this.onRegistered);
      OneSignal.removeEventListener('ids', this.onIds);
      }

      onReceived(notification) {
      console.log("Notification received: ", notification);
      }

      onOpened(openResult) { // HERE I WANT TO NAVIGATE TO ANOTHER SCREEN INSTEAD OF HOME SCREEN
      this.isNotification = true;

      let data = openResult.notification.payload.additionalData;
      let inFocus = openResult.notification.isAppInFocus;

      console.log('Message: ', openResult.notification.payload.body);
      console.log('Data: ', openResult.notification.payload.additionalData);
      console.log('isActive: ', openResult.notification.isAppInFocus);
      console.log('openResult: ', openResult);
      }

      onRegistered(notifData) {
      console.log("Device had been registered for push notifications!", notifData);
      }

      onIds(device) {
      try {
      AsyncStorage.setItem("@SC:deviceInfo", JSON.stringify(device));
      } catch (error) {
      console.log(error);
      }
      }


      Do anyone have knowledge about all this, React Native + OneSignal + React Navigation + Redux. Please help!










      share|improve this question














      Here is my code, how can I navigate user to the desired screen when clicked on a notification or button in a notification.



      componentWillMount() {
      OneSignal.addEventListener('received', this.onReceived);
      OneSignal.addEventListener('opened', this.onOpened);
      OneSignal.addEventListener('registered', this.onRegistered);
      OneSignal.addEventListener('ids', this.onIds);

      OneSignal.inFocusDisplaying(2);
      OneSignal.requestPermissions({
      alert: true,
      badge: true,
      sound: true
      });
      }

      componentWillUnmount() {
      this.isUnmounted = true;

      OneSignal.removeEventListener('received', this.onReceived);
      OneSignal.removeEventListener('opened', this.onOpened);
      OneSignal.removeEventListener('registered', this.onRegistered);
      OneSignal.removeEventListener('ids', this.onIds);
      }

      onReceived(notification) {
      console.log("Notification received: ", notification);
      }

      onOpened(openResult) { // HERE I WANT TO NAVIGATE TO ANOTHER SCREEN INSTEAD OF HOME SCREEN
      this.isNotification = true;

      let data = openResult.notification.payload.additionalData;
      let inFocus = openResult.notification.isAppInFocus;

      console.log('Message: ', openResult.notification.payload.body);
      console.log('Data: ', openResult.notification.payload.additionalData);
      console.log('isActive: ', openResult.notification.isAppInFocus);
      console.log('openResult: ', openResult);
      }

      onRegistered(notifData) {
      console.log("Device had been registered for push notifications!", notifData);
      }

      onIds(device) {
      try {
      AsyncStorage.setItem("@SC:deviceInfo", JSON.stringify(device));
      } catch (error) {
      console.log(error);
      }
      }


      Do anyone have knowledge about all this, React Native + OneSignal + React Navigation + Redux. Please help!







      react-native react-redux react-navigation onesignal






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Oct 3 '17 at 9:17









      AbydAbyd

      3228




      3228
























          3 Answers
          3






          active

          oldest

          votes


















          3














          To achieve the desired behavior you can do couple of things. You can manually check the notification and state of the router and if its necessary redirect the user to the screen or you can use the Deep Linking functionality.



          To use Deep Linking you attach url parameter to your notification while sending it. To direct user to the correct screen in your app you can use react-navigation deep linking functionality.




          From One Signal Documentation



          url string The URL to open in the browser when a user clicks on the
          notification. Example: http://www.google.com



          Note: iOS needs https or updated NSAppTransportSecurity in plist







          From React Navigation Documentation



          Deep Linking



          In this guide we will set up our app to handle external URIs. Let's start with the SimpleApp that we created in the
          getting started guide. In this example, we want a URI like
          mychat://chat/Taylor to open our app and link straight into Taylor's
          chat page.







          share|improve this answer


























          • I have made an application using the react native and onesignal. I am able to receive the notifications from onesignal, but if app is not running and push notification is received then clicking on the push notification doesn't navigate to the desired screen. Please suggest me a solution for this problem. How this can be solved? I am using the route-flux for routing in my app. This is not an issue when app is running and notification is received.

            – Crazy Developer
            Oct 13 '17 at 9:48













          • @CrazyDeveloper Deep linking feature is not implemented in react-native-router-flux yet. To be able to use abow technique you need to implement react-native Linking API

            – bennygenel
            Oct 13 '17 at 9:56













          • Thanks for your response. So app is not running in background and when I click on the notification then app gets opened. How did app come to know that it is being opened by on clicking the push notification. Thanks.

            – Crazy Developer
            Oct 13 '17 at 10:38






          • 1





            With OneSignal you can send custom URL to open when notification activated like mychat://chat/Taylor. You can listen for the url and parse the parameters and then redirect user to the correct screen.

            – bennygenel
            Oct 13 '17 at 10:39











          • thanks for pointing me to the solution. I was not aware about the Linking that it can listen in react native. This is really cool stuff.

            – Crazy Developer
            Oct 13 '17 at 10:53



















          3














          You can dispatch a NavigationAction or perform a navigate action when onOpened is fired. Following snippet should work:



          componentWillMount() {
          OneSignal.inFocusDisplaying(0);
          OneSignal.removeEventListener('opened', this.onOpened.bind(this));
          OneSignal.addEventListener('opened', this.onOpened.bind(this));
          }

          onOpened(openResult) {
          let data = openResult.notification.payload.additionalData;
          // ScreenName is the name of the screen you defined in StackNavigator
          this.props.navigation.navigate('ScreenName', data)
          }





          share|improve this answer


























          • Thanks for this example, how do you send this info, is there a special use case, or do you simply send it along with everything else when you dispatch the info to OneSignal?

            – Sara Inés Calderón
            Nov 1 '18 at 19:01











          • "how do you send this info" - didn't understand which info are you talking about?!

            – Mostafiz Rahman
            Nov 1 '18 at 20:23











          • thanks for responding! i meant, how do you send the route info, is it like this: {route: 'HOME'} when you dispatch the push notif to OneSignal or do you have to call it additionalData when you send it? by the time you get to onOpened -- how did that route info get there?

            – Sara Inés Calderón
            Nov 2 '18 at 15:22






          • 1





            You can send data along with the navigation route, I've updated my answer. Did it solve your query?

            – Mostafiz Rahman
            Nov 3 '18 at 4:10






          • 1





            Right you are. Push are sent from the server and additional data is sent as payload.

            – Mostafiz Rahman
            Nov 4 '18 at 17:20



















          0














          In case someone else comes with a similar problem to mine I want to add onto what @Mostafiz Rahman said. The app I was working on had a bunch of nested stacks and tabs (react-navigation v1) inside of a drawer, and if Stack1 was backgrounded and the notification was for Stack2 I couldn't get them to jump around.



          I ended up putting the logic as described by Mr. Rahman in every one of the stacks' first screens -- 1st screen of Stack1, 1st screen of Stack2, etc -- and that did it!






          share|improve this answer























            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%2f46541163%2fhow-to-navigate-screen-on-notification-open-in-react-native-with-one-signal%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            3 Answers
            3






            active

            oldest

            votes








            3 Answers
            3






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            3














            To achieve the desired behavior you can do couple of things. You can manually check the notification and state of the router and if its necessary redirect the user to the screen or you can use the Deep Linking functionality.



            To use Deep Linking you attach url parameter to your notification while sending it. To direct user to the correct screen in your app you can use react-navigation deep linking functionality.




            From One Signal Documentation



            url string The URL to open in the browser when a user clicks on the
            notification. Example: http://www.google.com



            Note: iOS needs https or updated NSAppTransportSecurity in plist







            From React Navigation Documentation



            Deep Linking



            In this guide we will set up our app to handle external URIs. Let's start with the SimpleApp that we created in the
            getting started guide. In this example, we want a URI like
            mychat://chat/Taylor to open our app and link straight into Taylor's
            chat page.







            share|improve this answer


























            • I have made an application using the react native and onesignal. I am able to receive the notifications from onesignal, but if app is not running and push notification is received then clicking on the push notification doesn't navigate to the desired screen. Please suggest me a solution for this problem. How this can be solved? I am using the route-flux for routing in my app. This is not an issue when app is running and notification is received.

              – Crazy Developer
              Oct 13 '17 at 9:48













            • @CrazyDeveloper Deep linking feature is not implemented in react-native-router-flux yet. To be able to use abow technique you need to implement react-native Linking API

              – bennygenel
              Oct 13 '17 at 9:56













            • Thanks for your response. So app is not running in background and when I click on the notification then app gets opened. How did app come to know that it is being opened by on clicking the push notification. Thanks.

              – Crazy Developer
              Oct 13 '17 at 10:38






            • 1





              With OneSignal you can send custom URL to open when notification activated like mychat://chat/Taylor. You can listen for the url and parse the parameters and then redirect user to the correct screen.

              – bennygenel
              Oct 13 '17 at 10:39











            • thanks for pointing me to the solution. I was not aware about the Linking that it can listen in react native. This is really cool stuff.

              – Crazy Developer
              Oct 13 '17 at 10:53
















            3














            To achieve the desired behavior you can do couple of things. You can manually check the notification and state of the router and if its necessary redirect the user to the screen or you can use the Deep Linking functionality.



            To use Deep Linking you attach url parameter to your notification while sending it. To direct user to the correct screen in your app you can use react-navigation deep linking functionality.




            From One Signal Documentation



            url string The URL to open in the browser when a user clicks on the
            notification. Example: http://www.google.com



            Note: iOS needs https or updated NSAppTransportSecurity in plist







            From React Navigation Documentation



            Deep Linking



            In this guide we will set up our app to handle external URIs. Let's start with the SimpleApp that we created in the
            getting started guide. In this example, we want a URI like
            mychat://chat/Taylor to open our app and link straight into Taylor's
            chat page.







            share|improve this answer


























            • I have made an application using the react native and onesignal. I am able to receive the notifications from onesignal, but if app is not running and push notification is received then clicking on the push notification doesn't navigate to the desired screen. Please suggest me a solution for this problem. How this can be solved? I am using the route-flux for routing in my app. This is not an issue when app is running and notification is received.

              – Crazy Developer
              Oct 13 '17 at 9:48













            • @CrazyDeveloper Deep linking feature is not implemented in react-native-router-flux yet. To be able to use abow technique you need to implement react-native Linking API

              – bennygenel
              Oct 13 '17 at 9:56













            • Thanks for your response. So app is not running in background and when I click on the notification then app gets opened. How did app come to know that it is being opened by on clicking the push notification. Thanks.

              – Crazy Developer
              Oct 13 '17 at 10:38






            • 1





              With OneSignal you can send custom URL to open when notification activated like mychat://chat/Taylor. You can listen for the url and parse the parameters and then redirect user to the correct screen.

              – bennygenel
              Oct 13 '17 at 10:39











            • thanks for pointing me to the solution. I was not aware about the Linking that it can listen in react native. This is really cool stuff.

              – Crazy Developer
              Oct 13 '17 at 10:53














            3












            3








            3







            To achieve the desired behavior you can do couple of things. You can manually check the notification and state of the router and if its necessary redirect the user to the screen or you can use the Deep Linking functionality.



            To use Deep Linking you attach url parameter to your notification while sending it. To direct user to the correct screen in your app you can use react-navigation deep linking functionality.




            From One Signal Documentation



            url string The URL to open in the browser when a user clicks on the
            notification. Example: http://www.google.com



            Note: iOS needs https or updated NSAppTransportSecurity in plist







            From React Navigation Documentation



            Deep Linking



            In this guide we will set up our app to handle external URIs. Let's start with the SimpleApp that we created in the
            getting started guide. In this example, we want a URI like
            mychat://chat/Taylor to open our app and link straight into Taylor's
            chat page.







            share|improve this answer















            To achieve the desired behavior you can do couple of things. You can manually check the notification and state of the router and if its necessary redirect the user to the screen or you can use the Deep Linking functionality.



            To use Deep Linking you attach url parameter to your notification while sending it. To direct user to the correct screen in your app you can use react-navigation deep linking functionality.




            From One Signal Documentation



            url string The URL to open in the browser when a user clicks on the
            notification. Example: http://www.google.com



            Note: iOS needs https or updated NSAppTransportSecurity in plist







            From React Navigation Documentation



            Deep Linking



            In this guide we will set up our app to handle external URIs. Let's start with the SimpleApp that we created in the
            getting started guide. In this example, we want a URI like
            mychat://chat/Taylor to open our app and link straight into Taylor's
            chat page.








            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Jan 2 at 17:05









            Rizwan atta

            1,5092720




            1,5092720










            answered Oct 3 '17 at 9:33









            bennygenelbennygenel

            12.9k32750




            12.9k32750













            • I have made an application using the react native and onesignal. I am able to receive the notifications from onesignal, but if app is not running and push notification is received then clicking on the push notification doesn't navigate to the desired screen. Please suggest me a solution for this problem. How this can be solved? I am using the route-flux for routing in my app. This is not an issue when app is running and notification is received.

              – Crazy Developer
              Oct 13 '17 at 9:48













            • @CrazyDeveloper Deep linking feature is not implemented in react-native-router-flux yet. To be able to use abow technique you need to implement react-native Linking API

              – bennygenel
              Oct 13 '17 at 9:56













            • Thanks for your response. So app is not running in background and when I click on the notification then app gets opened. How did app come to know that it is being opened by on clicking the push notification. Thanks.

              – Crazy Developer
              Oct 13 '17 at 10:38






            • 1





              With OneSignal you can send custom URL to open when notification activated like mychat://chat/Taylor. You can listen for the url and parse the parameters and then redirect user to the correct screen.

              – bennygenel
              Oct 13 '17 at 10:39











            • thanks for pointing me to the solution. I was not aware about the Linking that it can listen in react native. This is really cool stuff.

              – Crazy Developer
              Oct 13 '17 at 10:53



















            • I have made an application using the react native and onesignal. I am able to receive the notifications from onesignal, but if app is not running and push notification is received then clicking on the push notification doesn't navigate to the desired screen. Please suggest me a solution for this problem. How this can be solved? I am using the route-flux for routing in my app. This is not an issue when app is running and notification is received.

              – Crazy Developer
              Oct 13 '17 at 9:48













            • @CrazyDeveloper Deep linking feature is not implemented in react-native-router-flux yet. To be able to use abow technique you need to implement react-native Linking API

              – bennygenel
              Oct 13 '17 at 9:56













            • Thanks for your response. So app is not running in background and when I click on the notification then app gets opened. How did app come to know that it is being opened by on clicking the push notification. Thanks.

              – Crazy Developer
              Oct 13 '17 at 10:38






            • 1





              With OneSignal you can send custom URL to open when notification activated like mychat://chat/Taylor. You can listen for the url and parse the parameters and then redirect user to the correct screen.

              – bennygenel
              Oct 13 '17 at 10:39











            • thanks for pointing me to the solution. I was not aware about the Linking that it can listen in react native. This is really cool stuff.

              – Crazy Developer
              Oct 13 '17 at 10:53

















            I have made an application using the react native and onesignal. I am able to receive the notifications from onesignal, but if app is not running and push notification is received then clicking on the push notification doesn't navigate to the desired screen. Please suggest me a solution for this problem. How this can be solved? I am using the route-flux for routing in my app. This is not an issue when app is running and notification is received.

            – Crazy Developer
            Oct 13 '17 at 9:48







            I have made an application using the react native and onesignal. I am able to receive the notifications from onesignal, but if app is not running and push notification is received then clicking on the push notification doesn't navigate to the desired screen. Please suggest me a solution for this problem. How this can be solved? I am using the route-flux for routing in my app. This is not an issue when app is running and notification is received.

            – Crazy Developer
            Oct 13 '17 at 9:48















            @CrazyDeveloper Deep linking feature is not implemented in react-native-router-flux yet. To be able to use abow technique you need to implement react-native Linking API

            – bennygenel
            Oct 13 '17 at 9:56







            @CrazyDeveloper Deep linking feature is not implemented in react-native-router-flux yet. To be able to use abow technique you need to implement react-native Linking API

            – bennygenel
            Oct 13 '17 at 9:56















            Thanks for your response. So app is not running in background and when I click on the notification then app gets opened. How did app come to know that it is being opened by on clicking the push notification. Thanks.

            – Crazy Developer
            Oct 13 '17 at 10:38





            Thanks for your response. So app is not running in background and when I click on the notification then app gets opened. How did app come to know that it is being opened by on clicking the push notification. Thanks.

            – Crazy Developer
            Oct 13 '17 at 10:38




            1




            1





            With OneSignal you can send custom URL to open when notification activated like mychat://chat/Taylor. You can listen for the url and parse the parameters and then redirect user to the correct screen.

            – bennygenel
            Oct 13 '17 at 10:39





            With OneSignal you can send custom URL to open when notification activated like mychat://chat/Taylor. You can listen for the url and parse the parameters and then redirect user to the correct screen.

            – bennygenel
            Oct 13 '17 at 10:39













            thanks for pointing me to the solution. I was not aware about the Linking that it can listen in react native. This is really cool stuff.

            – Crazy Developer
            Oct 13 '17 at 10:53





            thanks for pointing me to the solution. I was not aware about the Linking that it can listen in react native. This is really cool stuff.

            – Crazy Developer
            Oct 13 '17 at 10:53













            3














            You can dispatch a NavigationAction or perform a navigate action when onOpened is fired. Following snippet should work:



            componentWillMount() {
            OneSignal.inFocusDisplaying(0);
            OneSignal.removeEventListener('opened', this.onOpened.bind(this));
            OneSignal.addEventListener('opened', this.onOpened.bind(this));
            }

            onOpened(openResult) {
            let data = openResult.notification.payload.additionalData;
            // ScreenName is the name of the screen you defined in StackNavigator
            this.props.navigation.navigate('ScreenName', data)
            }





            share|improve this answer


























            • Thanks for this example, how do you send this info, is there a special use case, or do you simply send it along with everything else when you dispatch the info to OneSignal?

              – Sara Inés Calderón
              Nov 1 '18 at 19:01











            • "how do you send this info" - didn't understand which info are you talking about?!

              – Mostafiz Rahman
              Nov 1 '18 at 20:23











            • thanks for responding! i meant, how do you send the route info, is it like this: {route: 'HOME'} when you dispatch the push notif to OneSignal or do you have to call it additionalData when you send it? by the time you get to onOpened -- how did that route info get there?

              – Sara Inés Calderón
              Nov 2 '18 at 15:22






            • 1





              You can send data along with the navigation route, I've updated my answer. Did it solve your query?

              – Mostafiz Rahman
              Nov 3 '18 at 4:10






            • 1





              Right you are. Push are sent from the server and additional data is sent as payload.

              – Mostafiz Rahman
              Nov 4 '18 at 17:20
















            3














            You can dispatch a NavigationAction or perform a navigate action when onOpened is fired. Following snippet should work:



            componentWillMount() {
            OneSignal.inFocusDisplaying(0);
            OneSignal.removeEventListener('opened', this.onOpened.bind(this));
            OneSignal.addEventListener('opened', this.onOpened.bind(this));
            }

            onOpened(openResult) {
            let data = openResult.notification.payload.additionalData;
            // ScreenName is the name of the screen you defined in StackNavigator
            this.props.navigation.navigate('ScreenName', data)
            }





            share|improve this answer


























            • Thanks for this example, how do you send this info, is there a special use case, or do you simply send it along with everything else when you dispatch the info to OneSignal?

              – Sara Inés Calderón
              Nov 1 '18 at 19:01











            • "how do you send this info" - didn't understand which info are you talking about?!

              – Mostafiz Rahman
              Nov 1 '18 at 20:23











            • thanks for responding! i meant, how do you send the route info, is it like this: {route: 'HOME'} when you dispatch the push notif to OneSignal or do you have to call it additionalData when you send it? by the time you get to onOpened -- how did that route info get there?

              – Sara Inés Calderón
              Nov 2 '18 at 15:22






            • 1





              You can send data along with the navigation route, I've updated my answer. Did it solve your query?

              – Mostafiz Rahman
              Nov 3 '18 at 4:10






            • 1





              Right you are. Push are sent from the server and additional data is sent as payload.

              – Mostafiz Rahman
              Nov 4 '18 at 17:20














            3












            3








            3







            You can dispatch a NavigationAction or perform a navigate action when onOpened is fired. Following snippet should work:



            componentWillMount() {
            OneSignal.inFocusDisplaying(0);
            OneSignal.removeEventListener('opened', this.onOpened.bind(this));
            OneSignal.addEventListener('opened', this.onOpened.bind(this));
            }

            onOpened(openResult) {
            let data = openResult.notification.payload.additionalData;
            // ScreenName is the name of the screen you defined in StackNavigator
            this.props.navigation.navigate('ScreenName', data)
            }





            share|improve this answer















            You can dispatch a NavigationAction or perform a navigate action when onOpened is fired. Following snippet should work:



            componentWillMount() {
            OneSignal.inFocusDisplaying(0);
            OneSignal.removeEventListener('opened', this.onOpened.bind(this));
            OneSignal.addEventListener('opened', this.onOpened.bind(this));
            }

            onOpened(openResult) {
            let data = openResult.notification.payload.additionalData;
            // ScreenName is the name of the screen you defined in StackNavigator
            this.props.navigation.navigate('ScreenName', data)
            }






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Nov 3 '18 at 4:09

























            answered Mar 21 '18 at 21:45









            Mostafiz RahmanMostafiz Rahman

            5,72333755




            5,72333755













            • Thanks for this example, how do you send this info, is there a special use case, or do you simply send it along with everything else when you dispatch the info to OneSignal?

              – Sara Inés Calderón
              Nov 1 '18 at 19:01











            • "how do you send this info" - didn't understand which info are you talking about?!

              – Mostafiz Rahman
              Nov 1 '18 at 20:23











            • thanks for responding! i meant, how do you send the route info, is it like this: {route: 'HOME'} when you dispatch the push notif to OneSignal or do you have to call it additionalData when you send it? by the time you get to onOpened -- how did that route info get there?

              – Sara Inés Calderón
              Nov 2 '18 at 15:22






            • 1





              You can send data along with the navigation route, I've updated my answer. Did it solve your query?

              – Mostafiz Rahman
              Nov 3 '18 at 4:10






            • 1





              Right you are. Push are sent from the server and additional data is sent as payload.

              – Mostafiz Rahman
              Nov 4 '18 at 17:20



















            • Thanks for this example, how do you send this info, is there a special use case, or do you simply send it along with everything else when you dispatch the info to OneSignal?

              – Sara Inés Calderón
              Nov 1 '18 at 19:01











            • "how do you send this info" - didn't understand which info are you talking about?!

              – Mostafiz Rahman
              Nov 1 '18 at 20:23











            • thanks for responding! i meant, how do you send the route info, is it like this: {route: 'HOME'} when you dispatch the push notif to OneSignal or do you have to call it additionalData when you send it? by the time you get to onOpened -- how did that route info get there?

              – Sara Inés Calderón
              Nov 2 '18 at 15:22






            • 1





              You can send data along with the navigation route, I've updated my answer. Did it solve your query?

              – Mostafiz Rahman
              Nov 3 '18 at 4:10






            • 1





              Right you are. Push are sent from the server and additional data is sent as payload.

              – Mostafiz Rahman
              Nov 4 '18 at 17:20

















            Thanks for this example, how do you send this info, is there a special use case, or do you simply send it along with everything else when you dispatch the info to OneSignal?

            – Sara Inés Calderón
            Nov 1 '18 at 19:01





            Thanks for this example, how do you send this info, is there a special use case, or do you simply send it along with everything else when you dispatch the info to OneSignal?

            – Sara Inés Calderón
            Nov 1 '18 at 19:01













            "how do you send this info" - didn't understand which info are you talking about?!

            – Mostafiz Rahman
            Nov 1 '18 at 20:23





            "how do you send this info" - didn't understand which info are you talking about?!

            – Mostafiz Rahman
            Nov 1 '18 at 20:23













            thanks for responding! i meant, how do you send the route info, is it like this: {route: 'HOME'} when you dispatch the push notif to OneSignal or do you have to call it additionalData when you send it? by the time you get to onOpened -- how did that route info get there?

            – Sara Inés Calderón
            Nov 2 '18 at 15:22





            thanks for responding! i meant, how do you send the route info, is it like this: {route: 'HOME'} when you dispatch the push notif to OneSignal or do you have to call it additionalData when you send it? by the time you get to onOpened -- how did that route info get there?

            – Sara Inés Calderón
            Nov 2 '18 at 15:22




            1




            1





            You can send data along with the navigation route, I've updated my answer. Did it solve your query?

            – Mostafiz Rahman
            Nov 3 '18 at 4:10





            You can send data along with the navigation route, I've updated my answer. Did it solve your query?

            – Mostafiz Rahman
            Nov 3 '18 at 4:10




            1




            1





            Right you are. Push are sent from the server and additional data is sent as payload.

            – Mostafiz Rahman
            Nov 4 '18 at 17:20





            Right you are. Push are sent from the server and additional data is sent as payload.

            – Mostafiz Rahman
            Nov 4 '18 at 17:20











            0














            In case someone else comes with a similar problem to mine I want to add onto what @Mostafiz Rahman said. The app I was working on had a bunch of nested stacks and tabs (react-navigation v1) inside of a drawer, and if Stack1 was backgrounded and the notification was for Stack2 I couldn't get them to jump around.



            I ended up putting the logic as described by Mr. Rahman in every one of the stacks' first screens -- 1st screen of Stack1, 1st screen of Stack2, etc -- and that did it!






            share|improve this answer




























              0














              In case someone else comes with a similar problem to mine I want to add onto what @Mostafiz Rahman said. The app I was working on had a bunch of nested stacks and tabs (react-navigation v1) inside of a drawer, and if Stack1 was backgrounded and the notification was for Stack2 I couldn't get them to jump around.



              I ended up putting the logic as described by Mr. Rahman in every one of the stacks' first screens -- 1st screen of Stack1, 1st screen of Stack2, etc -- and that did it!






              share|improve this answer


























                0












                0








                0







                In case someone else comes with a similar problem to mine I want to add onto what @Mostafiz Rahman said. The app I was working on had a bunch of nested stacks and tabs (react-navigation v1) inside of a drawer, and if Stack1 was backgrounded and the notification was for Stack2 I couldn't get them to jump around.



                I ended up putting the logic as described by Mr. Rahman in every one of the stacks' first screens -- 1st screen of Stack1, 1st screen of Stack2, etc -- and that did it!






                share|improve this answer













                In case someone else comes with a similar problem to mine I want to add onto what @Mostafiz Rahman said. The app I was working on had a bunch of nested stacks and tabs (react-navigation v1) inside of a drawer, and if Stack1 was backgrounded and the notification was for Stack2 I couldn't get them to jump around.



                I ended up putting the logic as described by Mr. Rahman in every one of the stacks' first screens -- 1st screen of Stack1, 1st screen of Stack2, etc -- and that did it!







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 12 '18 at 18:51









                Sara Inés CalderónSara Inés Calderón

                572712




                572712






























                    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%2f46541163%2fhow-to-navigate-screen-on-notification-open-in-react-native-with-one-signal%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

                    Monofisismo

                    Angular Downloading a file using contenturl with Basic Authentication

                    Olmecas