Clear stack being navigated to React-Navigation

Question

My react-native application consists of a DrawerNavigator that contains several StackNavigators. A simplified example of my structure looks like this

- Drawer
  - Stack 1
    - Screen 1
    - Screen 2
  - Stack 2
    - Screen 1
    - Screen 2

My problem is the following: I am on Screen 1 of Stack 1. I navigate to screen 1 of Stack 2 using the Drawer. From Screen 1 of Stack 2 I navigate to Screen 2 of Stack 2 on the press of a button. I then navigate back to Stack 1 using the Drawer. I again return to Stack 2 using the Drawer. I am now on Screen 1 of Stack 2, but there is a back button in the header, and it appears that my current screen has just been placed on top of the old stack. Pressing it navigates me to Screen 2 of Stack 2, and pressing it again navigates me to Screen 1 of Stack 2.

When navigating back to a stack in the drawer I would expect it to return me to the first item in the stack with a fresh stack - that is, with no back button.

Is this behavior expected? If so, is there anything I can do to 'clear' the stack when I navigate to it from the drawer?

Here is an Expo example with bare minimum code to reproduce my structure and the issue: https://snack.expo.io/rk2HV-HNf

Answer 1

In react-navigation, if you want to go back, instead of creating a new screen, you need to use this.props.navigation.goBack(). If you use navigate method, it creates a new screen, hence back button.

However, there is also another way. In your case you do not need this, however you can also define a stack from scratch using NavigationActions and dispatch it to reset navigation stack.