Delete stack in react navigation

2
votes

Let's say we have this screen navigation case :

other previous screens -> A -> B -> C -> D

Now that we're in the Screen D, how can we go back directly to screen B and erase the screens D and C from the stack?

I'm using navigation.navigate(B, params), but then in the screen B when I click on the back button I'm back to screen D. The intent is to go to A.

Edit: I'm trying to use the reset action : 

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [previousNavigationActions, navigateActionToScreenB],
});
this.props.navigation.dispatch(resetAction);

How do I get the previous navigation actions from the navigation state?

2
react-nativereact-navigation

2 Answers

1
votes

Try the following:

import { NavigationActions } from 'react-navigation'

const backAction = NavigationActions.back({
    key: 'C'   // if you want to go back to B
})

this.props.navigation.dispatch(backAction)

As key, you have to use the screen after the one you want to navigate to, see React Navigation Docs.

You can also try to manually reset the history, but the back-method above would be the easier and more clean solution.

1
votes

From react-navigation plugin v 3.9.0 I have used following code which removes all back stack and navigate to the screen.

 this.props.navigation.dispatch(
  StackActions.reset({
  index: 0,
  key: null,
  actions: [NavigationActions.navigate({ routeName: '<<YOUR ROUTE NAME>>' })]
  })
  )