How to go to initialRoute with react-navigation when exiting a child stack navigator inside a drawer?

Question

I build an app with react-native, expo and react-navigation. I have a main drawer navigator who has in it 2 other stack navigator. One stack navigator have 2 pages; Products and Product. When I click on one product in the Products page, it goes into the Product page. Ben if I click on another link in my drawer navigator, I would like that the Products page's stack navigator would return to it's initialRoute when leaving the stack navigator.

I tried to set the initialState for when I exit the stack navigator, it render the initialState when I click on the navigator link in my drawer navigator, but it doesn't work when I'm in the child page and exit the navigator. When I click again on Products in my drawer, instead of navigate to the Products page, it stayed on Product.

I can create statics links in my drawer navigator and use this.props.navigation.navigate to always go to this.props.navigation.navigate('Products'), but it will be the last thing I want. I would really love that my drawer navigator stays dynamic with what I pass to it.

I tried to this.props.navigation.navigate when the componentWillUnmountlifecycle goes on, but it didn't work.

How can I do this?

Thank you for your help!

maybe instead of setting a bounty, you may want to show us a clear explanation of your issue, including images and steps, code snippets. 99% of the question on SO go unanswered because they are badly written — Fabrizio Bertoglio, Jul 25 '19 at 00:40
Because it is a very simple question who can be done in everyway with every navigator when you know it. It's not in my own code but more a general question. If you read right, I even suggest a way, I would love to not follow, to do this. — Mike Boutin, Jul 26 '19 at 12:29

score 1 · Accepted Answer · answered Jul 27 '19 at 10:19

Yes it is entirely possible to reset the stack with react-navigation, there is a specific action for this.

Here is an example when the drawer is in a tab navigation.

First we define our drawer in MenuDrawer.js, nothing special here:

import { createDrawerNavigator } from 'react-navigation';

import ProductStack from './ProductStack';
import OtherStack from './OtherStack';

const MenuDrawer = createDrawerNavigator({
  Product: {
    screen: ProductStack,
    navigationOptions: {
      drawerLabel: 'My products',
    },
  },
  Other: {
    screen: OtherStack,
    navigationOptions: {
      drawerLabel: 'Something else',
    },
  },
});


export default MenuDrawer;

Finally we define our tab navigation, and we use the tabBarOnPress navigation option to listen to any drawer opening and reset the stack if needed:

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

import MenuDrawer from './MenuDrawer';

const BottomTabs = createBottomTabNavigator({
  Menu: {
    screen: MenuDrawer,
    navigationOptions: {
      title: 'Menu',
      tabBarOnPress: ({ navigation }) => {
        const notResetRoute = navigation.state.routes.find(x => x.index > 0); // Check for stack not positioned at the first screen
        if (notResetRoute) {
          const resetAction = StackActions.reset({ // We reset the stack (cf. documentation)
            index: 0,
            actions: [
              NavigationActions.navigate({ routeName: notResetRoute.routes[0].routeName }),
            ],
          });
          navigation.dispatch(resetAction);
        }
        navigation.openDrawer(); // Finally we open the drawer
      },
    },
  },
});


export default BottomTabs;

Here the drawer is opened when the user clicks on the corresponding tab. Obviously the same could be made if the drawer is opened differently, for instance through a click on a button in a given screen. The important thing is to reset the stacks at the same time.

Hi, I would you adapt it with the reactNavigation v5? I posted this https://stackoverflow.com/questions/43090884/resetting-the-navigation-stack-for-the-home-screen-react-navigation-and-react-n?rq=1 — Alexandre, Mar 31 '20 at 15:59

score -1 · Answer 2 · answered Jul 27 '19 at 10:19

-1

import { NavigationActions } from 'react-navigation'

this.props.navigation.dispatch(NavigationActions.reset({
    index: 0,
    key: null,
    actions: [NavigationActions.navigate({ routeName: 'ParentStackScreen' })]
}))

answered Jul 27 '19 at 10:19

Kiran JD

521
6
15

An Explanation would help understand Better. – Najam Us Saqib Jun 22 '21 at 12:48

How to go to initialRoute with react-navigation when exiting a child stack navigator inside a drawer?

2 Answers2

Linked