How to navigate from a child Stack Navigator back to parent while resetting navigation stack at the same time, in React Native

Question

I've read countless react-navigation docs, and I know there is way to do this, but it's definitely what I would call non-trivial and definitely non-intuitive.

I have a root navigation stack:

export const NavigationStack = StackNavigator({
    Splash: {
        screen: Splash
    },
    Signup: {
        screen: Signup
    },
    Login: {
        screen: SignIn
    },
    ForgottenPassword: {
        screen: ForgottenPassword
    },
    Discover: {
        screen: Discover
    },
    ProfileShow: {
        screen: ProfileShow
    }
}, {
    headerMode: 'none'
})

The ForgottenPassword screen is a child Stack Navigator:

import { StackNavigator } from 'react-navigation'
import PasswordResetProcess from './index'

const ForgottenPassword = StackNavigator({
    ResetPassword: {
        screen: PasswordResetProcess
    }
}, {
        headerMode: 'none'
    })

export default ForgottenPassword

On that index.js Container Component, there is a sub-component that I pass navigation to, like this:

    switch (lastCompletedStep) {
        case NEW_RESET_REQUEST:
            return <InputTel navigation={navigation} />

        case INPUT_TEL:
            return <ResetPassword navigation={navigation} />

That ResetPassword component is the one in question. It triggers an action creator and passes this.props.navigation into the action creator:

await props.handleResetSubmit(token, props.navigation)

From inside this action creator, props.navigation is available as navigation . I can do this fine:

navigation.navigate('Discover') // see how this is from the root Navigation Stack

I cannot, however, do this:

navigation.dispatch({
    type: 'Navigation/RESET',
    index: 0,
    actions: [{ type: 'Navigate', routeName: 'Discover' }]
})

It throws this error:

[edit] I just tried this and it also generated the same error:

    navigation.dispatch(NavigationActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'Discover' })]
    }))

How do I reset the stack while navigating to Discover from here?

I feel like the answer is to navigate to discover and reset the stack at the same time as some kind of child operation, but I don't know where to begin putting that together. The react-navigation documentation is horrendous for illustrating child to parent operations.

Here is my best guess at what it approximately has to look like:

navigation.dispatch({
    type: 'Navigation/NAVIGATE',
    routeName: 'Discover',
    actions: [{ type: 'Reset', index: 0, key: null }]
})

Answer 1

I just solved it with this code:

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

The secret was to add key: null , which I have seen people doing before. It is a very important element for times when you are resetting.

Here is the documentation I found that illustrates it:

https://github.com/react-community/react-navigation/issues/1127

I think this works because NavigationActions has knowledge of the root navigation stack, so it works for the same reason navigation.navigate('Discover') worked (in the context of my code in this question).

Answer 2

in version >2 of react navigation, NavigationActions.reset() doesnt work. You should use StackActions.reset() instead:

import { NavigationActions, StackActions } from 'react-navigation';
const resetStackAction = StackActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'Discover' })],
    });
this.props.navigation.dispatch(resetStackAction);