How to use on tap notification to take the user on a certain page with react navigation

[MahbbRah]

I'm talking here with click_action. I'm not understanding and or there is no documentation that mentions this thing, How do you guys resolves this problem?

What I want to do is: When a new push notification comes up. I would to take the user on a certain page provided by react-navigation or in actually i want to invoke a JS method so I can do whatever I want to when user tap/clicks on a notification.

Hopefully, This is enough description to understand the situation.

[mikehardy]

This shows how to set up path-based navigation schemes https://reactnavigation.org/docs/en/deep-linking.html

but with react-native-firebase you don't need to do the handlers, as it will do them if you configure notifications correctly for onNotificationOpened and getInitialNotification to pull the info out

You'll need to process the info then do something like this NavigationService.navigate('Actualiza', { checkImmediately: true }); where you force a navigation immediately

I have a NavigationService singleton that looks like this

import { NavigationActions } from 'react-navigation';

let _navigator: any;

function setTopLevelNavigator(navigatorRef: any) {
  _navigator = navigatorRef;
}

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

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
};

And it gets the ref during app bootstrap like so

  createDynamicRoutes(): NavigationContainer {
    // This is the part of the app available while not logged in
    const authNavigator = createStackNavigator(authScreenMap);

    // Set up an initial page, then the two navigators with cross-talk disallowed by the SwitchNavigator
    const switchNavigator = createSwitchNavigator(
      {
        Inicio: LandingScreen,
        App: appNavigator,
        Auth: authNavigator,
      },
      {
        initialRouteName: 'Inicio',
      }
    );
    return createAppContainer(switchNavigator);
  }

  render(): JSX.Element | null {

    const AppContainer = this.createDynamicRoutes();

    return (
      <RX.View>
        <AppContainer
          // This allows us to navigate from anywhere, statically
          ref={navigatorRef => {
            NavigationService.setTopLevelNavigator(navigatorRef);
          }}

So I think it goes like:

• organize your navigation system so as you set up react-navigation it has the idea of paths with data in them and the screens can handle it
• set up listeners that pull the data you need for the screen paths from the click
• maintain a handle to your navigator so you can force navigation from the listener

If that works for you maybe you can propose a guide that ties it all together ?

[MahbbRah]

but with react-native-firebase you don't need to do the handlers, as it will do them if you configure notifications correctly for onNotificationOpened and getInitialNotification to pull the info out

I want to know that configuration works with this :)

I have already that topLevelNavigator initialized in my system.

I want to know how the navigator will work based on tap/click of push notification.