Prevent user from returning to previous screen StackNavigator

Question

I want to do a simple task: after a successful login redirect the user to his home page. I use react-navigation's StackNavigator for that purpose:

// App.js

class App extends Component {
  render() {
    return (<RootStack />);
  }
}

const RootStack = createStackNavigator(
  {
    Login: { screen: Login, navigationOptions: { header: null }},
    Home: { screen: Home, navigationOptions: { header: null }}
  },
  {
    initialRouteName: 'Root'
  }
)

How do I prevent user from returning to Login screen after login? To prevent use back button in android, I would use this one:

// Home.js

import React, { Component} from 'react';
import { ... , BackHandler } from 'react-native';

class Home extends Component {
    constructor(props) {
        super(props);
        BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid);
    }
    onBackButtonPressAndroid = () => {
        return true;
    }
}

But doing this way, I disable back button at all. Is there another way to achieve the goal?

Answer 1

The react native documentation has an excellent page on how to make an authentication flow.

You may not be familiar with SwitchNavigator yet. The purpose of SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away. This is the exact behavior that we want from the authentication flow: when users sign in, we want to throw away the state of the authentication flow and unmount all of the screens, and when we press the hardware back button we expect to not be able to go back to the authentication flow. We switch between routes in the SwitchNavigator by using the navigate action. You can read more about the SwitchNavigator in the API reference.

According to the documentation, this SwitchNavigator is implemented like this:

import { createSwitchNavigator, createStackNavigator } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

So, to achieve what you are looking for, you would want to change your RootStack to the following (note i have not tested this code):

const RootStack = createSwitchNavigator(
  {
    Loading: ,//put your loading screen here
    Auth: { screen: Login, navigationOptions: { header: null }},
    App: { screen: Home, navigationOptions: { header: null }}
  },
  {
    initialRouteName: 'Loading'
  }
)

Then, in your loading screen, you would fetch whatever state is needed to determine if the user is already signed in and you would call either this.props.navigation.navigate('App'); to skip the login screen and take the user directly to your app, or this.props.navigation.navigate('Auth'); to send your user to the login page. the SwitchNavigator automatically handles disabling back navigation for you.