'Reset navigation history to Login screen using react navigation

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:[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:[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:[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,
});
});

Solution 4:[4]

For those who use version 5.x, Ahmed Mersal's solution is perfect.

Starting from that, we can do a reusable React hook:

import { useNavigation, CommonActions } from "@react-navigation/native";
import { useEffect } from "react";

export const useRemoveRouteFromState = (
  routeName: keyof ReactNavigation.RootParamList
) => {
  const navigation = useNavigation();

  useEffect(() => {
    navigation.dispatch((state) => {
      const routes = state.routes.filter(({ name }) => name !== routeName);

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

Then, inside a component, we just have to use it:

export const PurchaseScreen: React.FC = () => {
  useRemoveRouteFromState('Home');

  // ...
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 David Schumann
Solution 2 John Lim
Solution 3 ahmed mersal
Solution 4 Thibault Boursier