Reset navigation history to Login screen using react navigation

Question

I would like after Login (Welcome) the user to navigate to Home. I reset the history so the user cannot go back like this:

const actionToDispatch = NavigationActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'Home' })]
        });

        this.props.navigation.dispatch(actionToDispatch);

This works properly. After pressing Log Out the user should go back to Welcome but it's not working. Here's what exactly I am doing:

const resetAction = NavigationActions.reset({
            index: 0,
            actions: [
                NavigationActions.navigate({ routeName: 'Welcome' }),
            ]
        });

        this.props.navigation.dispatch(resetAction);

The error says that there is no route for 'Welcome'. Must be one of 'Main', 'Privacy', 'Terms' which are routes of one of the tabs in the Home. See them below:

 const AppStack = StackNavigator({
                    Welcome: {
                        screen: Welcome
                    },
                    Home: {
                        screen: Tabs
                    }
                }, {
                        initialRouteName: this.state.isLoggedIn ? 'Home' : 'Welcome',
                        headerMode: 'none'
                    }
                );

export const ProfileStack = StackNavigator({
    Profile: {
        screen: Profile,
    },
});

export const SettingsStack = StackNavigator({
    Settings: {
        screen: Settings,
    },
}, {
    });

export const InfoStack = StackNavigator({
    Main: {
        screen: Main,
    },
    Privacy: {
        screen: Privacy
    },
    Terms: {
        screen: Terms
    }
});

const routeConfiguration = {

    Profile: { screen: ProfileStack },
    Settings: { screen: SettingsStack },
    Info: { screen: InfoStack }
};

const tabBarConfiguration = {
    tabBarOptions: {
        activeTintColor: 'white',
        inactiveTintColor: 'lightgray',
        labelStyle: {
            fontSize: Normalize(10),
            fontFamily: Fonts.book
        },
        style: {
            backgroundColor: Colors.greenLightGradient,
            borderTopWidth: 1,
            borderTopColor: Colors.tabGreenLine
        },
    }
};

export const Tabs = TabNavigator(routeConfiguration, tabBarConfiguration);

Solution 1

I found the solution here: https://github.com/react-community/react-navigation/pull/789.

const resetAction = NavigationActions.reset({
            index: 0,
            actions: [
                NavigationActions.navigate({ routeName: 'Welcome' }),
            ],
            key: null
        });

this.props.navigation.dispatch(resetAction);

key: null is the important part.

Solution 2

For anyone who is looking for React Navigation 3.x and 4.x solution

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

 const resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({routeName: 'Home'})],
      key: null,
    });
    this.props.navigation.dispatch(resetAction);

React Navigation move the reset method to StackActions since 3.x

Solution 3

replace home with any screen you want reset history for (v5)

import { CommonActions } from '@react-navigation/native';
  navigation.dispatch(state => {
 // Remove the home route from the stack
 const routes = state.routes.filter(r => r.name !== 'Home');

 return CommonActions.reset({
...state,
routes,
index: routes.length - 1,
});
});