Correct way of navigation upon receiving push notification when app is in foreground or closed

Question

This is a general question to all who are using react navigation, following is my navigation structure

export const createRootNavigator = (signedIn = false) => {
  return StackNavigator({
      Login: screen: Login,
      Welcome: screen: Welcome,
      Loading: screen: Loading,
      SignedIn: screen:  SignedIn,
   });
};

export const SignedIn = TabNavigator ({
    Home: screen: HomeNavigation, 
    FeedBack: screen: FeedBackNavigation, 
    Search: screen: SearchNavigation, 
    Me: screen: ProfileNavigation,  
});

I am using 'react-native-fcm' to receive the notification when app is in foreground or closed. How should I structure the code to navigate to specific screens upon receiving notification? Shall I subscribe to onNotification in every screen and then navigate to specific screen or have it at a centralised place? Has anyone tackled this before? sample code would be great

software version:

react-navigation 1.0.0-beta.26

react-native 0.49.3

Answer 1

To achieve this behavior you need to implement Deep Linking to your app. A detail example and explanation can be found in react-navigation docs and in this issue.

From React-Native Docs

Linking gives you a general interface to interact with both incoming and outgoing app links.

From react-navigation docs

Deep linking

In this guide we will set up our app to handle external URIs. Let's suppose that we want a URI like mychat://chat/Eric to open our app and link straight into a chat screen for some user named "Eric".

From the react-native-fcm issue

You can use the notification listener to grab notification details and use your router (in my case react-native-router-flux) to trigger the desired action and show the right view.

Answer 2

Im using rn-firebase, but this will work for your react-navigator:

basically you have to listen to your notification on the main component and get a ref of your top navigator component and use it with a specific way of call

navigator: any;

constructor(props: Props) {
    super(props);
    this.onPressNotificacion = this.onPressNotificacion.bind(this); // you need this to use 'this' on 'onPressNotificacion'
    firebase.notifications().onNotificationOpened(this.onPressNotificacion);
  }

onPressNotificacion() {
  this.navigator.dispatch(NavigationActions.navigate({ routeName: 'somescreen', params: someParams }));
}

render() {
    return (
        <AppNavigator ref={nav => { this.navigator = nav; }} />
    );
  }

more info: https://github.com/react-navigation/react-navigation/issues/742#issuecomment-404184307