Cannot Navigate from Push Notification to Chosen Screen

Question

When the user clicks or presses the notification I want to have a particular screen open. I have been gone through various github issues and stack overflow questions and answers however there does not seem to be one answer or chosen way to go about this.

Originally I used a PushController class to handle the onNotification function however not I have moved the configure and onNotification functions to the component did mount in my component where the local notification is being created.

this.props.navigation.navigate('RouteName'); 

Does not work. It says that this.props.navigation or this.props.navigation.navigate are undefined.

PushNotification.
            onNotification(notification) {
                console.log('onNotification')
                console.log( notification );
this.props.navigation.navigate('RegisterRoute');
            },

        });

What is the correct way to go about routing or navigating from notification to chosen screen. I cannot find a direct answer in the react-native-push-notification issues and documentation.

Edit: This code can be found within the class where I call/make the local notification. The notification is triggered and called, and when the notification is clicked or onNotification I would like to navigate or route to another screenn.

Inside the component did mount.

PushNotification.configure({

            onNotification(notification) {
                console.log('onNotification')
                console.log( notification );
this.props.navigation.navigate('ChosenScreen');
            },


        });

The function that calls and creates a local notification

function sendNotification(title, pushMessage){
        PushNotification.localNotification({
        message: pushMessage, 
        title: title,
        userInteraction: true,
        alertAction: 'default',// (optional) default: view

       autoCancel: true, 
       largeIcon: "logo", 
       smallIcon: "logo",
       vibrate: true, 
       vibration: 300,

       alertAction: 'default',
       userInfo: 'default'

      });

}

Answer 1

Here is how I solved my problem.

I found a guide (I can't find the link) on how to create a navigation service which helped fix the issue of props being undefined. I imported this service and it is what I use to navigate.

Where my notification is declared and used

import NavigationService from './NavigationService.js';

compnentDidMount(){
  PushNotification.configure({
    onNotification(notification){
    console.log('onNotification')
    console.log(notification );
      NavigationService.navigate('Route', {Params: param});


  },
  });

}

The navigation service class

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

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

export default {
  navigate,
  setTopLevelNavigator,
};