Internationalize app to support more than one language (#58)

Author: MugemaneBertin2001

__tests__/components/LanguagePicker.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '@/internationalization'; 
+import LanguagePicker from '@/components/LanguagePicker';
+
+jest.mock('react-native/Libraries/Utilities/useColorScheme', () => ({
+  __esModule: true,
+  default: jest.fn(() => 'light'), 
+}));
+
+describe('LanguagePicker', () => {
+  it('renders the picker component and allows language selection', () => {
+    const { getByTestId, getByText } = render(
+      <I18nextProvider i18n={i18n}>
+        <LanguagePicker />
+      </I18nextProvider>
+    );
+
+    expect(getByTestId('language-picker')).toBeTruthy();
+
+    const picker = getByTestId('language-picker');
+    expect(picker.props.selectedValue).toBe('en');
+    fireEvent(picker, 'onValueChange', 'fr');
+    expect(i18n.language).toBe('fr');
+    expect(getByText('Français')).toBeTruthy();
+  });
+});

app.json

@@ -34,7 +34,10 @@
               "pathPrefix": "/register"
             }
           ],
-          "category": ["BROWSABLE", "DEFAULT"]
+          "category": [
+            "BROWSABLE",
+            "DEFAULT"
+          ]
         }
       ]
     },
@@ -43,7 +46,11 @@
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
-    "plugins": ["expo-router", "expo-font"],
+    "plugins": [
+      "expo-router",
+      "expo-font",
+      "expo-localization"
+    ],
     "experiments": {
       "typedRoutes": true
     },

app/(onboarding)/index.tsx

@@ -4,41 +4,30 @@ import { router } from 'expo-router';
 import { useEffect, useRef, useState } from 'react';
 import { TouchableOpacity, useColorScheme } from 'react-native';
 import PagerView from 'react-native-pager-view';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useTranslation } from 'react-i18next';
+import LanguagePicker from '@/components/LanguagePicker';
+
+
 type Page = {
   image: any;
   content: string;
 };
 
-const pages: Page[] = [
-  {
-    image: require('@/assets/images/onboarding/1.png'),
-    content: "Optimize your organization's potential with Performance Management/Analytics.",
-  },
-  {
-    image: require('@/assets/images/onboarding/2.png'),
-    content: 'Identify top performers, discover hidden talent, and optimize your workforce.',
-  },
-  {
-    image: require('@/assets/images/onboarding/3.png'),
-    content: 'Unlock the potential of a Continuous & Tight Feedback Loop.',
-  },
-];
-
 export default function AppOnboarding() {
+  const { t, i18n } = useTranslation(); 
   const colorScheme = useColorScheme();
   const pagerViewRef = useRef<PagerView>(null);
   const [page, setPage] = useState<number>(0);
 
   const textColor = colorScheme === 'dark' ? 'text-gray-100' : 'text-gray-800';
   const bgColor = colorScheme === 'dark' ? 'bg-primary-dark' : 'bg-secondary-light';
 
+  
   const getDotColor = (index: number) => (index === page ? 'bg-action-500' : 'bg-white');
   const [token, setToken] = useState<string | null>(null);
 
 
   useEffect(() => {
-    // check if user have signed in before
 
     const interval = setInterval(() => {
       setPage(page === 2 ? 0 : page + 1);
@@ -51,8 +40,24 @@ export default function AppOnboarding() {
     pagerViewRef.current?.setPage(page);
   }, [page]);
 
+  const pages: Page[] = [
+    {
+      image: require('@/assets/images/onboarding/1.png'),
+      content: t('onboarding.page1'), 
+    },
+    {
+      image: require('@/assets/images/onboarding/2.png'),
+      content: t('onboarding.page2'),
+    },
+    {
+      image: require('@/assets/images/onboarding/3.png'),
+      content: t('onboarding.page3'),
+    },
+  ];
+
   return (
     <>
+      {/* Pager View for Onboarding Screens */}
       <PagerView
         initialPage={page}
         style={{ minHeight: 580 }}
@@ -65,7 +70,7 @@ export default function AppOnboarding() {
             <Image
               source={page.image}
               contentFit="contain"
-              className="mb-6 justify-center items-end"
+              className="items-end justify-center mb-6"
               style={{ width: '100%', flex: 1 }}
             />
             <Text
@@ -77,18 +82,28 @@ export default function AppOnboarding() {
           </View>
         ))}
       </PagerView>
+
+      {/* Pagination Dots */}
       <View className={`flex-1 flex-row justify-center items-center gap-3 ${bgColor}`}>
-        <View className={`rounded-full bg-action-500 w-4 h-4 ${getDotColor(0)}`}></View>
+        <View className={`rounded-full w-4 h-4 ${getDotColor(0)}`}></View>
         <View className={`rounded-full w-4 h-4 ${getDotColor(1)}`}></View>
         <View className={`rounded-full w-4 h-4 ${getDotColor(2)}`}></View>
       </View>
+      
+      {/* Language Switcher */}
+      <View className="mb-4">
+        <LanguagePicker />
+      </View>
+
+
+      {/* Get Started Button */}
       <View className={`flex-1 flex-row justify-center items-center ${bgColor}`}>
         <TouchableOpacity>
           <Text
             className="text-lg font-Inter-Medium dark:text-white"
             onPress={() => router.push('/auth/login')}
           >
-            Get Started
+            {t('onboarding.getStarted')} 
           </Text>
         </TouchableOpacity>
       </View>

app/+not-found.tsx

@@ -2,29 +2,29 @@ import { Link } from 'expo-router';
 
 import { Text, View } from '@/components/Themed';
 import { Image } from 'expo-image';
+import { useTranslation } from 'react-i18next'; 
 
 export default function NotFoundScreen() {
+  const { t } = useTranslation();
   return (
-    <>
-      <View className="flex-1 justify-center items-center p-8">
-        <View className="h-60 w-full mb-10">
+      <View className="items-center justify-center flex-1 p-8">
+        <View className="w-full mb-10 h-60">
           <Image
             source={require('@/assets/images/page_not_found.svg')}
             contentFit="contain"
-            className="mb-6 justify-center items-end"
+            className="items-end justify-center mb-6"
             style={{ width: '100%', flex: 1 }}
           />
         </View>
-        <Text className="text-2xl font-Inter-Bold dark:text-white text-center max-w-64">
-          Oops! We can't find the page you're looking for.
+        <Text className="text-2xl text-center font-Inter-Bold dark:text-white max-w-64">
+        {t('notFound.title')}
         </Text>
 
         <Link href="/" className="mt-12">
-          <View className="py-4 px-6 bg-action-500 rounded-full">
-            <Text className="text-lg text-white">Go to home screen!</Text>
+          <View className="px-6 py-4 rounded-full bg-action-500">
+            <Text className="text-lg text-white">{t('notFound.goHome')}</Text>
           </View>
         </Link>
       </View>
-    </>
   );
 }

app/_layout.tsx

@@ -18,6 +18,7 @@ import { useEffect } from 'react';
 import 'react-native-reanimated';
 import { ToastProvider } from 'react-native-toast-notifications';
 export { ErrorBoundary } from 'expo-router';
+import '../internationalization/index';
 
 export const unstable_settings = {
   initialRouteName: '(onboarding)',

app/auth/_layout.tsx

@@ -1,4 +1,5 @@
 import { logo } from '@/assets/Icons/auth/Icons';
+import LanguagePicker from '@/components/LanguagePicker';
 import { Slot } from 'expo-router';
 import { useEffect, useState } from 'react';
 import { KeyboardAvoidingView, Platform, ScrollView, View, useColorScheme } from 'react-native';
@@ -31,12 +32,31 @@ export default function AuthLayout() {
           paddingRight: insets.right,
         }}
       >
-        <View className={`flex-1 bg-secondary-light-500 dark:bg-primary-dark h-full  ${bgColor}`}>
-          <View className="w-full h-[87px] relative bg-primary-light dark:bg-primary-dark flex items-center justify-center px-12">
+        <View className={`flex-1 bg-secondary-light-500 dark:bg-primary-dark h-full ${bgColor}`}>
+          {/* Header Section */}
+          <View className="w-full h-[87px] bg-primary-light dark:bg-primary-dark flex flex-row items-center justify-between px-12">
+            {/* Logo */}
             <View className="flex-row items-center">
               <SvgXml xml={logo} />
             </View>
+
+            {/* Language Picker */}
+            <View className="flex-row items-center space-x-2">
+              <LanguagePicker 
+              // @ts-ignore
+                style={{
+                  paddingHorizontal: 10,
+                  paddingVertical: 8,
+                  backgroundColor: colorScheme === 'dark' ? '#333' : '#fff',
+                  borderRadius: 8,
+                  borderWidth: 1,
+                  borderColor: colorScheme === 'dark' ? '#444' : '#ccc',
+                }}
+              />
+            </View>
           </View>
+
+          {/* Slot for Auth Content */}
           <Slot />
         </View>
       </ScrollView>

app/auth/forgot-password.tsx

@@ -3,18 +3,19 @@ import { View, Text, TextInput, useColorScheme, SafeAreaView, Dimensions, Toucha
 import { SvgXml } from 'react-native-svg';
 import { StatusBar } from 'expo-status-bar';
 import { bottomIcon_dark, bottomIcon_light } from '@/components/icons/icons';
-import Button from '@/components/buttons';
 import { useMutation } from '@apollo/client';
 import { useToast } from 'react-native-toast-notifications';
 import { useFormik } from 'formik';
 import { ResetPasswordSchema } from '@/validations/login.schema';
 import { RESET_PASSWORD_EMAIL } from '@/graphql/mutations/resetPassword';
+import { useTranslation } from 'react-i18next';
 
 type FormValues = {
   email: string;
 };
 
 export default function ResetPassword() {
+  const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const colorScheme = useColorScheme();
   const toast = useToast();
@@ -60,28 +61,25 @@ export default function ResetPassword() {
       <SafeAreaView>
         <StatusBar/>
       <View className={`flex ${bgColor} mt-36`}>
-        <View className="flex p-10 justify-center mt-16">
+        <View className="flex justify-center p-10 mt-16">
           <Text className={`text-3xl font-Inter-Bold mb-6 text-center ${textColor}`}>
-            Reset Password
+            {t("forgotPassword.title")}
           </Text>
 
           {replace ? (
             <View>
               <Text className={`text-m font-Inter-regular mb-2 text-center ${textColor}`}>
-                Password reset request successful!{' '}
-              </Text>
-              <Text className={`text-m font-Inter-regular mb-2 text-center ${textColor}`}>
-                Please check your email for a link to reset your password!
+              {t("forgotPassword.successMessage")}
               </Text>
             </View>
           ) : (
             <View>
               <Text className={`text-m font-Inter-regular mb-6 text-center ${textColor}`}>
-                You will receive an email to proceed with resetting password
+              {t("forgotPassword.instructions")}
               </Text>
               <View className={`${inputbg} p-3 rounded-lg shadow border-2 border-[#D2D2D2] mb-2`}>
                 <TextInput
-                  placeholder="Enter Email"
+                  placeholder={t("forgotPassword.placeholder")}
                   placeholderTextColor="gray"
                   value={formik.values.email}
                   onChangeText={formik.handleChange('email')}
@@ -91,18 +89,18 @@ export default function ResetPassword() {
                 />
               </View>
               {formik.errors.email && (
-                <Text className="text-error-500 mb-4">{formik.errors.email}</Text>
+                <Text className="mb-4 text-error-500">{t("")}</Text>
               )}
               <TouchableOpacity
                 testID="submit-button"
                 onPress={() => formik.handleSubmit()}
-                className="bg-action-500 p-4 rounded-lg items-center"
+                className="items-center p-4 rounded-lg bg-action-500"
                 disabled={loading}
               >
                 {loading ? (
                   <ActivityIndicator color="white" />
                 ) : (
-                  <Text className="text-secondary-light-500 text-lg font-semibold">Continue</Text>
+                  <Text className="text-lg font-semibold text-secondary-light-500">{t("forgotPassword.submitButton")}</Text>
                 )}
               </TouchableOpacity>
             </View>