49

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);
Val
  • 21,938
  • 10
  • 68
  • 86
Dev01
  • 13,292
  • 19
  • 70
  • 124

6 Answers6

61

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

for example: enter image description here

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;    
    const { key } = this.props.route;

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

EditPage.js

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

    return (
        <View>
            <Button title="Back to Cover" onPress={ () => {
                /* go back from *EditCover* to *Cover* */
                goBack(params.go_back_key);
            }} />
        </View>
    );
}
Vladimir Salguero
  • 5,609
  • 3
  • 42
  • 47
Val
  • 21,938
  • 10
  • 68
  • 86
38

The right way to do this is with StackNavigation:

const AppNavigator = createStackNavigator({
    Main: {screen: MainScreen},
    Cover: {screen: CoverScreen},
    EditCover: {screen: EditCoverScreen},
    EditPage: {screen: EditPageScreen},
}, {
    initialRouteName: 'Main'
});

class App extends React.Component {
    render() {
        return <AppNavigator/>;
    }
}

According to your question, this is the order of your screens navigation, so when you goBack(null) if you are in

EditPage (goBack) -> EditCover (goBack) -> Cover (goBack) -> Main

You have to call goBack(null) like this in the components:

this.props.navigation.goBack(null);

This is the right way.

Ninja Coding
  • 1,357
  • 1
  • 16
  • 26
  • @YvetteColomb thank you. I thought my comment was never posted for whatever reason. But why is it no longer needed? He can modify his answer to be more helpful, or to leave comment about why it's helpful. Rather than flag my normal comment as unkind. – Val Sep 13 '18 at 01:54
  • @Val I deleted it, as it was flagged unkind (which is wasn't). But the OP replied, meaning they had read it. I figured it was no longer needed. As it was read. I didn't realise people may not know the comment was deleted. So sorry for being short. Your second comment was also flagged. That's the only reason I noticed you'd reposted. Have a look at [this post](https://meta.stackoverflow.com/questions/373801/when-is-a-comment-hostile-or-unfriendly-educating-newer-users-how-to-flag-comm) and share the joys of moderating comments :) –  Sep 13 '18 at 03:38
  • Life saver answer +1 – Ajoy Karmakar Sep 19 '20 at 18:32
10

In general we can use following two command

  1. this.props.navigation.goBack()
  2. this.props.navigation.dispatch(NavigationActions.back())

we have to use two command in another case:

  • first command useful in the project with One stacknavigator Only
  • Second Command useful in bottom navigator.

In that case, One Tab of Bottom navigator will have some screen. So Between a navigation of any tab and a navigation of another Tab, you can use second command.

Hadi GhahremanNezhad
  • 2,377
  • 5
  • 29
  • 58
LeeHayng
  • 101
  • 1
  • 5
6

For new version react-navtigation you can use StackActions As following:

 import { StackActions } from "react-navigation";

 const popAction = StackActions.pop({n: 1});
 this.props.navigation.dispatch(popAction);

This will return you back to the parent screen

Hussam Kurd
  • 8,066
  • 2
  • 43
  • 38
4

For React navigation 2 onward you can use

this.props.navigation.dispatch(NavigationActions.back())

Also do not forgot to mention in every stacknavigator

initialRouteName: 'Posts'
Rajesh N
  • 6,198
  • 2
  • 47
  • 58
1

For react native navigation v6 this works for me:

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(CommonActions.goBack());

https://reactnavigation.org/docs/navigation-actions

Miroslav Maksimovic
  • 537
  • 5
  • 14