navigating user on notification click app in background/foreground

Question

I'm using REACT-NATIVE-FCM.

My app has drawer navigator inside stack navigator in App.js.

On notification click from notification tray I want user to directly go to certain Screen.

Registering FCM events in Home page only work if app is closed, while in app in foreground the events are not called.It just takes you to the last open Screen.

I have to register FCM events on every Screen, which doesn’t look ok to me. So I have the solution to register FCM events in App.js since App.js is called from index.js while initializing the App but I’m unable to use this.props.navigation.navigate in App.js.

Using react navigation how can we redirect user just after stack is declared.

APP.JS

    const Drawer = DrawerNavigator(
      {
        Dashboard: { screen: Dashboard },
        Screen1: { screen: Screen1 },
         Screen2: { screen: Screen2},
         Screen3: { screen: Screen3},
      },
      {
        navigationOptions: {
          gesturesEnabled: false,
        },
       initialRouteName: "Dashboard",
        contentOptions: {
          activeTintColor: "#e91e63"
        },
        drawerPosition: 'right',
        contentComponent: props => <SideBar {...props} />
      }
    );


    const AppNavigator = StackNavigator(
        {
            Home: { screen: Home },
           Drawer: { screen: Drawer },
            ScreenABC: { screen: ScreenABC },
            ScreenXYZ: { screen: ScreenXYZ }
        },
        {
             headerMode: "none",
        }
    );


    export default () =>
        <Root>
            <AppNavigator />
        </Root>;


    //CALLED WHEN APP IN FOREGROUND
    this.notificationListener = FCM.on(FCMEvent.Notification, async (notif) => {
    //alert('FCM.on: ' + JSON.stringify(notif));
if(notif.routeValue == 1)
{
this.props.navigation.navigate("Screen1")}
    });

    //CALLED WHEN APP IN BACKGROUND
    FCM.getInitialNotification().then(notif => {

       });

score 1 · Answer 1 · answered Feb 20 '18 at 15:33

If you want to really go to a certain screen no matter what. You should at least reset your navigator state before you call navigate.

Or you can also do is creating a custom action, dispatch this action and return a correct navigator state.

Here is how I reset my navigator state to home:

export const homeNav = (state, action) => {
  let index;

  let routes;

  switch (action.type) {

 case types.RESET_HOME_NAV:
  routes = [...state.routes];

  for (let index = state.index; index > 0; --index) {
    routes.pop();
  }

  return {
    ...state,
    routes,
    index: 0,
  };

default:
  return NavigatorHome.router.getStateForAction(action, state);
}};

navigating user on notification click app in background/foreground

1 Answers1