wip

app/(auth)/(tabs)/_layout.tsx

@@ -1,15 +1,15 @@
-import { router, Tabs } from "expo-router";
-import React, { useEffect } from "react";
-import * as NavigationBar from "expo-navigation-bar";
 import { TabBarIcon } from "@/components/navigation/TabBarIcon";
 import { Colors } from "@/constants/Colors";
-import { Platform, TouchableOpacity, View } from "react-native";
-import { Feather } from "@expo/vector-icons";
-import { Chromecast } from "@/components/Chromecast";
 import { BlurView } from "expo-blur";
-import { StyleSheet } from "react-native";
+import * as NavigationBar from "expo-navigation-bar";
+import { Tabs } from "expo-router";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, StyleSheet } from "react-native";
 
 export default function TabLayout() {
+  const { t } = useTranslation();
+
   useEffect(() => {
     if (Platform.OS === "android") {
       NavigationBar.setBackgroundColorAsync("#121212");
@@ -53,7 +53,7 @@ export default function TabLayout() {
         name="home"
         options={{
           headerShown: false,
-          title: "Home",
+          title: t("tabs.home"),
           tabBarIcon: ({ color, focused }) => (
             <TabBarIcon
               name={focused ? "home" : "home-outline"}
@@ -66,7 +66,7 @@ export default function TabLayout() {
         name="search"
         options={{
           headerShown: false,
-          title: "Search",
+          title: t("tabs.search"),
           tabBarIcon: ({ color, focused }) => (
             <TabBarIcon name={focused ? "search" : "search"} color={color} />
           ),
@@ -76,7 +76,7 @@ export default function TabLayout() {
         name="library"
         options={{
           headerShown: false,
-          title: "Library",
+          title: t("tabs.library"),
           tabBarIcon: ({ color, focused }) => (
             <TabBarIcon
               name={focused ? "apps" : "apps-outline"}

app/(auth)/(tabs)/home/_layout.tsx

@@ -1,11 +1,13 @@
 import { Chromecast } from "@/components/Chromecast";
 import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { TouchableOpacity } from "react-native";
 
 export default function IndexLayout() {
   const router = useRouter();
+  const { t } = useTranslation();
   return (
     <Stack>
       <Stack.Screen
@@ -13,7 +15,7 @@ export default function IndexLayout() {
         options={{
           headerShown: true,
           headerLargeTitle: true,
-          headerTitle: "Home",
+          headerTitle: t("home.home"),
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,

app/(auth)/(tabs)/home/index.tsx

@@ -20,12 +20,15 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { RefreshControl, ScrollView, View } from "react-native";
 
 export default function index() {
   const router = useRouter();
   const queryClient = useQueryClient();
 
+  const { i18n, t } = useTranslation();
+
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
@@ -216,9 +219,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.noInternet")}</Text>
         <Text className="text-center opacity-70">
-          No worries, you can still watch{"\n"}downloaded content.
+          {t("home.noInternetMessage")}
         </Text>
         <View className="mt-4">
           <Button
@@ -229,7 +232,7 @@ export default function index() {
               <Ionicons name="arrow-forward" size={20} color="white" />
             }
           >
-            Go to downloads
+            {t("home.goToDownloads")}
           </Button>
         </View>
       </View>
@@ -239,10 +242,8 @@ export default function index() {
   if (isError)
     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.errorMessage")}</Text>
       </View>
     );
 
@@ -265,14 +266,14 @@ export default function index() {
         <LargeMovieCarousel />
 
         <ScrollingCollectionList
-          title="Continue Watching"
+          title={t("home.continueWatching")}
           data={data}
           loading={isLoading}
           orientation="horizontal"
         />
 
         <ScrollingCollectionList
-          title="Next Up"
+          title={t("home.nextUp")}
           data={nextUpData}
           loading={isLoadingNextUp}
           orientation="horizontal"
@@ -283,19 +284,19 @@ export default function index() {
         ))}
 
         <ScrollingCollectionList
-          title="Recently Added in Movies"
+          title={t("home.recentlyAddedMovies")}
           data={recentlyAddedInMovies}
           loading={isLoadingRecentlyAddedMovies}
         />
 
         <ScrollingCollectionList
-          title="Recently Added in TV-Shows"
+          title={t("home.recentlyAddedTVShows")}
           data={recentlyAddedInTVShows}
           loading={isLoadingRecentlyAddedTVShows}
         />
 
         <ScrollingCollectionList
-          title="Suggestions"
+          title={t("home.suggestions")}
           data={suggestions}
           loading={isLoadingSuggestions}
           orientation="horizontal"