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