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

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!

Solution 1

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.

Solution 2

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)
}

Solution 3

In search for the solution I landed on this question and I think most of the answers are now old. So, in case anyone looking for the solution can try this.

OneSignal.setNotificationOpenedHandler((notificationResponse) => {
      const { notification } = notificationResponse;
      if (notification) {
        const { additionalData = null } = notification;
        if (additionalData) {
          const { type } = additionalData;
          navigateToScreen(type);
        }
      }
    });

 const navigateToScreen = (type) => {
    switch (type) {
      case "post":
      case "track":
        navigation.navigate("SinglePost");
        return;
      default:
        return;
    }
  };

Comments

[Mukesh Kumar]

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.

[bennygenel]

@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

[Mukesh Kumar]

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.

[bennygenel]

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.

[Mukesh Kumar]

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.

[DevAS]

I have a question, I'm developing two apps first of the user app and second to providers, in user app, I made some function to send order and saved into real-time database firebase t and in the second app I just retrieve the data from DB with a listener to get the new order as a real-time without refreshing the app, SO I want to when I send an order from user app to firebase I want to display a notify in the second app? How to handle these

[DevAS]

I have a question, I'm developing two apps first of the user app and second to providers, in user app, I made some function to send order and saved into real-time database firebase t and in the second app I just retrieve the data from DB with a listener to get the new order as a real-time without refreshing the app, SO I want to when I send an order from user app to firebase I want to display a notify in the second app? How to handle these

[bennygenel]

@DevAS you can use Onesignal API or Firebase Cloud Messaging

[DevAS]

Hmm I think you don't understand me very well, the idea is I need to send a notification when I want to send data to the database and at the same time I want to receive notifications in another app

[bennygenel]

@DevAS I understood you quite well. You need to use Database triggers and trigger a function that sends a notification to the related other app users. Read the documentations I sent you and be familiar with the tools you are using. I'm sure you can figure it out.