How to go back to parent screen in react-navigation?

Question

Problem

RootTabNavigator
    | Auth Screen
    | Welcome Screen
    | MainTabNavigator 
              | FeedStacknavigator
                       | Screen A

              | MenuStackNavigator 
                       | Screen B <-I'm here and want to reset to 'Auth Screen'

The tree structure shows my app's Navigation structure. I'm on 'Screen B' and would like to go back to Auth Screen. (NOT Navigate) When I navigate to Auth Screen, it create new Auth Screen and I want to avoid it.

if ( ... ) {
      // I'm getting undefined error here
      nextProps.navigation.reset('Autho');

Why is it not working?

Possible Solution1: reset

  const resetAction = NavigationActions.reset({
      index: 0,
      actions: [
          // getting error because auth screen is not in MenuStacknavigator. 
          NavigationActions.navigate({ routeName: 'Auth'})
      ]
  })
  this.props.navigation.dispatch(resetAction);

Possible Solution #2 :

  const backAction = NavigationActions.back({
    key: 'Autho'
  })
  # Back Action doesn't do anything
  this.props.navigation.dispatch(backAction); # not working

Possible Solution #3 :

dispatch custom action. <- there were some solutions for StackNavigator but in my case it's TabNavigator.

score 3 · Accepted Answer · edited Dec 07 '17 at 16:13

3

Please feel free to answer. I've found a simple solution for now :

const backAction = NavigationActions.back({
    key: null
})
nextProps.navigation.dispatch(backAction);

edited Dec 07 '17 at 16:13

Varun Nath

5,570
3
23
39

answered Dec 07 '17 at 15:52

merry-go-round

4,533
10
54
102

https://stackoverflow.com/questions/47930049/how-to-reset-all-screens-when-user-logs-out-scroll-and-page-index – merry-go-round Jan 02 '18 at 10:02
1

Awesome.It worked even with new react navigation version – digit May 19 '19 at 15:44

score 1 · Answer 2 · answered Dec 07 '17 at 19:04

1

To reset to the start, I usually use:

NavigationActions.reset({
    index: 0, 
    actions: []
)

As an aside, a better navigation structure would be to have multiple tab navigators that you switch out depending on the auth state. In your case that would be something like an AuthTabNavigator and a MainTabNavigator, that you can switch between.

Hope this helps!

answered Dec 07 '17 at 19:04

nonsequiter

663
3
9
22

https://stackoverflow.com/questions/47930049/how-to-reset-all-screens-when-user-logs-out-scroll-and-page-index – merry-go-round Jan 02 '18 at 10:02
I think you can solve this problem (+200 bounty) : https://stackoverflow.com/questions/47930049/how-to-reset-tabnavigator-when-user-logs-out-from-other-screen – merry-go-round Jan 03 '18 at 05:24

How to go back to parent screen in react-navigation?

Problem

Possible Solution1: reset

Possible Solution #2 :

Possible Solution #3 :

2 Answers2