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!

Answer 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.

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

Answer 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;
    }
  };

Answer 4

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!