Remove screen from stack navigator

One solution would be to reset the stack inside the splash screen component and redirect the user to the screen that you prefer:

import { NavigationActions } from 'react-navigation'

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

For newer versions of react-navigation :

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

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

Link to the official documentation


In react-navigation 5.x version. If you want to open new screen and remove previous stack screen, you can write: -

navigation.dispatch(StackActions.replace('screen_name', {params: {}}));

The replace action allows to replace a route in the navigation state. You can import it as:-

import { StackActions } from '@react-navigation/native';

If you want to perform other actions on stack navigation check out this link- https://reactnavigation.org/docs/stack-actions


One of the simplest solutions would be, replace current screen with new screen so user won't be allowed to go back.

const SplashScreen: () => {
    ...
  navigation.replace("LoginScreen"); // Move forward and Remove this screen from stack

see https://reactnavigation.org/docs/stack-actions/#replace


I solved it using this

code:

const prevGetStateForActionHomeStack = HomeStack.router.getStateForAction;
HomeStack.router = {
  ...HomeStack.router,
  getStateForAction(action, state) {
    if (state && action.type === 'ReplaceCurrentScreen') {
      const routes = state.routes.slice(0, state.routes.length - 1);
      routes.push(action);
      return {
        ...state,
        routes,
        index: routes.length - 1,
      };
    }
    return prevGetStateForActionHomeStack(action, state);
  },
};
replaceScreen = () => {
  const { locations, position } = this.props.navigation.state.params;
  this.props.navigation.dispatch({
    key: 'NearMeMap',
    type: 'ReplaceCurrentScreen',
    routeName: 'NearMeMap',
    params: { locations, position },
  });
};

Also if you need in-depth explanation of the code, watch this short video here