React Navigation back() and goBack() not working

user_1078829 0
Viewed 120724

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);
react-navigation react-native
6 Answers

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.

user_20382860

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.

user_119408000

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

user_16273580

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'
user_9967870
user_122672930
Related