navigation.goBack() to previous page is impossible if that page was on another stackNavigator

[Bonobomagno]

Update: added snack and example

Your Environment

software	version
react-navigation	2.0.x
react-native	expo 27
node	9.11.1
npm or yarn	yarn 1.7

tab:
   stack1:
      screen1,
      detailScreen1
      (default route screen1)
   stack2:
      screen2,
      detailScreen2
    (default route screen2)

so, for eg, from Screen1 i call
navigation.navigate('detailScreen2')

using on detailScreen2
headerLeft: <GoBack onPress={() => navigation.goBack(null)} />
move me to Screen2 instead of screen1 .
In fact, goBack call stack2 (who call screen2 as default screen for the stack).

How to fix this? Because if i call navigation.navigate('screen1'), the screen stack will be still full, so when i will press on stack2 tab icon, the new screen will be detailScreen2 instead of screen2 (because of the old opened screen on stack2)

Update:
snack

Easy example made from navigation playground.
On home Tab go to Profile page, after go to notification, then go back.
The back will move you to the true parent (settings screen) instead to the previous page (profile screen).

[matthamil]

Hi! Can you create a reproducible example with Snack? Can you also follow the issue template? Thanks!

[Bonobomagno]

updated.

Ofc there is an hack, just call navigate('PreviousScreenName') but now if you move the the second tab, you will find that the opened page is the detail one, (with back arrow) instead of the default one.

[Bonobomagno]

Possible Solution:
const navi = (routeBack) => { navigation.popToTop() navigation.navigate(routeBack) }

Calling popToTop() before navigate, will clear the actual tab stack, and move the the old (routBack, passed as param) without drawback.

[Bonobomagno]

Also, there is a graphical glitch when navigating from detailscreen1 to detailscreen2.
When doing that, the transaction show scree2n for a small timeframe and detailscreen2 after.
Not so cool to have...

edit: as react navigation blog say, we must use both navigate and push now, because of different use case.
But, push dont "push"a new screen on deepest level, so there are no difference from using push or using navigate. This issue is valid with push too.

[brentvatne]

Easy example made from navigation playground.
On home Tab go to Profile page, after go to notification, then go back.
The back will move you to the true parent (settings screen) instead to the previous page (profile screen).

I believe this is expected - goBack will act on the deepest active router, which in this case is the stack. as per docs that maybe I wrote, goBack(null) is supposed to be "global" back so this may indeed be a bug.

if you'd like to go back to the other tab right now you are right that you would need to use navigate. cc @ericvicenti to confirm

[brentvatne]

@ericvicenti went on to add:

but as far as chronological back.. its not really baked into the current understanding of navigation state
we could potentially add a `state.lastActiveKey` or something, or even an array of previously active keys.. but. the chronological thing doesn't make perfect sense... I mean, do you ever want to go chronologically back from a 'pop'? It would effectively be a push
(and an array of previously active route keys wouldn't even help there...)

tl;dr: this is working as expected. the docs need some better wording around goBack(null). if you would like to propose introducing another way of handling back actions, please submit a rfc with some motivating use cases: https://github.com/react-navigation/rfcs

another way you could handle this in your app is to pass the route info for the route you want to return to in the params when navigating to another route. then check if that param exists and go back there if so.

[Bonobomagno]

Thanks for the reply!
In this case, a better wording would be cool. At least for understand what goBack() does.

If you use navigate(), the function will not pop che old tab stack. ( when you use the tabBar to navigate, you will see the deepest stack instead of the initial)
So my actual working solution is
navigation.popToTop(); navigation.navigate(routeBack)

Sometimes it glitch, showing both popToTop and navigate animation, but this is the only working one.
Maybe a popToRoute(routeBack) function, with only 1 animation, would be nicer to have.

updated:
i forgot about it: you need a custom handler for android back..

[uladkasach]

@brentvatne is there a recommended solution for going "chronologically back" (i.e., "take me back to the last screen i was on") since goBack() currently only goes "hierarchically back" (i.e., "take me back back through the navigational hierarchy" - per your screenshotted conversation with evv)?

[matthamil]

@uladkasach Sounds like navigation.pop() might be what you are looking for?

[toancaro]

Change to navigation.pop() did not work. I tried in OP's snack. Here is the modified snack (line 23):
https://snack.expo.io/B1-0GLCD4

[matthamil]

@toancaro if you are still experiencing issues, I recommend checking out Reactiflux or Stack Overflow. Feel free to open a new issue if you believe this is a bug.