Resetting React Stack Navigator from Another Stack

Question

I have an issue with resetting Stack Navigator when inside another Stack navigator, here's the scenario:

1. User lands on Book List screen
2. User navigates to Book Detail screen
3. User switches to Settings screen through bottom navigation / tabs
4. User switches the account

When user switches the account, I need to clear Books navigation stack, so that navigating back to Books stack through the bottom tab navigation doesn't show a screen/book detail that no longer belongs to the active account.

I suspect this can be achieved using the target property, I'm just not sure what to feed into it. The documentation says it's the key of the navigator which contains the route (https://reactnavigation.org/docs/navigation-actions/#goback).

this.props.navigation.dispatch({
  target: ???,               <-- how can I point this to the Books stack?
  ...CommonActions.reset({
     index: 1,
     routes: [
       { name: 'book-list' }
     ]
   })
});

However, putting in target: 'books', which is the key of the Books tab navigator produces the following error:

The action 'RESET' with payload '{"index":1,"routes":[{"name":"book-list"}]}' was not handled by any navigator. If you are trying to navigate to a screen, check if the screen exists in your navigator.

This is the navigation structure:

NavigationContainer
--Tab.Navigator
----Tab.Screen (Books)
------Stack.Navigator
--------Stack.Screen (Book List)
--------Stack.Screen (Book Detail)
----Tab.Screen (Settings)
------Stack.Navigator
--------Stack.Screen (Settings Page)

Ideally, I would want to reset the Books navigator stack after the user switches the account and don't navigate to Books.

Answer 1

We faced a similar issue. Try this in v5: Whenever you need to navigate to Books stack, you can directly navigate to a nested navigator like this.

this.props.navigation.navigate('Books', {screen: 'BookList'})

If you have used 'books' and 'book-list' as the name, please use that instead of 'Books' and 'BookList'. This will ensure that it does not jump back to the Books stack with the previous BookDetail screen with the old data still visible.

Answer 2

A property called 'screenOptions' exists in <Tab.Navigator>. Setting the 'unmountOnBlur' property to true resolves your issue. This basically resets the stack when you move to other Tab.

Usage:

<Tab.Navigator
    screenOptions={{
      unmountOnBlur: true,
    }}
>
...Tab screens
</Tab.Navigator>