feat : Première navigation

src/app/_layout.tsx

@@ -1,28 +1,27 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
-import { StatusBar } from 'expo-status-bar';
+import * as SystemUI from 'expo-system-ui';
 import { useEffect } from 'react';
+import { StatusBar } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { queryClient } from '../hooks/queryClient';
 import { useAppFonts } from '../theme/typography';
 
 import { useAuth } from '@/stores/authStore';
+import colors from '@/theme/colors';
 
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
   const [fontsLoaded] = useAppFonts();
-
-  if (!fontsLoaded) {
-    return null;
-  }
-
   const hydrated = useAuth((state) => state.hydrated);
   const hydrate = useAuth((state) => state.hydrate);
 
-  useEffect(() => { hydrate(); }, []);
+  useEffect(() => {
+    hydrate();
+  }, [hydrate]);
 
   const ready = hydrated && fontsLoaded;
 
@@ -30,13 +29,21 @@ export default function RootLayout() {
     if (ready) SplashScreen.hideAsync();
   }, [ready]);
 
+  useEffect(() => {
+    SystemUI.setBackgroundColorAsync(colors.deepBackground);
+  }, []);
+
   if (!ready) return null;
 
   return (
     <QueryClientProvider client={queryClient}>
       <SafeAreaProvider>
-        <StatusBar style="auto" />
-        <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: '#0B0B12' } }}>
+        <StatusBar
+          barStyle="light-content"
+          backgroundColor={colors.deepBackground}
+          translucent={false}
+        />
+        <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: colors.deepBackground } }}>
           <Stack.Screen name="(auth)" />
           <Stack.Screen name="(tabs)" />
           <Stack.Screen name="(org)" />