CODEWITHSUNDEEP
react-nativereact-navigation
Jakub Krakowiak
Jakub Krakowiak

Reputation: 33

React navigation stack navigator disable go back ability

How to disable ability to go back

I have a functional component 

    export default function App(){

createHomeStackNavigator = () =>
    <Stack.Navigator screenOptions={{
                        headerShown: false
    }}>
        <Stack.Screen
            name="Login"
            component={Login}
        />
        <Stack.Screen
            name="Home"
            children={createHomeTabNavigator}
        />
    </Stack.Navigator>
return(
    <NavigationContainer>
        {createHomeStackNavigator()}
    </NavigationContainer>
)

When user goes to Home, its onclick on Login component then he cant go back to the login by any swipe on ios, back button on Android and other ways

Upvotes: 0

Views: 450

Answers (2)

Yilmaz
Yilmaz

Reputation: 49182

When you set up StackNavigatorParams set redirect param for Login screen

import { createStackNavigator} from "@react-navigation/stack";

export type StackNavigatorParams = {
    Home: undefined;
    Settings: undefined;
    Login: { redirect: keyof StackNavigatorParams } | undefined;
};

const Stack = createStackNavigator<StackNavigatorParams>();

Now inside loginHandler when the user press LoginButton you set the redirect param. When stack navigator ever detects redirecting to "Login" page it will redirect the user to the "Home" screen

export default function Login({ navigation, route }: LoginProps): ReactElement {
    const [formState, setFormState] = useState({
        username: "username",
        password: ""
    });

    const redirect = route.params?.redirect;

    const login = async () => {
        const { username, password } = formState;
        try {
            await yourSignInFunction(username, password);
            // "replace", if we go back, we go back to "Home" not to Login
            redirect ? navigation.replace(redirect) : navigation.navigate("Home");
        } catch (e) {}
    };

    return <Button onPress={login} />;
}

Upvotes: 0

Yuriy Rybin
Yuriy Rybin

Reputation: 25

Probably you should use navigation.reset();

Upvotes: 1

Related Questions