how to check if goBack() function is doable in rea

Question

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?

Answer 1

Note this answer was originally written for react-navigation v3.3.0. You should check the current documentation for react-navigation to make sure that this is still supported and if there are any changes/easier methods.

React-Navigation v3

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();
  }
}}/>

---

Update for React-Navigation v5

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.

---

canGoBack() 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.

Answer 2

On React navigation 5, there is a canGoBack() function which is super helpful in this case.

Answer 3

There is a canGoBack() event. I am using React Navigation 5. Though I can't find it in the documentations. to check do console.log(this.props.navigation).

<Button onPress={()=>{
   if(this.props.navigation.canGoBack()){
     this.props.navigation.goBack()
   }else{
     this.doSomething()
   }
}}/>