How to navigate screen on notification open in React Native with One Signal?
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
add a comment |
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
add a comment |
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
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
react-native react-redux react-navigation onesignal
asked Oct 3 '17 at 9:17
AbydAbyd
3228
3228
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
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.
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 likemychat://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
add a comment |
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)
}
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 itadditionalData
when you send it? by the time you get toonOpened
-- 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
|
show 1 more comment
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!
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
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 likemychat://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
add a comment |
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.
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 likemychat://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
add a comment |
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.
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.
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 likemychat://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
add a comment |
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 likemychat://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
add a comment |
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)
}
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 itadditionalData
when you send it? by the time you get toonOpened
-- 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
|
show 1 more comment
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)
}
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 itadditionalData
when you send it? by the time you get toonOpened
-- 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
|
show 1 more comment
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)
}
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)
}
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 itadditionalData
when you send it? by the time you get toonOpened
-- 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
|
show 1 more comment
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 itadditionalData
when you send it? by the time you get toonOpened
-- 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
|
show 1 more comment
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!
add a comment |
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!
add a comment |
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!
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!
answered Nov 12 '18 at 18:51
Sara Inés CalderónSara Inés Calderón
572712
572712
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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