Ok it might work

apk/components/views/loading-screen.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { View, Text, ActivityIndicator, StyleSheet } from "react-native";
+
+export default function LoadingScreen({ message = "Loading..." }) {
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator size="large" color="#ffffff" />
+      <Text style={styles.text}>{message}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  text: {
+    marginTop: 10,
+    fontSize: 16,
+  },
+});

apk/components/views/root-navigation.tsx

@@ -1,29 +1,32 @@
 import { BirthdaysProvider } from "@/context/birthdays-context";
 import { useAuth } from "@/context/auth-context";
 import { Stack, router, useRootNavigationState, useSegments } from "expo-router";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
+import LoadingScreen from "./loading-screen";
 
 export default function RootLayout() {
   const { user, isHydrated } = useAuth();
   const navigationState = useRootNavigationState();
   const segments = useSegments();
+  const [loaded, setLoaded] = React.useState(false);
 
   useEffect(() => {
-    if (!isHydrated || !navigationState?.key) {
-      return;
-    }
+  if (!isHydrated || !navigationState?.key) return;
 
-    const inAuthGroup = segments[0] === "(auth)";
+  const inAuthGroup = segments.length === 0;
 
-    if (!user && !inAuthGroup) {
-      router.replace("/(auth)/login");
-      return;
-    }
+  if (!user) {
+    router.replace("/(auth)/login");
+  } else if (inAuthGroup) {
+    router.replace("/(tabs)");
+  }
 
-    if (user && inAuthGroup) {
-      router.replace("/(tabs)");
-    }
-  }, [isHydrated, navigationState?.key, segments, user]);
+  setLoaded(true); // 👈 ALWAYS run this
+}, [isHydrated, navigationState?.key, segments, user]);
+
+  if(!loaded) {
+    return (<LoadingScreen />); // or a loading spinner
+  }
 
   return (
     <BirthdaysProvider>

apk/components/views/tabs.tsx

@@ -1,31 +0,0 @@
-import {
-  DarkTheme,
-  DefaultTheme,
-  ThemeProvider,
-} from "@react-navigation/native";
-import { Stack } from "expo-router";
-import { StatusBar } from "expo-status-bar";
-import "react-native-reanimated";
-
-import { BirthdaysProvider } from "@/context/birthdays-context";
-import { useColorScheme } from "@/hooks/use-color-scheme";
-
-export const unstable_settings = {
-  anchor: "(tabs)",
-};
-
-export default function RootLayout() {
-  const colorScheme = useColorScheme();
-
-  return (
-    <BirthdaysProvider>
-      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-        <Stack>
-          <Stack.Screen name="index" options={{ headerShown: false }} />
-          <Stack.Screen name="add" options={{ headerShown: false }} />
-        </Stack>
-        <StatusBar style="auto" />
-      </ThemeProvider>
-    </BirthdaysProvider>
-  );
-}