From 8f6b739453485afc580601a4c8fc962dc02a280d Mon Sep 17 00:00:00 2001
From: ayoub khourbach <ayoubkhourbach@gmail.com>
Date: Tue, 2 Jun 2026 13:02:02 +0100
Subject: [PATCH] fix: hide splash screen from root layout

---
 src/app/(app)/_layout.tsx | 14 +-------------
 src/app/_layout.tsx       | 23 +++++++++++++++++++++--
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/app/(app)/_layout.tsx b/src/app/(app)/_layout.tsx
index d8310d97d..e174b2797 100644
--- a/src/app/(app)/_layout.tsx
+++ b/src/app/(app)/_layout.tsx
@@ -1,6 +1,5 @@
-import { Link, Redirect, SplashScreen, Tabs } from 'expo-router';
+import { Link, Redirect, Tabs } from 'expo-router';
 import * as React from 'react';
-import { useCallback, useEffect } from 'react';
 
 import { Pressable, Text } from '@/components/ui';
 import {
@@ -14,17 +13,6 @@ import { useIsFirstTime } from '@/lib/hooks/use-is-first-time';
 export default function TabLayout() {
   const status = useAuth.use.status();
   const [isFirstTime] = useIsFirstTime();
-  const hideSplash = useCallback(async () => {
-    await SplashScreen.hideAsync();
-  }, []);
-  useEffect(() => {
-    if (status !== 'idle') {
-      const timer = setTimeout(() => {
-        hideSplash();
-      }, 1000);
-      return () => clearTimeout(timer);
-    }
-  }, [hideSplash, status]);
 
   if (isFirstTime) {
     return <Redirect href="/onboarding" />;
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
index 9ec7490ac..197aff4b0 100644
--- a/src/app/_layout.tsx
+++ b/src/app/_layout.tsx
@@ -1,3 +1,4 @@
+import type { ViewProps } from 'react-native';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 
 import { ThemeProvider } from '@react-navigation/native';
@@ -34,8 +35,19 @@ SplashScreen.setOptions({
 });
 
 export default function RootLayout() {
+  const hasHiddenSplash = React.useRef(false);
+
+  const onLayoutRootView = React.useCallback(() => {
+    if (hasHiddenSplash.current) {
+      return;
+    }
+
+    hasHiddenSplash.current = true;
+    SplashScreen.hide();
+  }, []);
+
   return (
-    <Providers>
+    <Providers onLayout={onLayoutRootView}>
       <Stack>
         <Stack.Screen name="(app)" options={{ headerShown: false }} />
         <Stack.Screen name="onboarding" options={{ headerShown: false }} />
@@ -45,10 +57,17 @@ export default function RootLayout() {
   );
 }
 
-function Providers({ children }: { children: React.ReactNode }) {
+function Providers({
+  children,
+  onLayout,
+}: {
+  children: React.ReactNode;
+  onLayout: ViewProps['onLayout'];
+}) {
   const theme = useThemeConfig();
   return (
     <GestureHandlerRootView
+      onLayout={onLayout}
       style={styles.container}
       // eslint-disable-next-line better-tailwindcss/no-unknown-classes
       className={theme.dark ? `dark` : undefined}