React Navigation

[oskar-gmerek]

Im trying to use it with React Navigation

import { AuthProvider, useAuth } from './auth';
const { status, userToken } = useAuth();

<AuthProvider>
    <ApolloProvider client={client}> 
    <NavigationContainer>
      <Stack.Navigator>      
    {userToken == null ? (
      // No token found, user isn't signed in, login screen should be showed
      <Stack.Screen name="SignIn" component={SignInScreen} />
    ) : (
       // User is signed in, so should see Home Screen
      <Stack.Screen name="Home" component={HomeScreen} />
    ) 
      }
      
  </Stack.Navigator>
      </NavigationContainer>  
      </ApolloProvider>
      </AuthProvider>

I also display on both screens userToken content.

I see that content of userToken is changing (content jwt token after login, a null after log out), but screen is always the same.
Can you help me with that?

Kind Regards,
Oskar

[yjose]

you can't use useAuth at the same level as AuthProvider to make sure the useAuth will return the correct values.