Switching between Stack Navigators React Native Navigation V5

Question

I have two steps for the user with their own Screens:

1. Login, Signup, and Enter Code (Confirmation).

I have these 3 screens as a Stack Navigator (code will be below).

2. Home, Questions, Categories.

These screens are in a different Stack Navigator.

What I want:

When the user completes the Sign in, or sign up process, they will be sent to the "Home Page". I want to switch Stack Navigators, so that the user cannot go "back" to the login screen, and also so that the Stack is cleared.

What I have tried:

I have previously used Redux to condtionially use one stack and switch after a value changes, this feels like too much work again for this functionality.

I have also tried nesting navigators, which didn't help (obviously).

Here is my StackNavigators.tsx file that contains all the stack navigators:

const Stack = createStackNavigator();

const AuthStack = createStackNavigator();

export const AuthStackNavigator = () => {
    return (
        <NavigationContainer>
            <AuthStack.Navigator>
                <AuthStack.Screen name={"Login"} component={Login} options={{
                    headerTitle: "Login",
                    headerStyle: {backgroundColor: "#eee"},
                    headerTintColor: GlobalStyles.darkColor
                }}/>
                <AuthStack.Screen name={"Signup"} component={Signup} options={{
                    headerTitle: "Sign Up",
                    headerStyle: {backgroundColor: "#eee"},
                    headerTintColor: GlobalStyles.darkColor
                }}/>
                <AuthStack.Screen name={"EnterCode"} component={EnterMfaCode} options={{
                    headerTitle: "Enter Code",
                    headerStyle: {backgroundColor: "#eee"},
                    headerTintColor: GlobalStyles.darkColor
                }}/>
            </AuthStack.Navigator>
        </NavigationContainer>
    )
}

export const BaseNavigator = () => {
    return (
            <Stack.Navigator>
                <Stack.Screen name={"Home"} component={Home} options={{
                    headerTitle: "Education",
                    headerStyle: {backgroundColor: "#eee"},
                    headerTintColor: GlobalStyles.darkColor
                }}/>
                <Stack.Screen name={"Questions"} component={Questions} options={{
                    headerStyle: {backgroundColor: "#eee"},
                    headerTintColor: GlobalStyles.darkColor,
                    headerTitle: "",
                    gestureEnabled: false,
                    headerBackTitle: "Categories"
                }}/>
                <Stack.Screen name={"Categories"} component={Categories} options={{
                    headerStyle: {backgroundColor: "#eee"},
                    headerTintColor: GlobalStyles.darkColor,
                    headerTitle: "",
                    headerBackTitle: "Start"
                }}/>
            </Stack.Navigator>
    );
};

I would be very thankful if an explanation for how to approach this issue would be. I Appreciate the time!

I think the auth flow Bogdan Dobai mentioned is a good approach. You could also use github.com/oblador/react-native-keychain with that so you can securely store tokens for example. Then you don't have to use Redux. But a quick and dirty solution could just be to disable the hardware back button with BackHandler (reactnative.dev/docs/backhandler.html) on your Home screen. — Bas van der Linden

Bogdan Dobai Bogdan Dobai · Accepted Answer · 2020-08-22T12:17:29

I feel like using Redux is a good and straight forward solution. Another option is to use LocalStorage to store some value and just take it from there.

As I want the user to be loggedIn after closing the application, I found that using LocalStorage + Redux feels like a great solution.

You can red more on this documentation on how to handle everything. https://reactnavigation.org/docs/auth-flow

Switching between Stack Navigators React Native Navigation V5

1 Answers