7

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

Shekhar Kamble
  • 95
  • 1
  • 2
  • 7

2 Answers2

3

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.

bennygenel
  • 23,896
  • 6
  • 65
  • 78
  • Hi Bennygenel, Thank you for your response. I am woking on deep linking now but once we receive notification and user clicks on it. we need to navigate to particular screen but before that we need to authenticate the user as well. where would be the logical place to put the routing code? – Shekhar Kamble Mar 06 '18 at 02:52
  • @ShekharKamble can't say anything about this. You should consider the possible places and decide since you are the one knowing the whole project. – bennygenel Mar 06 '18 at 07:19
3

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

David Rearte
  • 764
  • 8
  • 19
  • Can you check this please, @DavidRearte https://stackoverflow.com/questions/57171787/navigate-to-screen-after-opening-a-notification – DevAS Jul 23 '19 at 22:20