1

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

wizloc
  • 2,202
  • 4
  • 28
  • 54
  • No, It can't be like that. Please show more your code. – Bright Lee Jan 11 '18 at 08:37
  • @BrightLee I added code in an Expo example – wizloc Jan 11 '18 at 15:36
  • I looked your code, and there is a typo in Screen3. It says it's screen 4. – Bright Lee Jan 11 '18 at 18:17
  • I don't see that error. I see that Drawer Item 2 Screen 1 is incorrectly labeled Screen 2 in the text, but neither of those are related to the issue I mentioned in the post above – wizloc Jan 11 '18 at 18:56
  • Ah.... now I get it. What the heck is this? I never know this is happening. – Bright Lee Jan 11 '18 at 19:48
  • Do you think this is relative issue with https://github.com/react-navigation/react-navigation/issues/389 or https://github.com/react-navigation/react-navigation/issues/199 ? I will share if I find a solution. – Bright Lee Jan 11 '18 at 19:50
  • I think we should keep in eyes on this issue. https://github.com/react-navigation/react-navigation/issues/1449 – Bright Lee Jan 11 '18 at 20:20
  • By the way, the dumb solution will be that you can add 'headerLeft' button on each first screen of Stack. Like a 'hamburger' button. If you add this button, the weird back button will not show. Although there will be a memory leak. – Bright Lee Jan 11 '18 at 20:22
  • Ah, I remembered now how I figured out. You can lock your 'drawer' when your stack goes deep. Then, you can't open drawer unless if you are in the root of Stack. This approach will prevent this weird behavior. That's how I did. – Bright Lee Jan 11 '18 at 20:27

1 Answers1

0

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.

Zoe
  • 27,060
  • 21
  • 118
  • 148
Tukan
  • 2,253
  • 15
  • 17