feat: enable manually setting language in settings

app/_layout.tsx

@@ -273,9 +273,9 @@ function Layout() {
 
   useEffect(() => {
     i18n.changeLanguage(
-      settings?.preferedLanguage || getLocales()[0].languageCode || "en"
+      settings?.preferedLanguage ?? getLocales()[0].languageCode ?? "en"
     );
-  }, [settings]);
+  }, [settings?.preferedLanguage, i18n]);
 
   const appState = useRef(AppState.currentState);
 

components/settings/AppLanguageSelector.tsx

@@ -0,0 +1,80 @@
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { TouchableOpacity, View } from "react-native";
+import { Text } from "../common/Text";
+import { useSettings } from "@/utils/atoms/settings";
+import { t } from "i18next";
+import { APP_LANGUAGES } from "@/i18n";
+
+export const AppLanguageSelector = () => {
+  const [settings, updateSettings] = useSettings();
+
+  return (
+    <View className="mb-4">
+      <Text className="text-lg font-bold mb-2">
+        {t("home.settings.languages.title")}
+      </Text>
+      <View
+        className={`
+        flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4 rounded-xl
+      `}
+      >
+        <View className="flex flex-col shrink">
+          <Text className="font-semibold">
+            {t("home.settings.languages.app_language")}
+          </Text>
+          <Text className="text-xs opacity-50">
+            {t("home.settings.languages.app_language_description")}
+          </Text>
+        </View>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text>
+                {APP_LANGUAGES.find(
+                  (l) => l.value === settings?.preferedLanguage
+                )?.label || t("home.settings.languages.system")}
+              </Text>
+            </TouchableOpacity>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            loop={true}
+            side="bottom"
+            align="start"
+            alignOffset={0}
+            avoidCollisions={true}
+            collisionPadding={8}
+            sideOffset={8}
+          >
+            <DropdownMenu.Label>
+              {t("home.settings.languages.title")}
+            </DropdownMenu.Label>
+            <DropdownMenu.Item
+              key={"unknown"}
+              onSelect={() => {
+                updateSettings({
+                  preferedLanguage: undefined,
+                });
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {t("home.settings.languages.system")}
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+            {APP_LANGUAGES?.map((l) => (
+              <DropdownMenu.Item
+                key={l?.value ?? "unknown"}
+                onSelect={() => {
+                  updateSettings({
+                    preferedLanguage: l.value,
+                  });
+                }}
+              >
+                <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </View>
+    </View>
+  );
+};

components/settings/SettingToggles.tsx

@@ -44,6 +44,7 @@ import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
 import { ListItem } from "@/components/ListItem";
 import { JellyseerrSettings } from "./Jellyseerr";
 import { useTranslation } from "react-i18next";
+import { AppLanguageSelector } from "./AppLanguageSelector";
 
 interface Props extends ViewProps {}
 
@@ -133,6 +134,8 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
         </View>
       </View> */}
 
+      <AppLanguageSelector />
+
       <MediaProvider>
         <MediaToggles />
         <AudioToggles />
@@ -140,12 +143,16 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
       </MediaProvider>
 
       <View>
-        <Text className="text-lg font-bold mb-2">{t("home.settings.other.other_title")}</Text>
+        <Text className="text-lg font-bold mb-2">
+          {t("home.settings.other.other_title")}
+        </Text>
 
         <View className="flex flex-col rounded-xl overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
           <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
             <View className="shrink">
-              <Text className="font-semibold">{t("home.settings.other.auto_rotate")}</Text>
+              <Text className="font-semibold">
+                {t("home.settings.other.auto_rotate")}
+              </Text>
               <Text className="text-xs opacity-50">
                 {t("home.settings.other.auto_rotate_hint")}
               </Text>
@@ -168,7 +175,9 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
               `}
           >
             <View className="flex flex-col shrink">
-              <Text className="font-semibold">{t("home.settings.other.video_orientation")}</Text>
+              <Text className="font-semibold">
+                {t("home.settings.other.video_orientation")}
+              </Text>
               <Text className="text-xs opacity-50">
                 {t("home.settings.other.video_orientation_hint")}
               </Text>
@@ -265,7 +274,9 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
 
           <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
             <View className="shrink">
-              <Text className="font-semibold">{t("home.settings.other.safe_area_in_controls")}</Text>
+              <Text className="font-semibold">
+                {t("home.settings.other.safe_area_in_controls")}
+              </Text>
               <Text className="text-xs opacity-50">
                 {t("home.settings.other.safe_area_in_controls_hint")}
               </Text>
@@ -281,8 +292,12 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
           <View className="flex flex-col">
             <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
               <View className="flex flex-col">
-                <Text className="font-semibold">{t("home.settings.other.use_popular_lists_plugin")}</Text>
-                <Text className="text-xs opacity-50">{t("home.settings.other.use_popular_lists_plugin_hint")}</Text>
+                <Text className="font-semibold">
+                  {t("home.settings.other.use_popular_lists_plugin")}
+                </Text>
+                <Text className="text-xs opacity-50">
+                  {t("home.settings.other.use_popular_lists_plugin_hint")}
+                </Text>
                 <TouchableOpacity
                   onPress={() => {
                     Linking.openURL(
@@ -290,7 +305,9 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
                     );
                   }}
                 >
-                  <Text className="text-xs text-purple-600">{t("home.settings.other.more_info")}</Text>
+                  <Text className="text-xs text-purple-600">
+                    {t("home.settings.other.more_info")}
+                  </Text>
                 </TouchableOpacity>
               </View>
               <Switch
@@ -355,7 +372,9 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
               `}
             >
               <View className="flex flex-col shrink">
-                <Text className="font-semibold">{t("home.settings.other.search_engine")}</Text>
+                <Text className="font-semibold">
+                  {t("home.settings.other.search_engine")}
+                </Text>
                 <Text className="text-xs opacity-50">
                   {t("home.settings.other.search_engine_hint")}
                 </Text>
@@ -438,7 +457,9 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
 
           <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
             <View className="shrink">
-              <Text className="font-semibold">{t("home.settings.other.show_custom_menu_links")}</Text>
+              <Text className="font-semibold">
+                {t("home.settings.other.show_custom_menu_links")}
+              </Text>
               <Text className="text-xs opacity-50">
                 {t("home.settings.other.show_custom_menu_links_hint")}
               </Text>
@@ -449,7 +470,9 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
                   )
                 }
               >
-                <Text className="text-xs text-purple-600">{t("home.settings.other.more_info")}</Text>
+                <Text className="text-xs text-purple-600">
+                  {t("home.settings.other.more_info")}
+                </Text>
               </TouchableOpacity>
             </View>
             <Switch
@@ -463,7 +486,9 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
       </View>
 
       <View className="mt-4">
-        <Text className="text-lg font-bold mb-2">{t("home.settings.downloads.downloads_title")}</Text>
+        <Text className="text-lg font-bold mb-2">
+          {t("home.settings.downloads.downloads_title")}
+        </Text>
         <View className="flex flex-col rounded-xl overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
           <View
             className={`
@@ -471,7 +496,9 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
               `}
           >
             <View className="flex flex-col shrink">
-              <Text className="font-semibold">{t("home.settings.downloads.download_method")}</Text>
+              <Text className="font-semibold">
+                {t("home.settings.downloads.download_method")}
+              </Text>
               <Text className="text-xs opacity-50">
                 {t("home.settings.downloads.download_method_hint")}
               </Text>
@@ -531,7 +558,9 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
               }`}
           >
             <View className="flex flex-col shrink">
-              <Text className="font-semibold">{t("home.settings.downloads.remux_max_download")}</Text>
+              <Text className="font-semibold">
+                {t("home.settings.downloads.remux_max_download")}
+              </Text>
               <Text className="text-xs opacity-50 shrink">
                 {t("home.settings.downloads.remux_max_download_hint")}
               </Text>
@@ -562,7 +591,9 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
               }`}
           >
             <View className="flex flex-col shrink">
-              <Text className="font-semibold">{t("home.settings.downloads.auto_download")}</Text>
+              <Text className="font-semibold">
+                {t("home.settings.downloads.auto_download")}
+              </Text>
               <Text className="text-xs opacity-50 shrink">
                 {t("home.settings.downloads.auto_download_hint")}
               </Text>

i18n.ts

@@ -6,8 +6,14 @@ import fr from "./translations/fr.json";
 import sv from "./translations/sv.json";
 import { getLocales } from "expo-localization";
 
+export const APP_LANGUAGES = [
+  { label: "English", value: "en" },
+  { label: "Français", value: "fr" },
+  { label: "Svenska", value: "sv" },
+];
+
 i18n.use(initReactI18next).init({
-  compatibilityJSON: "v3",
+  compatibilityJSON: "v4",
   resources: {
     en: { translation: en },
     fr: { translation: fr },

translations/en.json

@@ -33,7 +33,8 @@
         "user_info_title": "User Info",
         "user": "User",
         "server": "Server",
-        "log_out_button": "Log out"
+        "log_out_button": "Log out",
+        "token": "Token"
       },
       "quick_connect": {
         "quick_connect_title": "Quick connect",
@@ -116,6 +117,12 @@
       "logs": {
         "logs_title": "Logs",
         "no_logs_available": "No logs available"
+      },
+      "languages": {
+        "title": "Languages",
+        "app_language": "App language",
+        "app_language_description": "Select the language for the app.",
+        "system": "System"
       }
     },
     "downloads": {

utils/atoms/settings.ts

@@ -99,7 +99,7 @@ const loadSettings = (): Settings => {
     usePopularPlugin: false,
     deviceProfile: "Expo",
     mediaListCollectionIds: [],
-    preferedLanguage: getLocales()[0].languageCode || "en",
+    preferedLanguage: undefined,
     searchEngine: "Jellyfin",
     marlinServerUrl: "",
     openInVLC: false,