i18n added and used in drawer component

app/(drawer)/index.tsx

@@ -7,6 +7,7 @@ import { SpatialNavigationFocusableView, SpatialNavigationRoot, SpatialNavigatio
 import { Direction } from '@bam.tech/lrud';
 import { scaledPixels } from '@/hooks/useScale';
 import { LinearGradient } from 'expo-linear-gradient';
+import { useTranslation } from 'react-i18next';
 
 
 interface CardData {
@@ -30,6 +31,8 @@ export default function IndexScreen() {
 
   const focusedItem = useMemo(() => moviesData[focusedIndex], [focusedIndex]);
 
+  const { t } = useTranslation();
+
   const renderHeader = useCallback(() => (
     <View style={styles.header}>
       <Image 
@@ -116,9 +119,9 @@ export default function IndexScreen() {
         <SpatialNavigationScrollView  
           offsetFromStart={scaledPixels(60)}  
           style={styles.scrollContent}>   
-          {renderScrollableRow("Trending Movies", trendingRef)}
-          {renderScrollableRow("Classics", classicsRef)}
-          {renderScrollableRow("Hip and Modern", hipAndModernRef)}
+          {renderScrollableRow(t('categories.trending_movies'), trendingRef)}
+          {renderScrollableRow(t('categories.classics'), classicsRef)}
+          {renderScrollableRow(t('categories.hip_and_modern'), hipAndModernRef)}
         </SpatialNavigationScrollView>
         </View>
     </SpatialNavigationRoot> 

app/_layout.tsx

@@ -6,6 +6,8 @@ import { useCallback, useEffect } from 'react';
 
 import { MenuProvider } from '../components/MenuContext';
 import { GoBackConfiguration } from './remote-control/GoBackConfiguration';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '@/components/i18n';
 
 import "./configureRemoteControl"
 
@@ -33,6 +35,7 @@ export default function RootLayout() {
 
   return (
     <MenuProvider>
+    <I18nextProvider i18n={i18n}>
     <ThemeProvider value={DarkTheme}>
     <GoBackConfiguration />
       <Stack>
@@ -42,6 +45,7 @@ export default function RootLayout() {
         <Stack.Screen name="player" />
       </Stack>
     </ThemeProvider>
+    </I18nextProvider>
     </MenuProvider>
   );
 }

components/CustomDrawerContent.tsx

@@ -1,29 +1,44 @@
 import { scaledPixels } from "@/hooks/useScale";
 import { DrawerContentScrollView } from "@react-navigation/drawer";
 import { View, StyleSheet, Image, Platform, Text } from "react-native";
+import { Picker } from '@react-native-picker/picker';
 import { DefaultFocus, SpatialNavigationFocusableView, SpatialNavigationRoot } from "react-tv-space-navigation";
 import { useRouter } from "expo-router";
 import { useMenuContext } from "@/components/MenuContext";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTranslation } from 'react-i18next';
 
 export default function CustomDrawerContent(props: any) {
   const router = useRouter();
   const { isOpen: isMenuOpen, toggleMenu } = useMenuContext();
   const styles = useDrawerStyles();
   const {top, right, bottom, left} = useSafeAreaInsets();
+  const { t, i18n } = useTranslation();
   const drawerItems = [
-    { name: '/', label: 'Home' },
-    { name: 'explore', label: 'Explore'},
-    { name: 'tv', label: 'TV'},
+    { name: '/', label: t('drawer.index') },
+    { name: 'explore', label: t('drawer.explore')},
+    { name: 'tv', label: t('drawer.tv')},
   ];
-
+  const changeLanguage = (language: string) => {
+    i18n.changeLanguage(language);
+  };
   return (
     <SpatialNavigationRoot isActive={isMenuOpen}>
       <DrawerContentScrollView {...props} style={styles.container} scrollEnabled={false}>
         <View style={styles.header}>
           <Image source={require('@/assets/images/logo.png')} style={styles.profilePic} />
           <Text style={styles.userName}>Pioneer Tom</Text>
           <Text style={styles.switchAccount}>Switch account</Text>
+          <Text style={styles.switchLanguage}>Switch Language</Text>
+          <Picker
+            selectedValue={i18n.language}
+            onValueChange={(itemValue: string) => changeLanguage(itemValue)}
+            style={styles.picker}
+          >
+            <Picker.Item label="English" value="en" />
+            <Picker.Item label="Français" value="fr" />
+            <Picker.Item label="Español" value="es" />
+      </Picker>
         </View>
         {drawerItems.map((item, index) => (
          index === 0 ? (
@@ -108,5 +123,15 @@ const useDrawerStyles = function () {
     menuTextFocused: {
       color: 'black',
     },
+    switchLanguage: {
+      paddingTop: scaledPixels(10),
+      paddingBottom: scaledPixels(6),
+      color: 'white',
+      fontSize: scaledPixels(26),
+    },
+    picker: {
+      height: 40,
+      width: '60%'
+    }
   });
 };

components/i18n/en.json

@@ -0,0 +1,13 @@
+
+{
+    "drawer": {
+      "index": "Home",
+      "explore": "Explore",
+      "tv": "TV"
+    },
+    "categories": {
+        "trending_movies": "Trending Movies",
+        "classics": "Classics",
+        "hip_and_modern": "Hip and Modern"
+    }
+  }

components/i18n/es.json

@@ -0,0 +1,12 @@
+{
+  "drawer": {
+    "index": "Inicio",
+    "explore": "Explorar",
+    "tv": "Televisión"
+  },
+  "categories": {
+    "trending_movies": "Películas de Tendencia",
+    "classics": "Clásicos",
+    "hip_and_modern": "Moderno y de moda"
+  }
+}

components/i18n/fr.json

@@ -0,0 +1,12 @@
+{
+    "drawer": {
+      "index": "Accueil",
+      "explore": "Explorer",
+      "tv": "Télévision"
+    },
+    "categories": {
+        "trending_movies": "Films Tendance",
+        "classics": "Classiques",
+        "hip_and_modern": "À la mode et moderne"
+    }
+  }

components/i18n/index.tsx

@@ -0,0 +1,33 @@
+import i18next from 'i18next';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+
+i18next
+    .use(initReactI18next)
+    .use(LanguageDetector)
+    .init({
+        compatibilityJSON: 'v3',
+        resources: {
+          en: {
+            translation: en,
+          },
+          es: {
+            translation: es,
+          },
+          fr: {
+            translation: fr,
+          },
+        },
+        lng: 'en',
+        fallbackLng: 'en',
+        interpolation: {
+          escapeValue: false,
+        },
+      });
+
+    export default i18n;

package.json

@@ -17,37 +17,42 @@
   "dependencies": {
     "@bam.tech/react-native-keyevent-expo-config-plugin": "^1.0.50",
     "@expo/vector-icons": "^14.0.0",
+    "@react-native-picker/picker": "^2.8.1",
     "@react-navigation/drawer": "^6.6.15",
     "@react-navigation/native": "^6.0.2",
     "expo": "~51.0.13",
     "expo-build-properties": "~0.12.3",
     "expo-constants": "~16.0.2",
     "expo-font": "~12.0.7",
+    "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-router": "~3.5.16",
     "expo-splash-screen": "~0.27.5",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.6",
     "expo-web-browser": "~13.0.3",
+    "i18next": "^23.15.2",
+    "i18next-browser-languagedetector": "^3.0.0",
+    "package": "^1.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-i18next": "^15.0.2",
     "react-native": "npm:react-native-tvos@~0.74.2-0",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-keyevent": "^0.3.2",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-web": "~0.19.10",
-    "react-tv-space-navigation": "^3.6.1",
-    "expo-linear-gradient": "~13.0.2"
+    "react-tv-space-navigation": "^3.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "babel-plugin-module-resolver": "^4.1.0",
     "@react-native-tvos/config-tv": "^0.0.10",
     "@types/jest": "^29.5.12",
     "@types/react": "~18.2.45",
     "@types/react-test-renderer": "^18.0.7",
+    "babel-plugin-module-resolver": "^4.1.0",
     "jest": "^29.2.1",
     "jest-expo": "~51.0.1",
     "react-native-pixel-perfect": "^1.0.2",