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

react-native-push notification navigation
open screen from notification react-native
onesignal react native
react-native-push notification onclick
react native push notifications deep linking
react push notifications
expo push notifications open specific page
react-native-push notification when app is closed

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!


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.

OneSignal/react-native-onesignal, How to navigate screen on notification open in React Native with One Signal? - react-native. Here’s a tutorial on how to set up push notifications in React Native (both iOS and Android) with OneSignal, a service that provides free push notification delivery for multiple platforms. This


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

How to get initial notification? · Issue #332 · OneSignal/react-native , Click on push notification should navigate to the desired screen #336. Closed. mukeshkamboj opened this issue on Oct 13, 2017 · 2 comments. Closed  If you're just using react-native and react-native-navigation you will find a lot of information online. But if you add OneSignal, redux-persist, react-native-config and you also want deep linking then you have to do quite a lot of experimentation to make it work. Our goals. We wanted a one-time popup that asks for the user's permissions after logging in.


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!

Handling Remote Push Notifications from OneSignal in React Native, when App received the push notification, screen navigates to the desired screen. but when open the notification, it's not working for navigation  Hi i am using react navigation to navigate screens.I am successfully sending notifications from firebase notifications panel with additional data. Now i don't know how to get that data and navigate to specific screen dynamically.


React Native Push Notifications with OneSignal - Differential, What if they opened the push notification while in the app? That's what I plan to cover today. Before proceeding with this post be sure to have  3 Ways to Add Image Icon Inside Navigation Bar in React Native; React Native Pass Value From One Screen to Another Using React Navigation; Refresh Previous Screen after Going Back in React Navigation; React Native Finish Current Screen while Navigating to Next Screen; Using React Navigation 4.0 in React Native apps


How to set up React Native and OneSignal, React Native Push Notifications with OneSignal I'm going to start off with iOS and configure Android later — details on how to do that outlined below. So you'​re probably sitting at a screen that looks a lot like this… OneSignal is a free push notification service for mobile apps. This SDK makes it easy to integrate your native React-Native iOS and/or Android apps with OneSignal. Installation. See the Setup Guide for setup instructions. Change Log. See this repository's release tags for a complete change log of every released version. Support


React Native & Expo SDK Setup, But if you add OneSignal , redux-persist , react-native-config and you also When the user taps on the notification we wanted to navigate to the A button in the settings screen where the user can see the status of their notifications giving If OneSignal did not have the chance to open the native Modal it  The world's leader for Mobile Push Notifications, Web Push, and In-App Messaging. Trusted by 800k businesses to send 5 billion Push Notifications per day.