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!

1 Answers 11

up vote 1 down vote accepted

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.

upvote
  flag
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
upvote
  flag
@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
upvote
  flag
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
1 upvote
  flag
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
upvote
  flag
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

Not the answer you're looking for? Browse other questions tagged or ask your own question.