React navigation - Navigation action = back

Question

I want to use the back action from react navigation to dismiss a modal as follow:

this.props.navigation.dispatch(NavigationActions.back({
    key: this.props.navigation.state.params.previousKey
}));

I pass the key of the previous screen when navigating to the modal:

this.props.navigation.navigate('ModalScreen', {
    previousKey: this.props.navigation.state.key
});

But nothing happened.

When I don't use key, the navigationaction.back dismiss the modal properly back to the previous screen when calling the function by clicking on a button.

But when I call it from the constructor, it sends back to the root screen...

Any idea?

EDIT 1

Trying another approach with custom action as follow. When I reload the app and try it, it works properly the first time. But when I try a second time without reloading the app then I get the error: Cannot read property 'routes' of undefined.

in my router.js file:

const CheckInStack = StackNavigator({
    CheckIn: {
        screen: CheckIn,
        navigationOptions: {
            header: null,
            headerLeft: null,
            gesturesEnabled: false,
        }
    }
});

export const SiteStack = StackNavigator({
    Site: {
        screen: Site,
        navigationOptions: {
            header: null,
            headerLeft: null,
            gesturesEnabled: false,
        }
    },
    CheckIn: {screen: CheckInStack,},
}, {mode: 'modal', headerMode: 'none'});

const prevGetCheckInStateForAction = SiteStack.router.getStateForAction;

SiteStack.router = {
    ...SiteStack.router,
    getStateForAction(action, state) {
        if(state && action.type === "DISMISS_MODAL") {

            console.log('in router');

            const routes = state.routes.slice();
            routes.pop();
            return {
                ...state,
                routes,
                index: routes.length -1,
            }
        }
        return prevGetCheckInStateForAction(action, state);
    }
};

in my screen.js file:

componentDidMount() {

        const {profile} = this.props.auth;

        var channel = pusher.subscribe('private-user.' + profile.id );

        channel.bind('App\\Events\\Order\\SiteHasAnsweredCheckIn', event => {

            // this.props.navigation.dispatch(NavigationActions.back()); => this is where the back actions is launched. nowhere else.

            //CUSTOM ACTION DISPATCH
            this.props.navigation.dispatch({
                type: 'DISMISS_MODAL'
            });

        });
}

Answer 1

Found a solution here: https://github.com/react-community/react-navigation/issues/686

from richardfickling on github.

In my router.js, I create a DismissableStackNavigator as follow:

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
export default function DismissableStackNavigator(routes, options) {
  const StackNav = StackNavigator(routes, options);

  return class DismissableStackNav extends Component {
    static router = StackNav.router;

    render() {
      const { state, goBack } = this.props.navigation;
      const nav = {
        ...this.props.navigation,
        dismiss: () => goBack(state.key),
      };
      return (
        <StackNav
          navigation={nav}
        />
      );
    }
  }
};

And then my checkin stack is as follow:

const CheckInStack = DismissableStackNavigator({
    CheckIn: {
        screen: CheckIn,
        navigationOptions: {
            header: null,
            headerLeft: null,
            gesturesEnabled: false,
        }
    }
});
export const SiteStack = StackNavigator({
    Site: {
        screen: Site,
        navigationOptions: {
            header: null,
            headerLeft: null,
            gesturesEnabled: false,
        }
    },
    CheckIn: {screen: CheckInStack,},
}, {mode: 'modal', headerMode: 'none'});

And then in my CheckIn screen:

componentDidMount() {

    const {profile} = this.props.auth;

    var channel = pusher.subscribe('private-user.' + profile.id );

    channel.bind('App\\Events\\Order\\SiteHasAnsweredCheckIn', event => {

        //method coming from the Dismissable Navigator stack
        this.props.navigation.dismiss();

    });
}

Answer 2

I don't know if it will solve your problem, but you could try to use the goBack method instead of dispatching the back action. Like this : this.props.navigation.goBack()