Question 280146 in React native Question posted in
The official React Native documentation can be found here.

React native – I don't understand a React Navigation behaviour

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'>;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It was because my screens are defined like this :

    return (
    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <>
            <Stack.Screen
              name="Home"
              component={Home}
              options={{ headerShown: false }}
            />
            <Stack.Screen
                name='Game'
                component={Game}
                options={{ headerShown: false }}
            />
          </>
        ) : (
          <>
            <Stack.Screen
              name='Login'
              component={Login}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name='Register'
              component={Register}
              options={{ headerShown: false }}
            />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );

    As you can see, the variable user has to be undefined for the Login screen to be defined, so if the User is connected, the Login screen stays undefined in the context, and is therefor, not handled by any navigator.

    EDIT :
    I found the answer myself like 5 minutes after posting but could not auto-answer because it was too soon.
    Unfortunately I forgot to get back online later to post it... But I received a good response from @famfamfam :)


  2. 0

    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();

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search