Reset react-navigation Stack from Drawer

Viewed 5395

A lot of issues opened on official react-navigation github: https://github.com/react-community/react-navigation/issues but no one gives a real solution, including one post saying "look at this problem, a lot of issues": https://github.com/react-community/react-navigation/issues/691 without answer.

Basically: I have a DrawerNavigator with some nested StackNavigator.

export const MainNavigator = DrawerNavigator(
    {
        OrderNew: {
            screen: OrderNew,
            navigationOptions: {
                drawerLabel: DrawerLabel('New Order')
            }
        },
        Orders: {
            screen: OrderNavigator, //a StackNavigator
            navigationOptions: {
                drawerLabel: DrawerLabel('Orders')
            }
        },
        MenuNavigator: {
            screen: MenuNavigator, //a StackNavigator
            navigationOptions: {
                drawerLabel: DrawerLabel('Menu')
            }
        },
    //more screens...
    {
        initialRouteName: 'Orders',
        drawerPosition: 'right',
        contentComponent: props => <ScrollView style={{backgroundColor: 'rgba(227, 100, 29, .95)'}}><DrawerMenu state={props} /></ScrollView>,
    }
);

So, I'm passing a contentComponent with my own menu component. My idea is to overwrite the onItemPress event of DrawerItems component and put my logic here.

What I want is: I would like to reset MenuNavigator (and other stack screens) every time users press that item. I just can't achieve this. As i said, I tried a lot of code. Actually, it's like this:

onItemPress={
    router => {
        const navigateAction = NavigationActions.navigate({
            routeName: router.route.routeName,
        });

        this.props.state.navigation.dispatch(navigateAction);
    }
}

The above code works, I can navigate through drawer items. Now, in my head, I just should pass an subaction resetting to the first item on navigator. So I tried:

onItemPress={
    router => {
        const navigateAction = NavigationActions.navigate({
            routeName: router.route.routeName,
            action: NavigationActions.reset({
                index: 0,
                actions: [
                    NavigationActions.navigate({routeName: router.route.routes[0].routeName}),
                ]
            })
        });

        this.props.state.navigation.dispatch(navigateAction);
    }
}

And explodes an error:

There is no route defined for key Menu. Must be one of: 'Orders','OrderClient'

Summarizing: how could I reset StackNavigator when I do navigate to another DrawerNavigator's item?

1 Answers

You are missing key: null.

Navigation actions should be like this.

 action: NavigationActions.reset({
                index: 0,
                key: null,   
                actions: [
                    NavigationActions.navigate({routeName: router.route.routes[0].routeName}),
                ]
            })
Related