Finish current component while navigating to next component using React Native Navigation?

Question

I wanted to close the current component completely while navigating to next component in react-native.

I am using react-navigation for navigating between screens.

Scenario is, I am having two js in my project, Login.js and Home.js. When user logs in into the app it saves the credentials in the AsyncStorage. Every-time when user comes to Login Screen it checks for whether user is logged in already or not. If the user is logged in then app will directly navigate you to the Home page, at this action I want to close the login screen completely.

Currently with my implementation the Login screen remains in to the navigation stack. When I press back from the Home page the app should be closed completely and should not relaunch with login screen again.

Here is my StackNavigator code :

const navigationStack = createStackNavigator(
  {
    Login: {
      screen: LoginScreen
    },
    Home: {
      screen: HomeScreen
    },
  },
);

For navigating :

this.props.navigation.navigate('Home');

Please let me know what I am doing wrong with my existing code?

Possible duplicate of [React-Navigation with Login Screen](https://stackoverflow.com/questions/42876690/react-navigation-with-login-screen) — bennygenel, May 15 '18 at 09:16
Hello @savelichalex, i have tried by resetting the stack navigation but still not working. Here the code used for resetting the stack : const resetAction = StackActions.reset({ index: 0, actions: [NavigationActions.navigate({ routeName: 'Details' })], }); this.props.navigation.dispatch(resetAction); — amol anerao, May 15 '18 at 09:18

score 1 · Answer 1 · answered May 25 '19 at 13:58

You can implement this by multiple ways. Like using replace or reset action on stack Navigator, or using switch Navigator instead of stack Navigator.

Using Reset: (Empty stack and navigate to specified screen)

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

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


this.props.navigation.dispatch(resetAction);

Using replace: (replace current screen with the specified screen)

this.props.navigation.replace("Home");

Using Switch Navigator:(Recommended)

const navigationStack = createSwitchNavigator(
  {
    Login: {
      screen: LoginScreen
    },
    Home: {
     screen: HomeScreen
    },
  },
); 

// Navigate to screen
this.props.navigation.navigate("Home");

score 0 · Answer 2 · answered May 15 '18 at 09:21

This can be achieved without having to add back handling code to each and every screen by modifying the getStateForAction method of the particular StackNavigator's router.

const navigationStack = createStackNavigator(
  {
    Login: {
      screen: LoginScreen
    },
    Home: {
      screen: HomeScreen
    },
  },
);

The getStateForAction method can be modified to achieve this

const defaultStackGetStateForAction =
  navigationStack.router.getStateForAction;

navigationStack.router.getStateForAction = (action, state) => {
  if(state.index === 0 && action.type === NavigationActions.BACK){
    BackHandler.exitApp();
    return null;
  }

  return defaultStackGetStateForAction(action, state);
};

the state.index becomes 0 only when there is one screen in the stack.

You can check with this Back Handling

Finish current component while navigating to next component using React Native Navigation?

2 Answers2