Mobile App design

apps/frontend-mobile/app/_layout.tsx

@@ -7,12 +7,13 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useAuthStore } from '../store/authStore';
 import { registerForPushNotifications, addNotificationListener, addNotificationResponseListener } from '../services/notifications';
-import { colors } from '../constants/theme';
+import { ThemeProvider, useThemeContext } from '../components/ThemeProvider';
 
 const queryClient = new QueryClient();
 
-export default function RootLayout() {
+function RootLayoutInner() {
   const { checkAuth } = useAuthStore();
+  const { colors, isDark } = useThemeContext();
   const notificationListener = useRef<ReturnType<typeof addNotificationListener>>();
   const responseListener = useRef<ReturnType<typeof addNotificationResponseListener>>();
 
@@ -35,6 +36,52 @@ export default function RootLayout() {
     };
   }, []);
 
+  return (
+    <>
+      <Stack
+        screenOptions={{
+          headerStyle: { backgroundColor: colors.card },
+          headerTintColor: colors.primary,
+          headerTitleStyle: { color: colors.text, fontWeight: '600' },
+        }}
+      >
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen 
+          name="medicine/[id]" 
+          options={{ title: 'Medicamento' }} 
+        />
+        <Stack.Screen 
+          name="pharmacy/[id]" 
+          options={{ title: 'Farmacia' }} 
+        />
+        <Stack.Screen 
+          name="scanner" 
+          options={{ 
+            title: 'Escanear',
+            headerShown: false,
+          }} 
+        />
+        <Stack.Screen 
+          name="auth/login" 
+          options={{ 
+            title: 'Iniciar Sesión',
+            headerShown: false,
+          }} 
+        />
+        <Stack.Screen 
+          name="auth/register" 
+          options={{ 
+            title: 'Registrarse',
+            headerShown: false,
+          }} 
+        />
+      </Stack>
+      <StatusBar style={isDark ? 'light' : 'auto'} />
+    </>
+  );
+}
+
+export default function RootLayout() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <ImageBackground
@@ -46,45 +93,9 @@ export default function RootLayout() {
       <View style={bgStyles.overlay} />
       <SafeAreaProvider>
         <QueryClientProvider client={queryClient}>
-          <Stack
-            screenOptions={{
-              headerStyle: { backgroundColor: colors.card },
-              headerTintColor: colors.primary,
-              headerTitleStyle: { color: colors.text, fontWeight: '600' },
-            }}
-          >
-            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-            <Stack.Screen 
-              name="medicine/[id]" 
-              options={{ title: 'Medicamento' }} 
-            />
-            <Stack.Screen 
-              name="pharmacy/[id]" 
-              options={{ title: 'Farmacia' }} 
-            />
-            <Stack.Screen 
-              name="scanner" 
-              options={{ 
-                title: 'Escanear',
-                headerShown: false,
-              }} 
-            />
-            <Stack.Screen 
-              name="auth/login" 
-              options={{ 
-                title: 'Iniciar Sesión',
-                headerShown: false,
-              }} 
-            />
-            <Stack.Screen 
-              name="auth/register" 
-              options={{ 
-                title: 'Registrarse',
-                headerShown: false,
-              }} 
-            />
-          </Stack>
-          <StatusBar style="auto" />
+          <ThemeProvider>
+            <RootLayoutInner />
+          </ThemeProvider>
         </QueryClientProvider>
       </SafeAreaProvider>
       </ImageBackground>