I have a back button that takes the user a screen back, but when there are no screens left to go back, I want it to do something else so this is my code:
<Button onPress={()=>{
if(CanGoBack){ // imaginary 'CanGoBack' variable
this.props.navigation.goBack()
}else{
this.doSomething()
}
}}/>
how can I achieve this?
Use the goBack() Method to Go Back to a Specific Screen in the Navigation Stack in React Native. It's important to understand that to go back to a specific screen in the navigation stack using the goBack method, you must call it from the component you want to go back from.
Stack navigators nested inside each screen of drawer navigator - The drawer appears over the header from the stack. Stack navigators nested inside each screen of tab navigator - The tab bar is always visible.
Note this answer was originally written for
react-navigation
v3.3.0
. You should check the current documentation forreact-navigation
to make sure that this is still supported and if there are any changes/easier methods.
There is a function in this.props.navigation
called dangerouslyGetParent
.
It states the following in the documentation:
Another good use case for this is to find the index of the active route in the parent's route list. So in the case of a stack if you are at index 0 then you may not want to render a back button, but if you're somewhere else in the list then you would render a back button.
So we can using the following to get the index of the route
this.props.navigation.dangerouslyGetParent().state.index
So we could use this in the onPress
of your Button
in the following way to check if we are back at the start of the route.
<Button onPress={() => {
// get the index of the route
let index = this.props.navigation.dangerouslyGetParent().state.index;
// handle the index we get
if (index > 0) {
this.props.navigation.goBack();
} else {
this.doSomething();
}
}}/>
From the documentation, we can see that dangerouslyGetParent
still exists.
This method returns the navigation prop from the parent navigator that the current navigator is nested in. For example, if you have a stack navigator and a tab navigator nested inside the stack, then you can use dangerouslyGetParent inside a screen of the tab navigator to get the navigation prop passed from the stack navigator.
So it could be possible to use the above method for v3 in v5.
There is also an undocumented api called canGoBack()
. This can be accessed from the navigation props in the following way:
this.props.navigation.canGoBack()
This property returns a boolean value if you are able to go back in the stack. Meaning we can update the code that we did for v3
in the following way.
<Button onPress={() => {
// check to see if it is possible to go back
let canGoBack = this.props.navigation.canGoBack();
// handle what we do it we can/cannot go back
if (canGoBack) {
this.props.navigation.goBack();
} else {
this.doSomething();
}
}}/>
However, as this is an undocumented api it is liable to change so it could be risky relying on it.
On React navigation 5, there is a canGoBack()
function which is super helpful in this case.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With