Add select langauge screen

app/_layout.tsx

@@ -1,30 +1,20 @@
 import i18next, { getLanguage } from "../services/i18n/index";
 import FontAwesome from "@expo/vector-icons/FontAwesome";
-import {
-  DarkTheme,
-  DefaultTheme,
-  ThemeProvider,
-} from "@react-navigation/native";
 import { useFonts } from "expo-font";
 import { Stack, useRouter } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect, useState } from "react";
 import "react-native-reanimated";
-import { I18nextProvider } from "react-i18next"; //I18nextProvider
+import { I18nextProvider } from "react-i18next";
 
 import { useColorScheme } from "@/components/useColorScheme";
 
-export {
-  // Catch any errors thrown by the Layout component.
-  ErrorBoundary,
-} from "expo-router";
+export { ErrorBoundary } from "expo-router";
 
 export const unstable_settings = {
-  // Ensure that reloading on `/modal` keeps a back button present.
   initialRouteName: "(tabs)",
 };
 
-// Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
@@ -33,18 +23,43 @@ export default function RootLayout() {
     ...FontAwesome.font,
   });
 
-  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
+  const [appIsReady, setAppIsReady] = useState(false);
+  const [shouldRedirect, setShouldRedirect] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    const initLang = async () => {
+      const lang = await getLanguage();
+      if (!lang) {
+        console.log("Redirecting to language init...");
+        setShouldRedirect(true);
+      }
+
+      setAppIsReady(true);
+    };
+
+    initLang();
+  }, []);
+
   useEffect(() => {
     if (error) throw error;
   }, [error]);
 
   useEffect(() => {
-    if (loaded) {
+    if (loaded && appIsReady) {
       SplashScreen.hideAsync();
     }
-  }, [loaded]);
+  }, [loaded, appIsReady]);
 
-  if (!loaded) {
+  useEffect(() => {
+    if (appIsReady && shouldRedirect) {
+      router.replace("/init/language");
+      setShouldRedirect(false);
+    }
+  }, [appIsReady, shouldRedirect]);
+
+  if (!loaded || !appIsReady) {
+    console.log("!loaded || !appIsReady", loaded, appIsReady);
     return null;
   }
 
@@ -52,16 +67,12 @@ export default function RootLayout() {
 }
 
 function RootLayoutNav() {
-  const colorScheme = useColorScheme();
-
   return (
     <I18nextProvider i18n={i18next}>
-      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-          <Stack.Screen name="modal" options={{ presentation: "modal" }} />
+        <Stack.Screen name="modal" options={{ presentation: "modal" }} />
       </Stack>
-    </ThemeProvider>
     </I18nextProvider>
   );
 }

app/init/language.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { setLanguage } from "../../services/i18n/index";
+import { useRouter, useNavigation } from "expo-router";
+
+const LanguageScreen = () => {
+  const router = useRouter();
+  const navigation = useNavigation();
+  const [selectedLang, setSelectedLang] = useState<string | null>(null);
+
+  useEffect(() => {
+    navigation.setOptions({ headerShown: false });
+  }, [navigation]);
+
+  const handleLanguagePress = (lang: string) => {
+    setSelectedLang(lang);
+  };
+
+  const handleSelect = async () => {
+    if (selectedLang) {
+      await setLanguage(selectedLang);
+      router.replace("/auth/login");
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Select Language</Text>
+      <Text style={styles.subtitle}>Please select your preferred language</Text>
+
+      <TouchableOpacity
+        style={[
+          styles.languageCard,
+          selectedLang === "en" && styles.selectedCard,
+        ]}
+        onPress={() => handleLanguagePress("en")}
+      >
+        <Text style={styles.languageText}>English</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[
+          styles.languageCard,
+          selectedLang === "hi" && styles.selectedCard,
+        ]}
+        onPress={() => handleLanguagePress("hi")}
+      >
+        <Text style={styles.languageText}>हिन्दी</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[
+          styles.selectButton,
+          selectedLang ? styles.selectEnabled : styles.selectDisabled,
+        ]}
+        onPress={handleSelect}
+        disabled={!selectedLang}
+      >
+        <Text style={styles.selectButtonText}>Select</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#f3f5f8",
+    paddingTop: 108,
+    paddingHorizontal: 16,
+    paddingBottom: 80,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "600",
+    color: "#1a1c1e",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "#252a34",
+    marginBottom: 24,
+  },
+  languageCard: {
+    width: "100%",
+    borderWidth: 1,
+    borderColor: "#d8dde7",
+    borderRadius: 4,
+    padding: 16,
+    marginBottom: 16,
+    justifyContent: "center",
+  },
+  selectedCard: {
+    borderColor: "#008000",
+  },
+  languageText: {
+    fontSize: 16,
+    color: "#2f465e",
+  },
+  selectButton: {
+    marginTop: "auto",
+    padding: 16,
+    borderRadius: 4,
+    alignItems: "center",
+  },
+  selectDisabled: {
+    backgroundColor: "#b0b7c5",
+  },
+  selectEnabled: {
+    backgroundColor: "#008000",
+  },
+  selectButtonText: {
+    color: "#fdfdfd",
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});
+
+export default LanguageScreen;