goBack() to previous/different stack using React Navigation

Viewed 4622

I'm struggling with what I would hope is a simple issue. I have multiple StackNavigators with various screens in each and I'm using a Drawer to move between the main stacks in addition to .navigate. Like this:

  • Main Stack
    • Main Screen (entry)
    • Member Profile
  • Inbox Stack
    • Inbox Screen
    • Message Details Screen

On the message details screen a user can navigate to Profile. So Message Details > Profile. This works great, as it does throughout the app. Navigation in the same stack works great both forward and back. I'm using the standard .navigate to move forward.

this.props.navigation.navigate('MemberProfilePage')

However if I tap the back button - or set a custom back button - the user is taken all the way back to the Main screen. And If I tap on Inbox in the drawer, the screen will still be on the Message Details.

But I really just want to go: Message Details > Profile ... Profile goBack() to Message Details.

I've tried the default goBack(), I've tried dispatching a back action like this:

const backAction = NavigationActions.back({
  key: 'ProfileScreen'
})

or

const backAction = NavigationActions.back({
  key: null
})

Thanks for any direction.

Edit: the initial suggestion about setting the backButton in Drawer appears to work. But it doesn't solve the problem.

I don't want to be taken back to the initial screen of the current stack. I want to go back to the screen I navigated from which is in a different Stack.

2 Answers

Had the same problem with two navigators and going back always takes you correctly on one, and wrong on the other as it pops to the root of the current StackNavigator.

For me, the solution was to reference the same screen in both stackNavigators, and when you navigate to it from two different navigators, the same screen will be shown, but it will be loaded from different navigator and everything should work fine. Hope this helps.

Related