Expo app, auth0 and React Navigation don't work together?

[jinnielazzy]

Hello Team,

I’m new to auth0, expo and react native development. So I followed the quick start Auth0 Expo SDK Quickstarts: Add Login to your React Native App, and created basically the same application as I put my code here. However, even with react-devtool, I’m unable to understand why the page isn’t loading the navigation. I’m not sure if this is caused by react navigation library since it does display the UI if I replace <MyApp > with <View>HEY</View>. Hope I can have some help.

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
        title="Go to Details"
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  /* 2. Get the param */
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        onPress={() =>
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
        title="Go to Details... again"
      />
      <Button onPress={() => navigation.navigate('Home')} title="Go to Home" />
      <Button onPress={() => navigation.goBack()} title="Go back" />
    </View>
  );
}

function MyApp() {
  return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen component={HomeScreen} name="Home" />
          <Stack.Screen component={DetailsScreen} name="Details" />
        </Stack.Navigator>
      </NavigationContainer>
  );
}

function Home() {
  const { authorize, clearSession, user, error, isLoading } = useAuth0();
  console.log(user);

  const onLogin = async () => {
    try {
      await authorize();
    } catch (e) {
      console.log(e);
    }
  };

  const onLogout = async () => {
    try {
      await clearSession();
    } catch (e) {
      console.log('Log out cancelled');
    }
  };

  if (isLoading) {
    return (
      <View style={styles.container}>
        <Text>Loading</Text>
      </View>
    );
  }

  const loggedIn = user !== undefined && user !== null;

  return (
    <View style={styles.container}>
      <Text>HEY</Text>

      {loggedIn && <MyApp />}
      {!loggedIn && <Text>You are not logged in</Text>}
      {error && <Text>{error.message}</Text>}

      <Button onPress={loggedIn ? onLogout : onLogin} title={loggedIn ? 'Log Out' : 'Log In'} />
    </View>
  );
}

function App() {
  return (
    <Auth0Provider
      clientId="client Id"
      domain="domain"
    >
      <Home />
    </Auth0Provider>
  );
}