CODEWITHSUNDEEP
react-nativereact-navigation
Victor Ang
Victor Ang

Reputation: 133

How to remove a route from react navigation stack?

So in my react-native project i have a Stack.Navigator like this.

<Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Splash" component={SplashScreen} />
    {authState.isLoggedIn && authState.token !== "" ? (
    <>
        <Stack.Screen name="Root" component={Root} />
        <Stack.Screen name="Detail" component={DetailScreen} />
    </>
    ) : (
    <>
        <Stack.Screen name="Welcome" component={WelcomeScreen} />
        <Stack.Screen name="SignIn" component={SignInScreen} />
    </>
    )}
</Stack.Navigator>

SignIn Function:

const onSignIn = () => {
    dispatch(
        signIn({
            /// ...userData,
            isLoggedIn: true,
        })
    );
};

Flow when opening App:

What i expect is that after the user has login from SignIn page, the user doesn't need to see Splash page again. I have read about CommonActions and StackActions but i don't understand how to properly use it.

Note: I'm using redux to handle the authState and even though that i don't manually navigate it, it is already navigate to Splash and Root Page

Have tried this but still does not work

const onSignIn = () => {
    navigation.dispatch(
        CommonActions.reset({
            index: 0,
            routes: [{ name: "Splash" }],
        })
    );
    dispatch(
        signIn({
            /// ...userData,
            isLoggedIn: true,
        })
    );
};

Upvotes: 1

Views: 2098

Answers (1)

Ragnar
Ragnar

Reputation: 846

this will reset navigation stack to the route you are navigating and every thing else will be cleared so when user press back button there will be no screen to go back to.

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

use navigateToScreen method and pass route name you want to navigate to

 //---- CLEAR STACK AND REDIRECT USER TO ANOTHER SCREEN ----//
    const navigateToScreen = (name) => {
        navigation.dispatch(
            CommonActions.reset({
                index: 0,
                routes: [{ name },],
            })
        );
    }

Upvotes: 1

Related Questions