React Navigation back() and goBack() not working

Question

I'm trying to go back two screens. The goal is to go from EditPage to Cover. Here is my navigation stack:

Main -> Cover -> EditCover -> EditPage

I read the docs and it says to supply a key of the screen you want to go back from, here's my code:

this.props.navigation.dispatch(NavigationActions.back({key: 'EditCover'}));

I've also tried (with no luck):

this.props.navigation.dispatch(NavigationActions.back('EditCover'));
this.props.navigation.dispatch(NavigationActions.back({key: 'EditCover'}));
this.props.navigation.dispatch(NavigationActions.back({routeName: 'EditCover'}));
this.props.navigation.goBack('EditCover');
this.props.navigation.goBack({key: 'EditCover'});
this.props.navigation.goBack({routeName: 'EditCover'});

The funny thing about all this is that I get no errors. Nothing happens when the code is called...

P.S. If I want to just go back one screen, this code works fine:

this.props.navigation.goBack(null);

P.S.S. In case someone comes across this before there is a solution. This hack works for now:

this.props.navigation.goBack(null);
this.props.navigation.goBack(null);

question from:https://stackoverflow.com/questions/45489343/react-navigation-back-and-goback-not-working

Answer 1

The key property for goBack() is a dynamically created string, created by react-navigation whenever it navigates to a new route.

for example:

It is stored in this.props.navigation.state.key.

So if you want to go from EditPage to Cover, what you have to do is to pass the key of EditCover down to EditPage, and then call goBack() with the key.

Why not key of Cover but EditCover?

Because react-navigation only provides the method goBack(key), it's go back from key, not go back to key.

Optionally provide a key, which specifies the route to go back from. By default, goBack will close the route that it is called from. If the goal is to go back anywhere, without specifying what is getting closed, call .goBack(null);

EditCover.js

render() {
    const { state, navigate } = this.props.navigation;    

    return (
        <View>
            <Button title="Go to Page" onPress={ () => {
                /* pass key down to *EditPage* */
                navigate('EditPage', { go_back_key: state.key });
            }} />
        </View>
    );
}

EditPage.js

render() {
    const { state, goBack } = this.props.navigation;    
    const params = state.params || {};

    return (
        <View>
            <Button title="Back to Cover" onPress={ () => {
                /* go back from *EditCover* to *Cover* */
                goBack(params.go_back_key);
            }} />
        </View>
    );
}