Merge pull request #340 from simoncaron/feat/i18n

Implement translation with i18next
2026-01-15 23:59:08 +00:00 · 2025-01-23 10:01:13 +01:00
parent 9aa4ea4a2e 007fbdd0a3
commit e4f4e861e0
87 changed files with 1653 additions and 420 deletions
--- a/app/(auth)/(tabs)/(custom-links)/_layout.tsx
+++ b/app/(auth)/(tabs)/(custom-links)/_layout.tsx
@@ -1,7 +1,9 @@
 import {Stack} from "expo-router";
 import { Platform } from "react-native";
+import { useTranslation } from "react-i18next";

 export default function CustomMenuLayout() {
+  const { t } = useTranslation();
  return (
    <Stack>
      <Stack.Screen
@@ -9,7 +11,7 @@ export default function CustomMenuLayout() {
        options={{
          headerShown: true,
          headerLargeTitle: true,
-          headerTitle: "Custom Links",
+          headerTitle: t("tabs.custom_links"),
          headerBlurEffect: "prominent",
          headerTransparent: Platform.OS === "ios",
          headerShadowVisible: false,
--- a/app/(auth)/(tabs)/(custom-links)/index.tsx
+++ b/app/(auth)/(tabs)/(custom-links)/index.tsx
@@ -7,6 +7,7 @@ import { ListItem } from "@/components/list/ListItem";
 import * as WebBrowser from "expo-web-browser";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import { Text } from "@/components/common/Text";
+import { useTranslation } from "react-i18next";

 export interface MenuLink {
  name: string;
@@ -18,6 +19,7 @@ export default function menuLinks() {
  const [api] = useAtom(apiAtom);
  const insets = useSafeAreaInsets();
  const [menuLinks, setMenuLinks] = useState<MenuLink[]>([]);
+  const { t } = useTranslation();

  const getMenuLinks = useCallback(async () => {
    try {
@@ -67,7 +69,7 @@ export default function menuLinks() {
      )}
      ListEmptyComponent={
        <View className="flex flex-col items-center justify-center h-full">
-          <Text className="font-bold text-xl text-neutral-500">No links</Text>
+          <Text className="font-bold text-xl text-neutral-500">{t("custom_links.no_links")}</Text>
        </View>
      }
    />
--- a/app/(auth)/(tabs)/(favorites)/_layout.tsx
+++ b/app/(auth)/(tabs)/(favorites)/_layout.tsx
@@ -1,8 +1,10 @@
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { Stack } from "expo-router";
 import { Platform } from "react-native";
+import { useTranslation } from "react-i18next";

 export default function SearchLayout() {
+  const { t } = useTranslation();
  return (
    <Stack>
      <Stack.Screen
@@ -10,7 +12,7 @@ export default function SearchLayout() {
        options={{
          headerShown: true,
          headerLargeTitle: true,
-          headerTitle: "Favorites",
+          headerTitle: t("tabs.favorites"),
          headerLargeStyle: {
            backgroundColor: "black",
          },
--- a/app/(auth)/(tabs)/(home)/_layout.tsx
+++ b/app/(auth)/(tabs)/(home)/_layout.tsx
@@ -4,9 +4,11 @@ import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageSta
 import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
 import { Platform, TouchableOpacity, View } from "react-native";
+import { useTranslation } from "react-i18next";

 export default function IndexLayout() {
  const router = useRouter();
+  const { t } = useTranslation();
  return (
    <Stack>
      <Stack.Screen
@@ -14,7 +16,7 @@ export default function IndexLayout() {
        options={{
          headerShown: true,
          headerLargeTitle: true,
-          headerTitle: "Home",
+          headerTitle: t("tabs.home"),
          headerBlurEffect: "prominent",
          headerLargeStyle: {
            backgroundColor: "black",
@@ -38,19 +40,19 @@ export default function IndexLayout() {
      <Stack.Screen
        name="downloads/index"
        options={{
-          title: "Downloads",
+          title: t("home.downloads.downloads_title"),
        }}
      />
      <Stack.Screen
        name="downloads/[seriesId]"
        options={{
-          title: "TV-Series",
+          title: t("home.downloads.tvseries"),
        }}
      />
      <Stack.Screen
        name="settings"
        options={{
-          title: "Settings",
+          title: t("home.settings.settings_title"),
        }}
      />
      <Stack.Screen
--- a/app/(auth)/(tabs)/(home)/downloads/index.tsx
+++ b/app/(auth)/(tabs)/(home)/downloads/index.tsx
@@ -12,6 +12,8 @@ import React, { useEffect, useMemo, useRef } from "react";
 import { Alert, ScrollView, TouchableOpacity, View } from "react-native";
 import { Button } from "@/components/Button";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTranslation } from "react-i18next";
+import { t } from 'i18next';
 import { DownloadSize } from "@/components/downloads/DownloadSize";
 import {
  BottomSheetBackdrop,
@@ -24,6 +26,7 @@ import { writeToLog } from "@/utils/log";

 export default function page() {
  const navigation = useNavigation();
+  const { t } = useTranslation();
  const [queue, setQueue] = useAtom(queueAtom);
  const { removeProcess, downloadedFiles, deleteFileByType } = useDownload();
  const router = useRouter();
@@ -70,17 +73,17 @@ export default function page() {

  const deleteMovies = () =>
    deleteFileByType("Movie")
-      .then(() => toast.success("Deleted all movies successfully!"))
+      .then(() => toast.success(t("home.downloads.toasts.deleted_all_movies_successfully")))
      .catch((reason) => {
        writeToLog("ERROR", reason);
-        toast.error("Failed to delete all movies");
+        toast.error(t("home.downloads.toasts.failed_to_delete_all_movies"));
      });
  const deleteShows = () =>
    deleteFileByType("Episode")
-      .then(() => toast.success("Deleted all TV-Series successfully!"))
+      .then(() => toast.success(t("home.downloads.toasts.deleted_all_tvseries_successfully")))
      .catch((reason) => {
        writeToLog("ERROR", reason);
-        toast.error("Failed to delete all TV-Series");
+        toast.error(t("home.downloads.toasts.failed_to_delete_all_tvseries"));
      });
  const deleteAllMedia = async () =>
    await Promise.all([deleteMovies(), deleteShows()]);
@@ -98,9 +101,9 @@ export default function page() {
          <View className="mb-4 flex flex-col space-y-4 px-4">
            {settings?.downloadMethod === DownloadMethod.Remux && (
              <View className="bg-neutral-900 p-4 rounded-2xl">
-                <Text className="text-lg font-bold">Queue</Text>
+                <Text className="text-lg font-bold">{t("home.downloads.queue")}</Text>
                <Text className="text-xs opacity-70 text-red-600">
-                  Queue and active downloads will be lost on app restart
+                  {t("home.downloads.queue_hint")}
                </Text>
                <View className="flex flex-col space-y-2 mt-2">
                  {queue.map((q, index) => (
@@ -133,7 +136,7 @@ export default function page() {
                </View>

                {queue.length === 0 && (
-                  <Text className="opacity-50">No items in queue</Text>
+                  <Text className="opacity-50">{t("home.downloads.no_items_in_queue")}</Text>
                )}
              </View>
            )}
@@ -144,7 +147,7 @@ export default function page() {
          {movies.length > 0 && (
            <View className="mb-4">
              <View className="flex flex-row items-center justify-between mb-2 px-4">
-                <Text className="text-lg font-bold">Movies</Text>
+                <Text className="text-lg font-bold">{t("home.downloads.movies")}</Text>
                <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
                  <Text className="text-xs font-bold">{movies?.length}</Text>
                </View>
@@ -163,7 +166,7 @@ export default function page() {
          {groupedBySeries.length > 0 && (
            <View className="mb-4">
              <View className="flex flex-row items-center justify-between mb-2 px-4">
-                <Text className="text-lg font-bold">TV-Series</Text>
+                <Text className="text-lg font-bold">{t("home.downloads.tvseries")}</Text>
                <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
                  <Text className="text-xs font-bold">
                    {groupedBySeries?.length}
@@ -189,7 +192,7 @@ export default function page() {
          )}
          {downloadedFiles?.length === 0 && (
            <View className="flex px-4">
-              <Text className="opacity-50">No downloaded items</Text>
+              <Text className="opacity-50">{t("home.downloads.no_downloaded_items")}</Text>
            </View>
          )}
        </View>
@@ -214,13 +217,13 @@ export default function page() {
        <BottomSheetView>
          <View className="p-4 space-y-4 mb-4">
            <Button color="purple" onPress={deleteMovies}>
-              Delete all Movies
+              {t("home.downloads.delete_all_movies_button")}
            </Button>
            <Button color="purple" onPress={deleteShows}>
-              Delete all TV-Series
+              {t("home.downloads.delete_all_tvseries_button")}
            </Button>
            <Button color="red" onPress={deleteAllMedia}>
-              Delete all
+              {t("home.downloads.delete_all_button")}
            </Button>
          </View>
        </BottomSheetView>
@@ -233,15 +236,15 @@ function migration_20241124() {
  const router = useRouter();
  const { deleteAllFiles } = useDownload();
  Alert.alert(
-    "New app version requires re-download",
-    "The new update reqires content to be downloaded again. Please remove all downloaded content and try again.",
+    t("home.downloads.new_app_version_requires_re_download"),
+    t("home.downloads.new_app_version_requires_re_download_description"),
    [
      {
-        text: "Back",
+        text: t("home.downloads.back"),
        onPress: () => router.back(),
      },
      {
-        text: "Delete",
+        text: t("home.downloads.delete"),
        style: "destructive",
        onPress: async () => await deleteAllFiles(),
      },
--- a/app/(auth)/(tabs)/(home)/index.tsx
+++ b/app/(auth)/(tabs)/(home)/index.tsx
@@ -27,6 +27,7 @@ import { QueryFunction, useQuery } from "@tanstack/react-query";
 import { useNavigation, useRouter } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
  ActivityIndicator,
  RefreshControl,
@@ -55,6 +56,8 @@ type Section = ScrollingCollectionListSection | MediaListSection;
 export default function index() {
  const router = useRouter();

+  const { t } = useTranslation();
+
  const api = useAtomValue(apiAtom);
  const user = useAtomValue(userAtom);

@@ -204,7 +207,7 @@ export default function index() {
      const latestMediaViews = collections.map((c) => {
        const includeItemTypes: BaseItemKind[] =
          c.CollectionType === "tvshows" ? ["Series"] : ["Movie"];
-        const title = "Recently Added in " + c.Name;
+        const title = t("home.recently_added_in", {libraryName: c.Name});
        const queryKey = [
          "home",
          "recentlyAddedIn" + c.CollectionType,
@@ -221,7 +224,7 @@ export default function index() {

      const ss: Section[] = [
        {
-          title: "Continue Watching",
+          title: t("home.continue_watching"),
          queryKey: ["home", "resumeItems"],
          queryFn: async () =>
            (
@@ -235,7 +238,7 @@ export default function index() {
          orientation: "horizontal",
        },
        {
-          title: "Next Up",
+          title: t("home.next_up"),
          queryKey: ["home", "nextUp-all"],
          queryFn: async () =>
            (
@@ -262,7 +265,7 @@ export default function index() {
        //     } as Section)
        // ) || []),
        {
-          title: "Suggested Movies",
+          title: t("home.suggested_movies"),
          queryKey: ["home", "suggestedMovies", user?.Id],
          queryFn: async () =>
            (
@@ -277,7 +280,7 @@ export default function index() {
          orientation: "vertical",
        },
        {
-          title: "Suggested Episodes",
+          title: t("home.suggested_episodes"),
          queryKey: ["home", "suggestedEpisodes", user?.Id],
          queryFn: async () => {
            try {
@@ -347,9 +350,9 @@ export default function index() {
  if (isConnected === false) {
    return (
      <View className="flex flex-col items-center justify-center h-full -mt-6 px-8">
-        <Text className="text-3xl font-bold mb-2">No Internet</Text>
+        <Text className="text-3xl font-bold mb-2">{t("home.no_internet")}</Text>
        <Text className="text-center opacity-70">
-          No worries, you can still watch{"\n"}downloaded content.
+        {t("home.no_internet_message")}
        </Text>
        <View className="mt-4">
          <Button
@@ -360,7 +363,7 @@ export default function index() {
              <Ionicons name="arrow-forward" size={20} color="white" />
            }
          >
-            Go to downloads
+            {t("home.go_to_downloads")}
          </Button>
          <Button
            color="black"
@@ -389,10 +392,8 @@ export default function index() {
  if (e1)
    return (
      <View className="flex flex-col items-center justify-center h-full -mt-6">
-        <Text className="text-3xl font-bold mb-2">Oops!</Text>
-        <Text className="text-center opacity-70">
-          Something went wrong.{"\n"}Please log out and in again.
-        </Text>
+        <Text className="text-3xl font-bold mb-2">{t("home.oops")}</Text>
+        <Text className="text-center opacity-70">{t("home.error_message")}</Text>
      </View>
    );

--- a/app/(auth)/(tabs)/(home)/intro/page.tsx
+++ b/app/(auth)/(tabs)/(home)/intro/page.tsx
@@ -5,10 +5,12 @@ import { Feather, Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
 import { useFocusEffect, useRouter } from "expo-router";
 import { useCallback } from "react";
+import {useTranslation } from "react-i18next";
 import { Linking, TouchableOpacity, View } from "react-native";

 export default function page() {
  const router = useRouter();
+  const { t } = useTranslation();

  useFocusEffect(
    useCallback(() => {
@@ -20,18 +22,17 @@ export default function page() {
    <View className="bg-neutral-900 h-full py-16 px-4 space-y-8">
      <View>
        <Text className="text-3xl font-bold text-center mb-2">
-          Welcome to Streamyfin
+          {t("home.intro.welcome_to_streamyfin")}
        </Text>
        <Text className="text-center">
-          A free and open source client for Jellyfin.
+          {t("home.intro.a_free_and_open_source_client_for_jellyfin")}
        </Text>
      </View>

      <View>
-        <Text className="text-lg font-bold">Features</Text>
+        <Text className="text-lg font-bold">{t("home.intro.features_title")}</Text>
        <Text className="text-xs">
-          Streamyfin has a bunch of features and integrates with a wide array of
-          software which you can find in the settings menu, these include:
+          {t("home.intro.features_description")}
        </Text>
        <View className="flex flex-row items-center mt-4">
          <Image
@@ -44,8 +45,7 @@ export default function page() {
          <View className="shrink ml-2">
            <Text className="font-bold mb-1">Jellyseerr</Text>
            <Text className="shrink text-xs">
-              Connect to your Jellyseerr instance and request movies directly in
-              the app.
+              {t("home.intro.jellyseerr_feature_description")}
            </Text>
          </View>
        </View>
@@ -60,11 +60,9 @@ export default function page() {
            <Ionicons name="cloud-download-outline" size={32} color="white" />
          </View>
          <View className="shrink ml-2">
-            <Text className="font-bold mb-1">Downloads</Text>
+            <Text className="font-bold mb-1">{t("home.intro.downloads_feature_title")}</Text>
            <Text className="shrink text-xs">
-              Download movies and tv-shows to view offline. Use either the
-              default method or install the optimize server to download files in
-              the background.
+              {t("home.intro.downloads_feature_description")}
            </Text>
          </View>
        </View>
@@ -81,7 +79,7 @@ export default function page() {
          <View className="shrink ml-2">
            <Text className="font-bold mb-1">Chromecast</Text>
            <Text className="shrink text-xs">
-              Cast movies and tv-shows to your Chromecast devices.
+              {t("home.intro.chromecast_feature_description")}
            </Text>
          </View>
        </View>
@@ -96,11 +94,9 @@ export default function page() {
            <Feather name="settings" size={28} color={"white"} />
          </View>
          <View className="shrink ml-2">
-            <Text className="font-bold mb-1">Centralised Settings Plugin</Text>
+            <Text className="font-bold mb-1">{t("home.intro.centralised_settings_plugin_title")}</Text>
            <Text className="shrink text-xs">
-              Configure settings from a centralised location on your Jellyfin
-              server. All client settings for all users will be synced
-              automatically.{" "}
+              {t("home.intro.centralised_settings_plugin_description")}{" "}
              <Text
                className="text-purple-600"
                onPress={() => {
@@ -109,7 +105,7 @@ export default function page() {
                  );
                }}
              >
-                Read more
+                {t("home.intro.read_more")}
              </Text>
            </Text>
          </View>
@@ -122,7 +118,7 @@ export default function page() {
          }}
          className="mt-4"
        >
-          Done
+          {t("home.intro.done_button")}
        </Button>
        <TouchableOpacity
          onPress={() => {
@@ -131,7 +127,7 @@ export default function page() {
          }}
          className="mt-4"
        >
-          <Text className="text-purple-600 text-center">Go to settings</Text>
+          <Text className="text-purple-600 text-center">{t("home.intro.go_to_settings_button")}</Text>
        </TouchableOpacity>
      </View>
    </View>
--- a/app/(auth)/(tabs)/(home)/settings.tsx
+++ b/app/(auth)/(tabs)/(home)/settings.tsx
@@ -10,11 +10,13 @@ import { PluginSettings } from "@/components/settings/PluginSettings";
 import { QuickConnect } from "@/components/settings/QuickConnect";
 import { StorageSettings } from "@/components/settings/StorageSettings";
 import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
+import { AppLanguageSelector } from "@/components/settings/AppLanguageSelector";
 import { UserInfo } from "@/components/settings/UserInfo";
 import { useJellyfin } from "@/providers/JellyfinProvider";
 import { clearLogs } from "@/utils/log";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useNavigation, useRouter } from "expo-router";
+import { t } from "i18next";
 import React, { useEffect } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -40,7 +42,7 @@ export default function settings() {
            logout();
          }}
        >
-          <Text className="text-red-600">Log out</Text>
+          <Text className="text-red-600">{t("home.settings.log_out_button")}</Text>
        </TouchableOpacity>
      ),
    });
@@ -68,33 +70,35 @@ export default function settings() {

        <PluginSettings />

+        <AppLanguageSelector/>
+
        <ListGroup title={"Intro"}>
          <ListItem
            onPress={() => {
              router.push("/intro/page");
            }}
-            title={"Show intro"}
+            title={t("home.settings.intro.show_intro")}
          />
          <ListItem
            textColor="red"
            onPress={() => {
              storage.set("hasShownIntro", false);
            }}
-            title={"Reset intro"}
+            title={t("home.settings.intro.reset_intro")}
          />
        </ListGroup>

        <View className="mb-4">
-          <ListGroup title={"Logs"}>
+          <ListGroup title={t("home.settings.logs.logs_title")}>
            <ListItem
              onPress={() => router.push("/settings/logs/page")}
              showArrow
-              title={"Logs"}
+              title={t("home.settings.logs.logs_title")}
            />
            <ListItem
              textColor="red"
              onPress={onClearLogsClicked}
-              title={"Delete All Logs"}
+              title={t("home.settings.logs.delete_all_logs")}
            />
          </ListGroup>
        </View>
--- a/app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx
@@ -8,6 +8,7 @@ import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { Switch, View } from "react-native";
+import { useTranslation } from "react-i18next"; 
 import DisabledSetting from "@/components/settings/DisabledSetting";

 export default function page() {
@@ -15,6 +16,8 @@ export default function page() {
  const user = useAtomValue(userAtom);
  const api = useAtomValue(apiAtom);

+  const { t } = useTranslation();
+
  const { data, isLoading: isLoading } = useQuery({
    queryKey: ["user-views", user?.Id],
    queryFn: async () => {
@@ -57,8 +60,7 @@ export default function page() {
        ))}
      </ListGroup>
      <Text className="px-4 text-xs text-neutral-500 mt-1">
-        Select the libraries you want to hide from the Library tab and home page
-        sections.
+      {t("home.settings.other.select_liraries_you_want_to_hide")}
      </Text>
    </DisabledSetting>
  );
--- a/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
@@ -1,9 +1,11 @@
 import { Text } from "@/components/common/Text";
 import { useLog } from "@/utils/log";
 import { ScrollView, View } from "react-native";
+import { useTranslation } from "react-i18next";

 export default function page() {
  const { logs } = useLog();
+  const { t } = useTranslation();

  return (
    <ScrollView className="p-4">
@@ -25,7 +27,7 @@ export default function page() {
          </View>
        ))}
        {logs?.length === 0 && (
-          <Text className="opacity-50">No logs available</Text>
+          <Text className="opacity-50">{t("home.settings.logs.no_logs_available")}</Text>
        )}
      </View>
    </ScrollView>
--- a/app/(auth)/(tabs)/(home)/settings/marlin-search/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/marlin-search/page.tsx
@@ -4,6 +4,8 @@ import { ListItem } from "@/components/list/ListItem";
 import { useSettings } from "@/utils/atoms/settings";
 import { useQueryClient } from "@tanstack/react-query";
 import { useNavigation } from "expo-router";
+import { useTranslation } from "react-i18next";
+
 import React, {useEffect, useMemo, useState} from "react";
 import {
  Linking,
@@ -18,6 +20,8 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
 export default function page() {
  const navigation = useNavigation();

+  const { t } = useTranslation();
+
  const [settings, updateSettings, pluginSettings] = useSettings();
  const queryClient = useQueryClient();

@@ -27,7 +31,7 @@ export default function page() {
    updateSettings({
      marlinServerUrl: !val.endsWith("/") ? val : val.slice(0, -1),
    });
-    toast.success("Saved");
+    toast.success(t("home.settings.plugins.marlin_search.toasts.saved"));
  };

  const handleOpenLink = () => {
@@ -43,7 +47,7 @@ export default function page() {
      navigation.setOptions({
        headerRight: () => (
          <TouchableOpacity onPress={() => onSave(value)}>
-            <Text className="text-blue-500">Save</Text>
+            <Text className="text-blue-500">{t("home.settings.plugins.marlin_search.save_button")}</Text>
          </TouchableOpacity>
        ),
      });
@@ -63,7 +67,7 @@ export default function page() {
          showText={!pluginSettings?.marlinServerUrl?.locked}
        >
          <ListItem
-            title={"Enable Marlin Search"}
+            title={t("home.settings.plugins.marlin_search.enable_marlin_search")}
            onPress={() => {
              updateSettings({ searchEngine: "Jellyfin" });
              queryClient.invalidateQueries({ queryKey: ["search"] });
@@ -88,11 +92,11 @@ export default function page() {
        <View
          className={`flex flex-row items-center bg-neutral-900 h-11 pr-4`}
        >
-          <Text className="mr-4">URL</Text>
+          <Text className="mr-4">{t("home.settings.plugins.marlin_search.url")}</Text>
          <TextInput
            editable={settings.searchEngine === "Marlin"}
            className="text-white"
-            placeholder="http(s)://domain.org:port"
+            placeholder={t("home.settings.plugins.marlin_search.server_url_placeholder")}
            value={value}
            keyboardType="url"
            returnKeyType="done"
@@ -103,10 +107,9 @@ export default function page() {
        </View>
      </DisabledSetting>
      <Text className="px-4 text-xs text-neutral-500 mt-1">
-        Enter the URL for the Marlin server. The URL should include http or
-        https and optionally the port.{" "}
+        {t("home.settings.plugins.marlin_search.marlin_search_hint")}{" "}
        <Text className="text-blue-500" onPress={handleOpenLink}>
-          Read more about Marlin.
+          {t("home.settings.plugins.marlin_search.read_more_about_marlin")}
        </Text>
      </Text>
    </DisabledSetting>
--- a/app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx
@@ -10,11 +10,14 @@ import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 import { toast } from "sonner-native";
+import { useTranslation } from "react-i18next";
 import DisabledSetting from "@/components/settings/DisabledSetting";

 export default function page() {
  const navigation = useNavigation();

+  const { t } = useTranslation();
+
  const [api] = useAtom(apiAtom);
  const [settings, updateSettings, pluginSettings] = useSettings();

@@ -24,7 +27,7 @@ export default function page() {
  const saveMutation = useMutation({
    mutationFn: async (newVal: string) => {
      if (newVal.length === 0 || !newVal.startsWith("http")) {
-        toast.error("Invalid URL");
+        toast.error(t("home.settings.toasts.invalid_url"));
        return;
      }

@@ -42,13 +45,13 @@ export default function page() {
    },
    onSuccess: (data) => {
      if (data) {
-        toast.success("Connected");
+        toast.success(t("home.settings.toasts.connected"));
      } else {
-        toast.error("Could not connect");
+        toast.error(t("home.settings.toasts.could_not_connect"));
      }
    },
    onError: () => {
-      toast.error("Could not connect");
+      toast.error(t("home.settings.toasts.could_not_connect"));
    },
  });

@@ -59,13 +62,13 @@ export default function page() {
  useEffect(() => {
    if (!pluginSettings?.optimizedVersionsServerUrl?.locked) {
      navigation.setOptions({
-        title: "Optimized Server",
+        title: t("home.settings.downloads.optimized_server"),
        headerRight: () =>
          saveMutation.isPending ? (
            <ActivityIndicator size={"small"} color={"white"} />
          ) : (
            <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
-              <Text className="text-blue-500">Save</Text>
+              <Text className="text-blue-500">{t("home.settings.downloads.save_button")}</Text>
            </TouchableOpacity>
          ),
      });
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/actors/[actorId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/actors/[actorId].tsx
@@ -18,10 +18,12 @@ import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useMemo } from "react";
 import { View } from "react-native";
+import { useTranslation } from "react-i18next";

 const page: React.FC = () => {
  const local = useLocalSearchParams();
  const { actorId } = local as { actorId: string };
+  const { t } = useTranslation();

  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
@@ -110,7 +112,7 @@ const page: React.FC = () => {
        </View>

        <Text className="px-4 text-2xl font-bold mb-2 text-neutral-100">
-          Appeared In
+          {t("item_card.appeared_in")}
        </Text>
        <InfiniteHorizontalScroll
          height={247}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
@@ -33,6 +33,7 @@ import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FlatList, View } from "react-native";
+import { useTranslation } from "react-i18next";

 const page: React.FC = () => {
  const searchParams = useLocalSearchParams();
@@ -45,6 +46,8 @@ const page: React.FC = () => {
    ScreenOrientation.Orientation.PORTRAIT_UP
  );

+  const { t } = useTranslation();
+
  const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
  const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
@@ -244,7 +247,7 @@ const page: React.FC = () => {
                  }}
                  set={setSelectedGenres}
                  values={selectedGenres}
-                  title="Genres"
+                  title={t("library.filters.genres")}
                  renderItemLabel={(item) => item.toString()}
                  searchFilter={(item, search) =>
                    item.toLowerCase().includes(search.toLowerCase())
@@ -271,7 +274,7 @@ const page: React.FC = () => {
                  }}
                  set={setSelectedYears}
                  values={selectedYears}
-                  title="Years"
+                  title={t("library.filters.years")}
                  renderItemLabel={(item) => item.toString()}
                  searchFilter={(item, search) => item.includes(search)}
                />
@@ -296,7 +299,7 @@ const page: React.FC = () => {
                  }}
                  set={setSelectedTags}
                  values={selectedTags}
-                  title="Tags"
+                  title={t("library.filters.tags")}
                  renderItemLabel={(item) => item.toString()}
                  searchFilter={(item, search) =>
                    item.toLowerCase().includes(search.toLowerCase())
@@ -314,7 +317,7 @@ const page: React.FC = () => {
                  queryFn={async () => sortOptions.map((s) => s.key)}
                  set={setSortBy}
                  values={sortBy}
-                  title="Sort By"
+                  title={t("library.filters.sort_by")}
                  renderItemLabel={(item) =>
                    sortOptions.find((i) => i.key === item)?.value || ""
                  }
@@ -334,7 +337,7 @@ const page: React.FC = () => {
                  queryFn={async () => sortOrderOptions.map((s) => s.key)}
                  set={setSortOrder}
                  values={sortOrder}
-                  title="Sort Order"
+                  title={t("library.filters.sort_order")}
                  renderItemLabel={(item) =>
                    sortOrderOptions.find((i) => i.key === item)?.value || ""
                  }
@@ -374,7 +377,7 @@ const page: React.FC = () => {
    <FlashList
      ListEmptyComponent={
        <View className="flex flex-col items-center justify-center h-full">
-          <Text className="font-bold text-xl text-neutral-500">No results</Text>
+          <Text className="font-bold text-xl text-neutral-500">{t("search.no_results")}</Text>
        </View>
      }
      extraData={[
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/items/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/items/page.tsx
@@ -13,11 +13,13 @@ import Animated, {
  useSharedValue,
  withTiming,
 } from "react-native-reanimated";
+import { useTranslation } from "react-i18next";

 const Page: React.FC = () => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const { id } = useLocalSearchParams() as { id: string };
+  const { t } = useTranslation();

  const { data: item, isError } = useQuery({
    queryKey: ["item", id],
@@ -74,7 +76,7 @@ const Page: React.FC = () => {
  if (isError)
    return (
      <View className="flex flex-col items-center justify-center h-screen w-screen">
-        <Text>Could not load item</Text>
+        <Text>{t("item_card.could_not_load_item")}</Text>
      </View>
    );

--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
@@ -17,6 +17,7 @@ import {
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
 import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
 import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
+import { useTranslation } from "react-i18next";
 import { Ionicons } from "@expo/vector-icons";
 import {
  BottomSheetBackdrop,
@@ -39,6 +40,8 @@ import {MediaRequestBody} from "@/utils/jellyseerr/server/interfaces/api/request
 const Page: React.FC = () => {
  const insets = useSafeAreaInsets();
  const params = useLocalSearchParams();
+  const { t } = useTranslation();
+
  const { mediaTitle, releaseYear, posterSrc, ...result } =
    params as unknown as {
      mediaTitle: string;
@@ -214,7 +217,7 @@ const Page: React.FC = () => {
                <Button loading={true} disabled={true} color="purple"></Button>
              ) : canRequest ? (
                <Button color="purple" onPress={request}>
-                  Request
+                  {t("jellyseerr.request_button")}
                </Button>
              ) : (
                <Button
@@ -229,7 +232,7 @@ const Page: React.FC = () => {
                    borderStyle: "solid",
                  }}
                >
-                  Report issue
+                  {t("jellyseerr.report_issue_button")}
                </Button>
              )}
              <OverviewText text={result.overview} className="mt-4" />
@@ -281,7 +284,7 @@ const Page: React.FC = () => {
          <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
            <View>
              <Text className="font-bold text-2xl text-neutral-100">
-                Whats wrong?
+                {t("jellyseerr.whats_wrong")}
              </Text>
            </View>
            <View className="flex flex-col space-y-2 items-start">
@@ -290,13 +293,13 @@ const Page: React.FC = () => {
                  <DropdownMenu.Trigger>
                    <View className="flex flex-col">
                      <Text className="opacity-50 mb-1 text-xs">
-                        Issue Type
+                        {t("jellyseerr.issue_type")}
                      </Text>
                      <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
                        <Text style={{}} className="" numberOfLines={1}>
                          {issueType
                            ? IssueTypeName[issueType]
-                            : "Select an issue"}
+                            : t("jellyseerr.select_an_issue")}
                        </Text>
                      </TouchableOpacity>
                    </View>
@@ -310,7 +313,7 @@ const Page: React.FC = () => {
                    collisionPadding={0}
                    sideOffset={0}
                  >
-                    <DropdownMenu.Label>Types</DropdownMenu.Label>
+                    <DropdownMenu.Label>{t("jellyseerr.types")}</DropdownMenu.Label>
                    {Object.entries(IssueTypeName)
                      .reverse()
                      .map(([key, value], idx) => (
@@ -335,7 +338,7 @@ const Page: React.FC = () => {
                  maxLength={254}
                  style={{ color: "white" }}
                  clearButtonMode="always"
-                  placeholder="(optional) Describe the issue..."
+                  placeholder={t("jellyseerr.describe_the_issue")}
                  placeholderTextColor="#9CA3AF"
                  // Issue with multiline + Textinput inside a portal
                  // https://github.com/callstack/react-native-paper/issues/1668
@@ -345,7 +348,7 @@ const Page: React.FC = () => {
              </View>
            </View>
            <Button className="mt-auto" onPress={submitIssue} color="purple">
-              Submit
+              {t("jellyseerr.submit_button")}
            </Button>
          </View>
        </BottomSheetView>
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/person/[personId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/person/[personId].tsx
@@ -13,9 +13,12 @@ import { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
 import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
 import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
 import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
+import { useTranslation } from "react-i18next";

 export default function page() {
  const local = useLocalSearchParams();
+  const { t } = useTranslation();
+
  const { jellyseerrApi, jellyseerrUser } = useJellyseerr();

  const { personId } = local as { personId: string };
@@ -58,7 +61,7 @@ export default function page() {
    <ParallaxSlideShow
      data={castedRoles}
      images={backdrops}
-      listHeader="Appearances"
+      listHeader={t("jellyseerr.appearances")}
      keyExtractor={(item) => item.id.toString()}
      logo={
        <Image
@@ -85,7 +88,7 @@ export default function page() {
            {data?.details?.name}
          </Text>
          <Text className="opacity-50">
-            Born{" "}
+            {t("jellyseerr.born")}{" "}
            {new Date(data?.details?.birthday!!).toLocaleDateString(
              `${locale}-${region}`,
              {
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/livetv/guide.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/livetv/guide.tsx
@@ -17,6 +17,7 @@ import {
  View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTranslation } from "react-i18next";

 const HOUR_HEIGHT = 30;
 const ITEMS_PER_PAGE = 20;
@@ -177,6 +178,7 @@ const PageButtons: React.FC<PageButtonsProps> = ({
  onNextPage,
  isNextDisabled,
 }) => {
+  const { t } = useTranslation();
  return (
    <View className="flex flex-row justify-between items-center bg-neutral-800 w-full px-4 py-2">
      <TouchableOpacity
@@ -194,7 +196,7 @@ const PageButtons: React.FC<PageButtonsProps> = ({
            currentPage === 1 ? "text-gray-500" : "text-white"
          }`}
        >
-          Previous
+          {t("live_tv.previous")}
        </Text>
      </TouchableOpacity>
      <Text className="text-white">Page {currentPage}</Text>
@@ -206,7 +208,7 @@ const PageButtons: React.FC<PageButtonsProps> = ({
        <Text
          className={`mr-1 ${isNextDisabled ? "text-gray-500" : "text-white"}`}
        >
-          Next
+          {t("live_tv.next")}
        </Text>
        <Ionicons
          name="chevron-forward"
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/livetv/programs.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/livetv/programs.tsx
@@ -7,12 +7,15 @@ import { useAtom } from "jotai";
 import React from "react";
 import { ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTranslation } from "react-i18next";

 export default function page() {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const insets = useSafeAreaInsets();

+  const { t } = useTranslation();
+
  return (
    <ScrollView
      nestedScrollEnabled
@@ -28,7 +31,7 @@ export default function page() {
      <View className="flex flex-col space-y-2">
        <ScrollingCollectionList
          queryKey={["livetv", "recommended"]}
-          title={"On now"}
+          title={t("live_tv.on_now")}
          queryFn={async () => {
            if (!api) return [] as BaseItemDto[];
            const res = await getLiveTvApi(api).getRecommendedPrograms({
@@ -46,7 +49,7 @@ export default function page() {
        />
        <ScrollingCollectionList
          queryKey={["livetv", "shows"]}
-          title={"Shows"}
+          title={t("live_tv.shows")}
          queryFn={async () => {
            if (!api) return [] as BaseItemDto[];
            const res = await getLiveTvApi(api).getLiveTvPrograms({
@@ -68,7 +71,7 @@ export default function page() {
        />
        <ScrollingCollectionList
          queryKey={["livetv", "movies"]}
-          title={"Movies"}
+          title={t("live_tv.movies")}
          queryFn={async () => {
            if (!api) return [] as BaseItemDto[];
            const res = await getLiveTvApi(api).getLiveTvPrograms({
@@ -86,7 +89,7 @@ export default function page() {
        />
        <ScrollingCollectionList
          queryKey={["livetv", "sports"]}
-          title={"Sports"}
+          title={t("live_tv.sports")}
          queryFn={async () => {
            if (!api) return [] as BaseItemDto[];
            const res = await getLiveTvApi(api).getLiveTvPrograms({
@@ -104,7 +107,7 @@ export default function page() {
        />
        <ScrollingCollectionList
          queryKey={["livetv", "kids"]}
-          title={"For Kids"}
+          title={t("live_tv.for_kids")}
          queryFn={async () => {
            if (!api) return [] as BaseItemDto[];
            const res = await getLiveTvApi(api).getLiveTvPrograms({
@@ -122,7 +125,7 @@ export default function page() {
        />
        <ScrollingCollectionList
          queryKey={["livetv", "news"]}
-          title={"News"}
+          title={t("live_tv.news")}
          queryFn={async () => {
            if (!api) return [] as BaseItemDto[];
            const res = await getLiveTvApi(api).getLiveTvPrograms({
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/livetv/recordings.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/livetv/recordings.tsx
@@ -1,11 +1,13 @@
 import { Text } from "@/components/common/Text";
 import React from "react";
 import { View } from "react-native";
+import { useTranslation } from "react-i18next";

 export default function page() {
+  const { t } = useTranslation();
  return (
    <View className="flex items-center justify-center h-full -mt-12">
-      <Text>Coming soon</Text>
+      <Text>{t("live_tv.coming_soon")}</Text>
    </View>
  );
 }
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/series/[id].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/series/[id].tsx
@@ -16,9 +16,11 @@ import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useEffect, useMemo } from "react";
 import { View } from "react-native";
+import { useTranslation } from "react-i18next";

 const page: React.FC = () => {
  const navigation = useNavigation();
+  const { t } = useTranslation();
  const params = useLocalSearchParams();
  const { id: seriesId, seasonIndex } = params as {
    id: string;
@@ -85,7 +87,7 @@ const page: React.FC = () => {
            <AddToFavorites item={item} type="series" />
            <DownloadItems
              size="large"
-              title="Download Series"
+              title={t("item_card.download.download_series")}
              items={allEpisodes || []}
              MissingDownloadIconComponent={() => (
                <Ionicons name="download" size={22} color="white" />
--- a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
+++ b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
@@ -41,6 +41,7 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTranslation } from "react-i18next";

 const Page = () => {
  const searchParams = useLocalSearchParams();
@@ -62,6 +63,8 @@ const Page = () => {

  const { orientation } = useOrientation();

+  const { t } = useTranslation();
+
  useEffect(() => {
    const sop = getSortOrderPreference(libraryId, sortOrderPreference);
    if (sop) {
@@ -298,7 +301,7 @@ const Page = () => {
                  }}
                  set={setSelectedGenres}
                  values={selectedGenres}
-                  title="Genres"
+                  title={t("library.filters.genres")}
                  renderItemLabel={(item) => item.toString()}
                  searchFilter={(item, search) =>
                    item.toLowerCase().includes(search.toLowerCase())
@@ -325,7 +328,7 @@ const Page = () => {
                  }}
                  set={setSelectedYears}
                  values={selectedYears}
-                  title="Years"
+                  title={t("library.filters.years")}
                  renderItemLabel={(item) => item.toString()}
                  searchFilter={(item, search) => item.includes(search)}
                />
@@ -350,7 +353,7 @@ const Page = () => {
                  }}
                  set={setSelectedTags}
                  values={selectedTags}
-                  title="Tags"
+                  title={t("library.filters.tags")}
                  renderItemLabel={(item) => item.toString()}
                  searchFilter={(item, search) =>
                    item.toLowerCase().includes(search.toLowerCase())
@@ -368,7 +371,7 @@ const Page = () => {
                  queryFn={async () => sortOptions.map((s) => s.key)}
                  set={setSortBy}
                  values={sortBy}
-                  title="Sort By"
+                  title={t("library.filters.sort_by")}
                  renderItemLabel={(item) =>
                    sortOptions.find((i) => i.key === item)?.value || ""
                  }
@@ -388,7 +391,7 @@ const Page = () => {
                  queryFn={async () => sortOrderOptions.map((s) => s.key)}
                  set={setSortOrder}
                  values={sortOrder}
-                  title="Sort Order"
+                  title={t("library.filters.sort_order")}
                  renderItemLabel={(item) =>
                    sortOrderOptions.find((i) => i.key === item)?.value || ""
                  }
@@ -434,7 +437,7 @@ const Page = () => {
  if (flatData.length === 0)
    return (
      <View className="h-full w-full flex justify-center items-center">
-        <Text className="text-lg text-neutral-500">No items found</Text>
+        <Text className="text-lg text-neutral-500">{t("library.no_items_found")}</Text>
      </View>
    );

@@ -443,7 +446,7 @@ const Page = () => {
      key={orientation}
      ListEmptyComponent={
        <View className="flex flex-col items-center justify-center h-full">
-          <Text className="font-bold text-xl text-neutral-500">No results</Text>
+          <Text className="font-bold text-xl text-neutral-500">{t("library.no_results")}</Text>
        </View>
      }
      contentInsetAdjustmentBehavior="automatic"
--- a/app/(auth)/(tabs)/(libraries)/_layout.tsx
+++ b/app/(auth)/(tabs)/(libraries)/_layout.tsx
@@ -4,10 +4,13 @@ import { Ionicons } from "@expo/vector-icons";
 import { Stack } from "expo-router";
 import { Platform } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
+import { useTranslation } from "react-i18next";

 export default function IndexLayout() {
  const [settings, updateSettings, pluginSettings] = useSettings();

+  const { t } = useTranslation();
+
  if (!settings?.libraryOptions) return null;

  return (
@@ -17,7 +20,7 @@ export default function IndexLayout() {
        options={{
          headerShown: true,
          headerLargeTitle: true,
-          headerTitle: "Library",
+          headerTitle: t("tabs.library"),
          headerBlurEffect: "prominent",
          headerLargeStyle: {
            backgroundColor: "black",
@@ -43,11 +46,11 @@ export default function IndexLayout() {
                side={"bottom"}
                sideOffset={10}
              >
-                <DropdownMenu.Label>Display</DropdownMenu.Label>
+                <DropdownMenu.Label>{t("library.options.display")}</DropdownMenu.Label>
                <DropdownMenu.Group key="display-group">
                  <DropdownMenu.Sub>
                    <DropdownMenu.SubTrigger key="image-style-trigger">
-                      Display
+                      {t("library.options.display")}
                    </DropdownMenu.SubTrigger>
                    <DropdownMenu.SubContent
                      alignOffset={-10}
@@ -70,7 +73,7 @@ export default function IndexLayout() {
                      >
                        <DropdownMenu.ItemIndicator />
                        <DropdownMenu.ItemTitle key="display-title-1">
-                          Row
+                          {t("library.options.row")}
                        </DropdownMenu.ItemTitle>
                      </DropdownMenu.CheckboxItem>
                      <DropdownMenu.CheckboxItem
@@ -87,14 +90,14 @@ export default function IndexLayout() {
                      >
                        <DropdownMenu.ItemIndicator />
                        <DropdownMenu.ItemTitle key="display-title-2">
-                          List
+                          {t("library.options.list")}
                        </DropdownMenu.ItemTitle>
                      </DropdownMenu.CheckboxItem>
                    </DropdownMenu.SubContent>
                  </DropdownMenu.Sub>
                  <DropdownMenu.Sub>
                    <DropdownMenu.SubTrigger key="image-style-trigger">
-                      Image style
+                      {t("library.options.image_style")}
                    </DropdownMenu.SubTrigger>
                    <DropdownMenu.SubContent
                      alignOffset={-10}
@@ -117,7 +120,7 @@ export default function IndexLayout() {
                      >
                        <DropdownMenu.ItemIndicator />
                        <DropdownMenu.ItemTitle key="poster-title">
-                          Poster
+                          {t("library.options.poster")}
                        </DropdownMenu.ItemTitle>
                      </DropdownMenu.CheckboxItem>
                      <DropdownMenu.CheckboxItem
@@ -134,7 +137,7 @@ export default function IndexLayout() {
                      >
                        <DropdownMenu.ItemIndicator />
                        <DropdownMenu.ItemTitle key="cover-title">
-                          Cover
+                          {t("library.options.cover")}
                        </DropdownMenu.ItemTitle>
                      </DropdownMenu.CheckboxItem>
                    </DropdownMenu.SubContent>
@@ -158,7 +161,7 @@ export default function IndexLayout() {
                  >
                    <DropdownMenu.ItemIndicator />
                    <DropdownMenu.ItemTitle key="show-titles-title">
-                      Show titles
+                      {t("library.options.show_titles")}
                    </DropdownMenu.ItemTitle>
                  </DropdownMenu.CheckboxItem>
                  <DropdownMenu.CheckboxItem
@@ -175,7 +178,7 @@ export default function IndexLayout() {
                  >
                    <DropdownMenu.ItemIndicator />
                    <DropdownMenu.ItemTitle key="show-stats-title">
-                      Show stats
+                      {t("library.options.show_stats")}
                    </DropdownMenu.ItemTitle>
                  </DropdownMenu.CheckboxItem>
                </DropdownMenu.Group>
--- a/app/(auth)/(tabs)/(libraries)/index.tsx
+++ b/app/(auth)/(tabs)/(libraries)/index.tsx
@@ -13,6 +13,7 @@ import { useAtom } from "jotai";
 import { useEffect, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTranslation } from "react-i18next";

 export default function index() {
  const [api] = useAtom(apiAtom);
@@ -20,6 +21,8 @@ export default function index() {
  const queryClient = useQueryClient();
  const [settings] = useSettings();

+  const { t } = useTranslation();
+
  const { data, isLoading: isLoading } = useQuery({
    queryKey: ["user-views", user?.Id],
    queryFn: async () => {
@@ -70,7 +73,7 @@ export default function index() {
  if (!libraries)
    return (
      <View className="h-full w-full flex justify-center items-center">
-        <Text className="text-lg text-neutral-500">No libraries found</Text>
+        <Text className="text-lg text-neutral-500">{t("library.no_libraries_found")}</Text>
      </View>
    );

--- a/app/(auth)/(tabs)/(search)/_layout.tsx
+++ b/app/(auth)/(tabs)/(search)/_layout.tsx
@@ -4,8 +4,10 @@ import {
 } from "@/components/stacks/NestedTabPageStack";
 import { Stack } from "expo-router";
 import { Platform } from "react-native";
+import { useTranslation } from "react-i18next";

 export default function SearchLayout() {
+  const { t } = useTranslation();
  return (
    <Stack>
      <Stack.Screen
@@ -13,7 +15,7 @@ export default function SearchLayout() {
        options={{
          headerShown: true,
          headerLargeTitle: true,
-          headerTitle: "Search",
+          headerTitle: t("tabs.search"),
          headerLargeStyle: {
            backgroundColor: "black",
          },
--- a/app/(auth)/(tabs)/(search)/index.tsx
+++ b/app/(auth)/(tabs)/(search)/index.tsx
@@ -31,6 +31,7 @@ import React, {
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDebounce } from "use-debounce";
+import { useTranslation } from "react-i18next";

 type SearchType = "Library" | "Discover";

@@ -47,6 +48,8 @@ export default function search() {
  const params = useLocalSearchParams();
  const insets = useSafeAreaInsets();

+  const { t } = useTranslation();
+
  const { q, prev } = params as { q: string; prev: Href<string> };

  const [searchType, setSearchType] = useState<SearchType>("Library");
@@ -122,7 +125,7 @@ export default function search() {
    if (Platform.OS === "ios")
      navigation.setOptions({
        headerSearchBarOptions: {
-          placeholder: "Search...",
+          placeholder: t("search.search"),
          onChangeText: (e: any) => {
            router.setParams({ q: "" });
            setSearch(e.nativeEvent.text);
@@ -214,7 +217,7 @@ export default function search() {
                autoCorrect={false}
                returnKeyType="done"
                keyboardType="web-search"
-                placeholder="Search here..."
+                placeholder={t("search.search_here")}
                value={search}
                onChangeText={(text) => setSearch(text)}
              />
@@ -224,7 +227,7 @@ export default function search() {
            <View className="flex flex-row flex-wrap space-x-2 px-4 mb-2">
              <TouchableOpacity onPress={() => setSearchType("Library")}>
                <Tag
-                  text="Library"
+                  text={t("search.library")}
                  textClass="p-1"
                  className={
                    searchType === "Library" ? "bg-purple-600" : undefined
@@ -233,7 +236,7 @@ export default function search() {
              </TouchableOpacity>
              <TouchableOpacity onPress={() => setSearchType("Discover")}>
                <Tag
-                  text="Discover"
+                  text={t("search.discover")}
                  textClass="p-1"
                  className={
                    searchType === "Discover" ? "bg-purple-600" : undefined
@@ -250,7 +253,7 @@ export default function search() {
          {searchType === "Library" ? (
            <View className={l1 || l2 ? "opacity-0" : "opacity-100"}>
              <SearchItemWrapper
-                header="Movies"
+                header={t("search.movies")}
                ids={movies?.map((m) => m.Id!)}
                renderItem={(item: BaseItemDto) => (
                  <TouchableItemRouter
@@ -270,7 +273,7 @@ export default function search() {
              />
              <SearchItemWrapper
                ids={series?.map((m) => m.Id!)}
-                header="Series"
+                header={t("search.series")}
                renderItem={(item: BaseItemDto) => (
                  <TouchableItemRouter
                    key={item.Id}
@@ -289,7 +292,7 @@ export default function search() {
              />
              <SearchItemWrapper
                ids={episodes?.map((m) => m.Id!)}
-                header="Episodes"
+                header={t("search.episodes")}
                renderItem={(item: BaseItemDto) => (
                  <TouchableItemRouter
                    item={item}
@@ -303,7 +306,7 @@ export default function search() {
              />
              <SearchItemWrapper
                ids={collections?.map((m) => m.Id!)}
-                header="Collections"
+                header={t("search.collections")}
                renderItem={(item: BaseItemDto) => (
                  <TouchableItemRouter
                    key={item.Id}
@@ -319,7 +322,7 @@ export default function search() {
              />
              <SearchItemWrapper
                ids={actors?.map((m) => m.Id!)}
-                header="Actors"
+                header={t("search.actors")}
                renderItem={(item: BaseItemDto) => (
                  <TouchableItemRouter
                    item={item}
@@ -341,7 +344,7 @@ export default function search() {
              {!loading && noResults && debouncedSearch.length > 0 ? (
                <View>
                  <Text className="text-center text-lg font-bold mt-4">
-                    No results found for
+                    {t("search.no_results_found_for")}
                  </Text>
                  <Text className="text-xs text-purple-600 text-center">
                    "{debouncedSearch}"
--- a/app/(auth)/(tabs)/_layout.tsx
+++ b/app/(auth)/(tabs)/_layout.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useRef } from "react";
 import { Platform } from "react-native";
+import { useTranslation } from "react-i18next";

 import { useFocusEffect, useRouter, withLayoutContext } from "expo-router";

@@ -30,6 +31,7 @@ export const NativeTabs = withLayoutContext<

 export default function TabLayout() {
  const [settings] = useSettings();
+  const { t } = useTranslation();
  const router = useRouter();

  useFocusEffect(
@@ -61,7 +63,7 @@ export default function TabLayout() {
        <NativeTabs.Screen
          name="(home)"
          options={{
-            title: "Home",
+            title: t("tabs.home"),
            tabBarIcon:
              Platform.OS == "android"
                ? ({ color, focused, size }) =>
@@ -75,7 +77,7 @@ export default function TabLayout() {
        <NativeTabs.Screen
          name="(search)"
          options={{
-            title: "Search",
+            title: t("tabs.search"),
            tabBarIcon:
              Platform.OS == "android"
                ? ({ color, focused, size }) =>
@@ -89,7 +91,7 @@ export default function TabLayout() {
        <NativeTabs.Screen
          name="(favorites)"
          options={{
-            title: "Favorites",
+            title: t("tabs.favorites"),
            tabBarIcon:
              Platform.OS == "android"
                ? ({ color, focused, size }) =>
@@ -105,7 +107,7 @@ export default function TabLayout() {
        <NativeTabs.Screen
          name="(libraries)"
          options={{
-            title: "Library",
+            title: t("tabs.library"),
            tabBarIcon:
              Platform.OS == "android"
                ? ({ color, focused, size }) =>
@@ -119,7 +121,7 @@ export default function TabLayout() {
        <NativeTabs.Screen
          name="(custom-links)"
          options={{
-            title: "Custom Links",
+            title: t("tabs.custom_links"),
            // @ts-expect-error
            tabBarItemHidden: settings?.showCustomMenuLinks ? false : true,
            tabBarIcon:
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -48,12 +48,14 @@ import {
 import { useSharedValue } from "react-native-reanimated";
 import settings from "../(tabs)/(home)/settings";
 import { useSettings } from "@/utils/atoms/settings";
+import { useTranslation } from "react-i18next";
 import { useSafeAreaInsets } from "react-native-safe-area-context";

 export default function page() {
  const videoRef = useRef<VlcPlayerViewRef>(null);
  const user = useAtomValue(userAtom);
  const api = useAtomValue(apiAtom);
+  const { t } = useTranslation();

  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
  const [showControls, _setShowControls] = useState(true);
@@ -161,7 +163,7 @@ export default function page() {
      const { mediaSource, sessionId, url } = res;

      if (!sessionId || !mediaSource || !url) {
-        Alert.alert("Error", "Failed to get stream url");
+        Alert.alert(t("player.error"), t("player.failed_to_get_stream_url"));
        return null;
      }

@@ -426,7 +428,7 @@ export default function page() {
  if (isErrorItem || isErrorStreamUrl)
    return (
      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
-        <Text className="text-white">Error</Text>
+        <Text className="text-white">{t("player.error")}</Text>
      </View>
    );

@@ -465,8 +467,8 @@ export default function page() {
          onVideoError={(e) => {
            console.error("Video Error:", e.nativeEvent);
            Alert.alert(
-              "Error",
-              "An error occurred while playing the video. Check logs in settings."
+              t("player.error"),
+              t("player.an_error_occured_while_playing_the_video")
            );
            writeToLog("ERROR", "Video Error", e.nativeEvent);
          }}
--- a/app/(auth)/player/transcoding-player.tsx
+++ b/app/(auth)/player/transcoding-player.tsx
@@ -39,12 +39,14 @@ import Video, {
  VideoRef,
 } from "react-native-video";
 import { SubtitleHelper } from "@/utils/SubtitleHelper";
+import { useTranslation } from "react-i18next";

 const Player = () => {
  const api = useAtomValue(apiAtom);
  const user = useAtomValue(userAtom);
  const [settings] = useSettings();
  const videoRef = useRef<VideoRef | null>(null);
+  const { t } = useTranslation();

  const firstTime = useRef(true);
  const revalidateProgressCache = useInvalidatePlaybackProgressCache();
@@ -374,7 +376,7 @@ const Player = () => {
  if (isErrorItem || isErrorStreamUrl)
    return (
      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
-        <Text className="text-white">Error</Text>
+        <Text className="text-white">{t("player.error")}</Text>
      </View>
    );

@@ -440,7 +442,7 @@ const Player = () => {
            />
          </>
        ) : (
-          <Text>No video source...</Text>
+          <Text>{t("player.no_video_source")}</Text>
        )}
      </View>

--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -40,6 +40,9 @@ import { useEffect, useRef } from "react";
 import { Appearance, AppState, TouchableOpacity } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import i18n from "@/i18n";
+import { getLocales } from "expo-localization";
 import "react-native-reanimated";
 import { Toaster } from "sonner-native";

@@ -228,7 +231,9 @@ export default function RootLayout() {

  return (
    <JotaiProvider>
-      <Layout />
+      <I18nextProvider i18n={i18n}>
+        <Layout />
+      </I18nextProvider>
    </JotaiProvider>
  );
 }
@@ -252,6 +257,8 @@ function Layout() {
  useKeepAwake();
  useNotificationObserver();

+  const { i18n } = useTranslation();
+
  useEffect(() => {
    checkAndRequestPermissions();
  }, []);
@@ -265,6 +272,12 @@ function Layout() {
      );
  }, [settings]);

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

  useEffect(() => {
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -21,12 +21,11 @@ import {
 } from "react-native";

 import { z } from "zod";
-
+import { t } from 'i18next';
 const CredentialsSchema = z.object({
-  username: z.string().min(1, "Username is required"),
-});
+  username: z.string().min(1, t("login.username_required")),});

-const Login: React.FC = () => {
+  const Login: React.FC = () => {
  const { setServer, login, removeServer, initiateQuickConnect } =
    useJellyfin();
  const [api] = useAtom(apiAtom);
@@ -80,7 +79,7 @@ const Login: React.FC = () => {
            className="flex flex-row items-center"
          >
            <Ionicons name="chevron-back" size={18} color={Colors.primary} />
-            <Text className="ml-2 text-purple-600">Change server</Text>
+            <Text className="ml-2 text-purple-600">{t("login.change_server")}</Text>
          </TouchableOpacity>
        ) : null,
    });
@@ -97,9 +96,9 @@ const Login: React.FC = () => {
      }
    } catch (error) {
      if (error instanceof Error) {
-        Alert.alert("Connection failed", error.message);
+        Alert.alert(t("login.connection_failed"), error.message);
      } else {
-        Alert.alert("Connection failed", "An unexpected error occurred");
+        Alert.alert(t("login.connection_failed"), t("login.an_unexpected_error_occured"));
      }
    } finally {
      setLoading(false);
@@ -168,8 +167,8 @@ const Login: React.FC = () => {

    if (result === undefined) {
      Alert.alert(
-        "Connection failed",
-        "Could not connect to the server. Please check the URL and your network connection."
+        t("login.connection_failed"),
+        t("login.could_not_connect_to_server")
      );
      return;
    }
@@ -181,14 +180,14 @@ const Login: React.FC = () => {
    try {
      const code = await initiateQuickConnect();
      if (code) {
-        Alert.alert("Quick Connect", `Enter code ${code} to login`, [
+        Alert.alert(t("login.quick_connect"), t("login.enter_code_to_login", {code: code}), [
          {
-            text: "Got It",
+            text: t("login.got_it"),
          },
        ]);
      }
    } catch (error) {
-      Alert.alert("Error", "Failed to initiate Quick Connect");
+      Alert.alert(t("login.error_title"), t("login.failed_to_initiate_quick_connect"));
    }
  };

@@ -202,22 +201,21 @@ const Login: React.FC = () => {
            <View className="flex flex-col h-full relative items-center justify-center">
              <View className="px-4 -mt-20 w-full">
                <View className="flex flex-col space-y-2">
-                  <Text className="text-2xl font-bold -mb-2">
-                    Log in
-                    <>
-                      {serverName ? (
-                        <>
-                          {" to "}
-                          <Text className="text-purple-600">{serverName}</Text>
-                        </>
-                      ) : null}
-                    </>
-                  </Text>
+                <Text className="text-2xl font-bold -mb-2">
+                  <>
+                    {serverName ? (
+                      <>
+                        {t("login.login_to_title") + " "}
+                        <Text className="text-purple-600">{serverName}</Text>
+                      </>
+                    ) : t("login.login_title")}
+                  </>
+                </Text>
                  <Text className="text-xs text-neutral-400">
                    {api.basePath}
                  </Text>
                  <Input
-                    placeholder="Username"
+                    placeholder={t("login.username_placeholder")}
                    onChangeText={(text) =>
                      setCredentials({ ...credentials, username: text })
                    }
@@ -233,7 +231,7 @@ const Login: React.FC = () => {
                  />

                  <Input
-                    placeholder="Password"
+                    placeholder={t("login.password_placeholder")}
                    onChangeText={(text) =>
                      setCredentials({ ...credentials, password: text })
                    }
@@ -252,7 +250,7 @@ const Login: React.FC = () => {
                      loading={loading}
                      className="flex-1 mr-2"
                    >
-                      Log in
+                      {t("login.login_button")}
                    </Button>
                    <TouchableOpacity
                      onPress={handleQuickConnect}
@@ -286,11 +284,11 @@ const Login: React.FC = () => {
                />
                <Text className="text-3xl font-bold">Streamyfin</Text>
                <Text className="text-neutral-500">
-                  Enter the URL to your Jellyfin server
+                  {t("server.enter_url_to_jellyfin_server")}
                </Text>
                <Input
                  aria-label="Server URL"
-                  placeholder="http(s)://your-server.com"
+                  placeholder={t("server.server_url_placeholder")}
                  onChangeText={setServerURL}
                  value={serverURL}
                  keyboardType="url"
@@ -299,14 +297,13 @@ const Login: React.FC = () => {
                  textContentType="URL"
                  maxLength={500}
                />
-
                <Button
                  loading={loadingServerCheck}
                  disabled={loadingServerCheck}
                  onPress={async () => await handleConnect(serverURL)}
                  className="w-full grow"
                >
-                  Connect
+                  {t("server.connect_button")}
                </Button>
                <JellyfinServerDiscovery
                  onServerSelect={(server) => {