I don't understand a React Navigation behaviour

Issue

I have this function in a react-native (typescript) app :

import { LoginProps } from '../types';

export const signOut = async (auth: Auth, nav: LoginProps['navigation'], setUser: any) => {
    try {
        await auth.signOut();
        nav.navigate('Login');
        setUser(null);
    } catch (error) {
        console.log(error);
    }
}

This function works as intended but if I comment or delete this line : await auth.signOut();,
I got this error : The action 'NAVIGATE' with payload {"name":"Login"} was not handled by any navigator.

Same thing if I try to just navigate without doing anything else in the function.
I don't understand how these two lines are linked and why the first is necessary for the second to works...

I encountered this problem while testing things to resolve this post.

Here are my types :

export type RootStackParamList = {
    Home: undefined;
    Login: undefined;
    Register: undefined;
    Game: { roomId: string | null };
}

export type NavigationProps<T extends keyof RootStackParamList> = {
    navigation: StackNavigationProp<RootStackParamList, T>;
}

export type HomeProps = NavigationProps<'Home'>;
export type LoginProps = NavigationProps<'Login'>;
export type RegisterProps = NavigationProps<'Register'>;
export type GameProps = NavigationProps<'Game'>;

Solution

please take a look here : https://reactnavigation.org/docs/auth-flow

I think only this line work to navigate to Login

await auth.signOut();

Not this line:

nav.navigate('Login');

Because if auth = null, the Navigator automatically choose LoginScreen. So the code nav.navigate('Login'); were redundant, you dont need it.

That why's you can not navigate to Login by comment this line await auth.signOut();

Answered By - famfamfam