* Extended functionalities

* Added different UIs

meal-plan-frontend-mobile/app/_layout.tsx

@@ -0,0 +1,70 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useFonts } from 'expo-font';
+import { Stack } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
+import { useEffect, useState } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import 'react-native-reanimated';
+
+import { AuthProvider } from '@/src/context/AuthContext';
+import { AppearanceProvider } from '@/src/context/AppearanceContext';
+import { ReminderNotificationBridge } from '@/src/components/ReminderNotificationBridge';
+import i18n, { initI18n } from '@/src/i18n';
+
+export { ErrorBoundary } from 'expo-router';
+
+SplashScreen.preventAutoHideAsync();
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      staleTime: 30_000,
+    },
+  },
+});
+
+export default function RootLayout() {
+  const [ready, setReady] = useState(false);
+  const [loaded, error] = useFonts({
+    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+  });
+
+  useEffect(() => {
+    if (error) throw error;
+  }, [error]);
+
+  useEffect(() => {
+    (async () => {
+      await initI18n();
+      setReady(true);
+    })();
+  }, []);
+
+  useEffect(() => {
+    if (loaded && ready) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded, ready]);
+
+  if (!loaded || !ready) {
+    return null;
+  }
+
+  return (
+    <I18nextProvider i18n={i18n}>
+      <QueryClientProvider client={queryClient}>
+        <AppearanceProvider>
+          <AuthProvider>
+            <ReminderNotificationBridge />
+            <Stack screenOptions={{ headerShown: false }}>
+              <Stack.Screen name="index" />
+              <Stack.Screen name="(auth)" />
+              <Stack.Screen name="(main)" />
+            </Stack>
+          </AuthProvider>
+        </AppearanceProvider>
+      </QueryClientProvider>
+    </I18nextProvider>
+  );
+}