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.