How to reset the state of a StackNavigator nested in a DrawerNavigatior?

Question

I am building an app whose navigation is based on a DrawerNavigator from the react-navigation library.

This navigator has 3 tabs:

• 2 regular tabs
• 1 StackNavigator named "Search"

The StackNavigator consists of one screen that lets the user search for an item, and a second screen where the user sees the search results.

I do not want the search results page to be a tab of a DrawerNavigator, this is why I implemented this structure.

The problem is: if the user has already performed a search, when he clicks on the "Search" tab, he does not come back to the search screen but to the search results screen. I would prefer that the user comes back to the search screen.

How can I achieve that?

Answer 1

You can achive this using navigation dispatch with navigationActions

import { NavigationActions } from 'react-navigation';

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({
      routeName: 'DrawerScreen',
      params: {},
      action: NavigationActions.navigate({ routeName: 'SearchScreen' }),
    }),
  ],
})
navigation.dispatch(resetAction)