feat(i18n): add internationalization with i18next and expo-localization

src/providers/WatchProvider.tsx

@@ -1,16 +1,27 @@
-import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import { createContext, useContext, useState, type ReactNode } from "react";
 import { createMMKV } from "react-native-mmkv";
+import i18n, {
+  type LanguageCode,
+  type StoredLanguage,
+  getStoredLanguage,
+  setStoredLanguage,
+  resolveLanguage,
+} from "../i18n";
 
 const storage = createMMKV();
 
 type SettingsContextType = {
   poolLength: number;
   setPoolLength: (length: number) => void;
+  language: StoredLanguage;
+  setLanguage: (code: StoredLanguage) => void;
 };
 
 const SettingsContext = createContext<SettingsContextType>({
   poolLength: 25,
   setPoolLength: () => {},
+  language: "system",
+  setLanguage: () => {},
 });
 
 export function useSettings() {
@@ -23,13 +34,23 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
     return stored ?? 25;
   });
 
+  const [language, setLanguageState] = useState<StoredLanguage>(() => {
+    return getStoredLanguage() ?? "system";
+  });
+
   const setPoolLength = (length: number) => {
     setPoolLengthState(length);
     storage.set("poolLength", length);
   };
 
+  const setLanguage = (code: StoredLanguage) => {
+    setLanguageState(code);
+    setStoredLanguage(code);
+    i18n.changeLanguage(resolveLanguage(code));
+  };
+
   return (
-    <SettingsContext.Provider value={{ poolLength, setPoolLength }}>
+    <SettingsContext.Provider value={{ poolLength, setPoolLength, language, setLanguage }}>
       {children}
     </SettingsContext.Provider>
   );