React Navigation back() and goBack() not working
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
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>
);
}
In general we can use following two command
this.props.navigation.goBack()
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.
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.