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?

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
– amol anerao, Commented May 15, 2018 at 9:18

Swapnil · Accepted Answer · 2019-05-25 13:58:36Z

1

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");

answered May 25, 2019 at 13:58

Swapnil

2152 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeeva · Accepted Answer · 2018-05-15 09:21:37Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related