How to add click action for push notification in React native

Question

I want to navigate to particular app screen after click on remote push notification. How can i implement this with react native. I am using react-native-push-notification library

Solution

react-native-push-notification has an on notification press handler -> onNotification which is called every time the user presses or has received a notification (this is from the react-native-push-notification documentation). In an application you create a NavigationService component which uses the top level navigator reference set in your App.js file. With this navigator, in the onNotification callback you can then navigate to any screen in your application and use the notification data you have received for your purposes, which can be passed to the navigating screen through the navigator (in its state). Some psuedo code can look like this:

NotificationService.js:

import NavigationService from './NavigationService';
import PushNotification from "react-native-push-notification";

PushNotification.configure({
    onNotification: function(notification) {
        const { data } = notification;

        NavigationService.navigate('Screen', { notificationData: data });
    }
});

NavigationService.js:

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
    _navigator = navigatorRef;
}

function navigate(routeName, params) {
    _navigator.dispatch(
        NavigationActions.navigate({
            routeName,
            params,
        })
    );
}

Edit: Also you have to create an AppContainer, (This is placed in your App.js)

 import { createSwitchNavigator } from 'react-navigation';
 import { createAppContainer } from 'react-navigation';

 const AppContainer = createAppContainer(createSwitchNavigator({...Screens}));

 export default class App extends React.Component {
     ...
     render() {
          return (
               <View>
                    <AppContainer ref={ (navigatorRef) => { NavigationService.setTopLevelNavigator(navigatorRef); } } />
               </View>
          )

     }
 }

Comments

[Hurobaki]

Could you provide more details about your actual code ? Are you using react-navigation ?

[Deepali Jadhav]

yes i am using react-navigation

[Deepali Jadhav]

This is not working. Its returns navigate with empty data. Throws error TypeError:_NavigationService.default.navigate is not a function

[RPG]

Add <AppContainer ref={ (navigatorRef) => { NavigationService.setTopLevelNavigator(navigatorRef); } } /> in your App.js file in your app container to set the reference for the navigator

[Deepali Jadhav]

How can i achieve same behaviour when app is closed. When app is closed and push notification received at that time redirection is not working.

[RPG]

If there is no callback being called when the app is in background, you have to implement headless JS Task. This is a complete different topic though, and you will have to spend some time reading and investigating how to implement it.

[Deepali Jadhav]

headless JS is the only solution for android. do you know any solution which will work for both ios and android.