react-navigation 3 reset in nested stack

Question

Im try to understand how to reset in nested stack this my code

    const AuthStack = createStackNavigator(
      {
        Welcome,
        Login,
        Register,
        ConfirmationCode,
      },
      {
        initialRouteName: 'Welcome',
        headerMode: 'none',
        lazy: true,
        transitionConfig,
        defaultNavigationOptions: {
          gesturesEnabled: false,
        },
      }
    )

    const AppStack = createStackNavigator(
      {
        TabStack,
        SearchResult,
        BusinessDetail,
        BusinessMap,
        MakeAppointment,
        TermsAndConditions
      },
      {
        initialRouteName: 'TabStack',
        headerMode: 'none',
        lazy: true,
        transitionConfig,
        defaultNavigationOptions: {
          gesturesEnabled: false,
        },
      }
    )

    let MainStack = createSwitchNavigator(
      {
        AuthLoading,
        Auth: AuthStack,
        App: AppStack,
      },
      {
        initialRouteName: 'AuthLoading',
        headerMode: 'none',
        lazy: true,

        defaultNavigationOptions: {
          gesturesEnabled: false,
        },
      }
    )

TabStack

    import React from 'react';

    import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
    import {
        Search,
        MyFavourites,
        MyAppointments,
        UserProfile
    } from '../screens'
    import Icon from 'react-native-vector-icons/Feather';
    import Colors from '../utils/Colors'
    let TabStack = createBottomTabNavigator(
      {
        Search,
         MyFavourites,
         MyAppointments,
         UserProfile,
      },
        initialRouteName: 'ScreenTab1',
        tabBarOptions: {
          activeTintColor: Colors.pink,
          inactiveTintColor: Colors.black,
          showLabel: false,
          style: {
            backgroundColor: 'white'
          }
        },
      }
    )
    export default createAppContainer(TabStack);

I want to understand how to make reset for example:

    reset from UserProfile to TabStack (in AppStack) to AuthStack

I tried to do from it this way

const resetAction = StackActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'AuthStack' })],
    });
    this.props.navigation.dispatch(resetAction);

or this way

const resetAction = StackActions.reset({
        index: 0,
        key: null,
        actions: [NavigationActions.navigate({ routeName: 'AuthStack' })],
    });
    this.props.navigation.dispatch(resetAction);

but i got the error

there is no route defined for AuthStack

I checked in issues in stackoverflow but the answers there not works for me,always show me the same error I wrote above.

Possible duplicate of React Native navigating between Nested StackNavigator — Jaydeep Galani
– Jaydeep Galani, Commented Feb 19, 2019 at 3:31
@JaydeepGalani I tried this solution, not working, it show the same error. — Manspof
– Manspof, Commented Feb 19, 2019 at 5:28
Check your route name, it should be Auth instead of AuthStack as your declaration :) And reset with key null will work cause it'll reset the root nav. — tuan.tran
– tuan.tran, Commented Feb 23, 2019 at 9:07

wicky · Accepted Answer · 2019-02-26 10:00:41Z

4

+200

Your resetAction is unsuccessful because you are dispatching it on TabStack (because you are calling this.props.navigation.dispatch on UserProfile, if I get you correctly). You need to dispatch the resetAction to your MainStack instead. This thread here suggested some ways that you can achieve this. And also, here is my preferred solution, because i don't have to pass props around navigators or calls multiple nested actions with this.

Create a navigationService.js with the following contents (to keep your top level navigator as a reference)

import { NavigationActions, StackActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigateMainNavigator(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    }),
  );
}

// add other navigation functions that you need and export them

export default {
  setTopLevelNavigator,
  navigateMainNavigator,
};

On your App.js or any other file you render your MainStack, do this to set the reference

import NavigationService from './navigationService';

...

render() {
  return (

    ...
    <MainStack
      ref={navigatorRef => {
        NavigationService.setTopLevelNavigator(navigatorRef);
      }}
    />
    ...

  )
}

And wherever when you want to reset to your AuthStack (or any other stack in your MainStack), just import NavigationService and call

NavigationService.navigateAndReset('Auth', {...yourParamsIfAny});
// 'Auth' because you named it that way in your 'MainStack'

===========================================================================

Edited

Previous solution, in navigationService.js, is for StackNavigator as the MainStack

function navigateAndReset(routeName, params) {
  _navigator.dispatch(
    StackActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({
          routeName,
          params,
        }),
      ],
    })
  );
}

edited Feb 26, 2019 at 10:00

answered Feb 26, 2019 at 5:18

wicky

9787 silver badges14 bronze badges

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

7 Comments

Manspof Over a year ago

hey wicky, sounds like great way to do that! Im using with mobx so I did it in my store, I copy part of my code here, you can see pastebin.com/KtnMAXYy I also printed the ref to see what's it include and see all his properties. but I still got same error.. maybe I miss something..

wicky Over a year ago

Hey Adir, I am not familiar with mobx. But try doing a conosle.log(this.main_navigation_ref) on your resetMainStack function, and check if you're on the correct navigator. Try looking for the navigator's routes, this image might help

Manspof Over a year ago

you can see the console.log here imgur.com/a/tWhfMHA it show me the mainStack

wicky Over a year ago

Ahh, I just realise your MainStack is actually a SwitchNavigator. In that case, you dont need the StackActions.reset action. Just the NavigationActions.navigate will do. I have updated my answer above

Manspof Over a year ago

exactly what I need!!!! what the difference between stack actions.reset to NavigationActions?

|

Ravi · Accepted Answer · 2019-02-21 04:26:44Z

1

Try by setting it to AppStack, because anyhow it is going to redirect to GeneralStack as you have it as initialRouteName inside AppStack

const resetAction = StackActions.reset({
      index: 0,
      key: null,
      actions: [NavigationActions.navigate({ routeName: 'App' })],
    });
    this.props.navigation.dispatch(resetAction);

answered Feb 21, 2019 at 4:26

Ravi

35.7k22 gold badges126 silver badges188 bronze badges

7 Comments

Manspof Over a year ago

What do u mean? I want to reset from userProfile of tabstack to screenA of authstack.. how to do that?

Ravi Over a year ago

But in question you are trying to reset it to GeneratStack instead of AuthStack

Manspof Over a year ago

I try to do some resets, the last one i ask you is to implement logout.. any idea?

Ravi Over a year ago

In that case you can directly reset it to Auth

Manspof Over a year ago

I tried to reset from UserProfile of tabStack to screenA of AuthStack with this code pastebin.com/hvJ7Mp7b . I get the same error "error:error:there is no route defined for key Auth. must be one of 'TabStack,...."

|

Naveed Sheriffdeen · Accepted Answer · 2019-02-22 05:12:39Z

0

You can do the following, to reset to authStack,

create a reset actions as following,

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: "AuthStack" })],
  key: null
});
this.props.navigation.dispatch(resetAction);

and also add the AuthStack into appStack, or the stack from which you are calling the above code.

For example if your calling this from your appstack, add the following line as a route within your app stack

  const AppStack = createStackNavigator(
  {
    TabStack,
    SearchResult,
    BusinessDetail,
    BusinessMap,
    MakeAppointment,
    TermsAndConditions,
    AuthStack <---Insert THIS
  },

This works for me when using to signout.

answered Feb 22, 2019 at 5:12

Naveed Sheriffdeen

9906 gold badges18 silver badges38 bronze badges

1 Comment

Manspof Over a year ago

I know this kind of way but I dont think this right way.. becauae if i want to reset in more complex stacks so i need always declare it in same level of stack...

Collectives™ on Stack Overflow

react-navigation 3 reset in nested stack

3 Answers 3

Edited

7 Comments

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edited

7 Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related