goBack() to previous/different stack using React Navigation

Question

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.

Something might be wrong with the hierarchy of your app. Maybe better have 1 Stack instead of 2 and just navigate to whatever screen you need there, from whatever screen you need, and have whatever screen you need through the 'back' button. — Eduard
– Eduard, Commented Oct 14, 2017 at 14:01
By the way, this behavior is a bug on React-Navigation side. They have been working on it since... April... (or something like that). — Eduard
– Eduard, Commented Oct 14, 2017 at 14:29

Sebastijan Dumančić · Accepted Answer · 2019-07-29 12:29:19Z

6

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.

answered Jul 29, 2019 at 12:29

Sebastijan Dumančić

1,1921 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ravi Raj · Accepted Answer · 2017-08-03 11:14:24Z

2

In your DrawerNavigatorConfig change this props

backBehavior='none' //default is initialRoute

backBehavior - Should the back button cause switch to the initial route? If yes, set to initialRoute, otherwise none. Defaults to initialRoute behavior.

https://reactnavigation.org/docs/navigators/drawer#DrawerNavigatorConfig

check if its working ...

answered Aug 3, 2017 at 11:14

Ravi Raj

6,7672 gold badges32 silver badges33 bronze badges

2 Comments

K_C Over a year ago

That prop was using the default initialRoute, you're right. But changing it to 'none' had no impact. The same experience is taking place.

K_C Over a year ago

There is another place in my app where I attempt to goBack to the screen before which is in a different Stack. In that case, it doesn't go to the initialRoute, but instead goes to the initial screen in the same Stack. Basically it just closes the screen and instead of going back to the screen that it navigated from (in a different stack) it goes to the initial screen in its own stack.

Collectives™ on Stack Overflow

goBack() to previous/different stack using React Navigation

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related