CODEWITHSUNDEEP
react-nativereact-navigation
user3574857
user3574857

Reputation: 395

Delete stack in react navigation

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?

Upvotes: 2

Views: 7179

Answers (2)

Mohsin Bagwan
Mohsin Bagwan

Reputation: 343

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>>' })]
  })
  )

Upvotes: 1

Jonas
Jonas

Reputation: 81

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.

Upvotes: 1

Related Questions