I have a problem with the main logic of my application made in react native, using the router “Expo Router”, what happens is that apparently, it does not work well a conditional evaluation, which shows the Drawer with the user panel, or a Stack with the login and registration, found in the layout root of the application.
I am using Expo 52.0.7 together with expo-router version ~4.0.5.
This is my configuration.
package.json
"main": "expo-router/entry",
My file directory is this one:
App/
(auth)
_layout.tsx
login.tsx
register.tsx
(drawer)
_layout.tsx
index.tsx
user_profile.tsx
The starting point is in App/_layout.tsx, here you should check if there is user logged in or not, if there is user logged in, show a With user panel, if not, show the Stack where eta the log-in and registration.
App/(auth)/_layout.tsx
export default function AuthLayout() {
return (
<Stack screenOptions={{
headerShown: false
}}>
<Stack.Screen
name="login"
options={{
title: 'Login'
}}
/>
<Stack.Screen
name="register"
options={{
title: 'Register'
}}
/>
</Stack>
// <Text>Auth Layout</Text>
);
}
And the main
App/_layout.tsx
export default function Layout() {
const [isLoggedIn, setIsLoggedIn] = useState(false)
const [user, setUser] = useState(null);
const [isInitialized, setIsInitialized] = useState(false);
const tamaguiConfig = createTamagui(config)
const [loaded] = useFonts({
Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
});
useEffect(() => {
async function initializeApp() {
try {
console.log("Iniciando loadUser...");
const userData = await loadUser();
console.log("userData recibido:", userData);
setUser(userData);
} catch (e) {
console.error("Error en loadUser:", e);
setUser(null);
} finally {
setIsInitialized(true);
}
}
initializeApp();
}, []);
if (!isInitialized || !loaded) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" />
</View>
);
}
return (
<TamaguiProvider config={tamaguiConfig}>
<Theme name="light">
<AuthContext.Provider value={{ user, setUser }}>
{isInitialized && (
user ? ( Here user is null or false, since he is not logged in, but still, instead of entering the ":", he enters the <drawer>....</drawer>. <DrawerLayout />
) : (
<Stack>
<Stack.Screen
name="(auth)"
options={{ headerShown: false }}
/>
</Stack>
)
)}
</AuthContext.Provider>
</Theme>
</TamaguiProvider>
);
}
I don’t know what the problem is, but before this with SDK51, I didn’t have any problems :/
**This is my AuthContext.
import {createContext} from "react";
const AuthContext = createContext({
user: null,
setUser: () => {}
});
export default AuthContext;
