@fadyshawky/react-native-magic 2.0.5 → 2.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fadyshawky/react-native-magic",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "react native template with ready components, hooks, react navigation, redux, typescript, etc.",
   "keywords": [
     "react-native-magic",

package/template/App.tsx

@@ -11,7 +11,8 @@ import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {Provider} from 'react-redux';
 import {PersistGate} from 'redux-persist/integration/react';
 import {LocalizationProvider} from './src/common/localization/LocalizationProvider';
-import {DEFAULT_LANGUAGE} from './src/common/localization/localization';
+import {RTLInitializer} from './src/common/localization/RTLInitializer';
+import {useAppSelector} from './src/core/store/reduxHelpers';
 import {persistor, store} from './src/core/store/store';
 import {ThemeProvider, useTheme} from './src/core/theme/ThemeProvider';
 import AppNavigator from './src/navigation/MainNavigation';
@@ -20,17 +21,23 @@ LogBox.ignoreAllLogs();
 
 const ThemedApp = () => {
   const {theme} = useTheme();
+  const {language} = useAppSelector(state => state.app);
+
   return (
-    <SafeAreaProvider>
-      <SafeAreaView style={{position: 'absolute'}} />
-      <StatusBar
-        barStyle={theme.mode === 'dark' ? 'light-content' : 'dark-content'}
-        backgroundColor={theme.colors.background}
-      />
-      <SheetProvider>
-        <AppNavigator />
-      </SheetProvider>
-    </SafeAreaProvider>
+    <RTLInitializer>
+      <LocalizationProvider initialLanguage={language}>
+        <SafeAreaProvider>
+          <SafeAreaView style={{position: 'absolute'}} />
+          <StatusBar
+            barStyle={theme.mode === 'dark' ? 'light-content' : 'dark-content'}
+            backgroundColor={theme.colors.background_2}
+          />
+          <SheetProvider>
+            <AppNavigator />
+          </SheetProvider>
+        </SafeAreaProvider>
+      </LocalizationProvider>
+    </RTLInitializer>
   );
 };
 
@@ -38,11 +45,9 @@ function App(): React.JSX.Element {
   return (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
-        <LocalizationProvider initialLanguage={DEFAULT_LANGUAGE}>
-          <ThemeProvider initialTheme="dark">
-            <ThemedApp />
-          </ThemeProvider>
-        </LocalizationProvider>
+        <ThemeProvider initialTheme="dark">
+          <ThemedApp />
+        </ThemeProvider>
       </PersistGate>
     </Provider>
   );

package/template/ios/reactnativemagic/AppDelegate.mm

@@ -1,11 +1,16 @@
 #import "AppDelegate.h"
 
 #import <React/RCTBundleURLProvider.h>
+#import <React/RCTI18nUtil.h>
 
 @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
+
+  [[RCTI18nUtil sharedInstance] allowRTL:YES];
+  [[RCTI18nUtil sharedInstance] forceRTL:YES];
+
   self.moduleName = @"reactnativemagic";
   // You can add your custom initial props in the dictionary below.
   // They will be passed down to the ViewController used by React Native.

package/template/src/common/ImageResources.g.ts

@@ -9,36 +9,4 @@ import {ImageURISource} from 'react-native';
  * https://github.com/svbutko/react-native-image-resource-generator
  */
 
-export class ImageResources {
-  static readonly account: ImageURISource = require('../../resources/images/Account.png');
-  static readonly arrows: ImageURISource = require('../../resources/images/Arrows.png');
-  static readonly background_2: ImageURISource = require('../../resources/images/Background_2.png');
-  static readonly balance: ImageURISource = require('../../resources/images/Balance.png');
-  static readonly commission: ImageURISource = require('../../resources/images/Commission.png');
-  static readonly display: ImageURISource = require('../../resources/images/Display.png');
-  static readonly en: ImageURISource = require('../../resources/images/EN.png');
-  static readonly favourite_active: ImageURISource = require('../../resources/images/Favourite_Active.png');
-  static readonly favourite_inactive: ImageURISource = require('../../resources/images/Favourite_Inactive.png');
-  static readonly favourites: ImageURISource = require('../../resources/images/Favourites.png');
-  static readonly financials: ImageURISource = require('../../resources/images/Financials.png');
-  static readonly language: ImageURISource = require('../../resources/images/Language.png');
-  static readonly neo_pay_plus_logo: ImageURISource = require('../../resources/images/Neo_Pay_Plus_Logo.png');
-  static readonly services: ImageURISource = require('../../resources/images/Services.png');
-  static readonly splash_screen: ImageURISource = require('../../resources/images/Splash_Screen.png');
-  static readonly ar: ImageURISource = require('../../resources/images/ar.png');
-  static readonly arrow_left: ImageURISource = require('../../resources/images/arrow_left.png');
-  static readonly arrow_right: ImageURISource = require('../../resources/images/arrow_right.png');
-  static readonly dark: ImageURISource = require('../../resources/images/dark.png');
-  static readonly dark_background_1: ImageURISource = require('../../resources/images/dark_background_1.png');
-  static readonly dark_splash_logo: ImageURISource = require('../../resources/images/dark_splash_logo.png');
-  static readonly full_ammount: ImageURISource = require('../../resources/images/full_ammount.png');
-  static readonly header_logo: ImageURISource = require('../../resources/images/header_logo.png');
-  static readonly light: ImageURISource = require('../../resources/images/light.png');
-  static readonly light_background_1: ImageURISource = require('../../resources/images/light_background_1.png');
-  static readonly light_header_logo: ImageURISource = require('../../resources/images/light_header_logo.png');
-  static readonly light_splash_logo: ImageURISource = require('../../resources/images/light_splash_logo.png');
-  static readonly partial_ammount: ImageURISource = require('../../resources/images/partial_ammount.png');
-  static readonly receipt_logo: ImageURISource = require('../../resources/images/receipt_logo.png');
-  static readonly receipt_logo_transparent: ImageURISource = require('../../resources/images/receipt_logo_transparent.png');
-  static readonly repeat: ImageURISource = require('../../resources/images/repeat.png');
-}
+export class ImageResources {}

package/template/src/common/components/Background.tsx

@@ -1,9 +1,8 @@
 import React, {FC, memo} from 'react';
 import {ImageBackground, StyleSheet, View, ViewStyle} from 'react-native';
+import {KeyboardAwareScrollViewProps} from 'react-native-keyboard-aware-scroll-view';
 import {useTheme} from '../../core/theme/ThemeProvider';
-import {ImageResources} from '../ImageResources.g';
 import {Container} from './Container';
-import {KeyboardAwareScrollViewProps} from 'react-native-keyboard-aware-scroll-view';
 
 interface BackgroundProps
   extends Omit<KeyboardAwareScrollViewProps, 'contentContainerStyle'> {
@@ -46,7 +45,7 @@ export const Background: FC<BackgroundProps> = memo(
         <View
           style={[
             styles.container,
-            {backgroundColor: theme.colors.background},
+            {backgroundColor: theme.colors.background_2},
           ]}>
           {content}
         </View>
@@ -55,10 +54,11 @@ export const Background: FC<BackgroundProps> = memo(
 
     return (
       <View
-        style={[styles.container, {backgroundColor: theme.colors.background}]}>
-        <ImageBackground
-          source={ImageResources[`${theme.mode}_background_1`]}
-          style={styles.container}>
+        style={[
+          styles.container,
+          {backgroundColor: theme.colors.background_2},
+        ]}>
+        <ImageBackground source={0} style={styles.container}>
           {content}
         </ImageBackground>
       </View>

package/template/src/common/components/Container.tsx

@@ -1,21 +1,18 @@
 import React, {forwardRef} from 'react';
 import {
-  StyleSheet,
-  ViewStyle,
-  Platform,
-  KeyboardAvoidingView,
-  ScrollView,
-  View,
   ImageBackground,
   ImageSourcePropType,
+  KeyboardAvoidingView,
+  StyleSheet,
+  View,
+  ViewStyle,
 } from 'react-native';
 import {
   KeyboardAwareScrollView,
   KeyboardAwareScrollViewProps,
 } from 'react-native-keyboard-aware-scroll-view';
-import {useTheme} from '../../core/theme/ThemeProvider';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {ImageResources} from '../ImageResources.g';
+import {useTheme} from '../../core/theme/ThemeProvider';
 
 interface ContainerProps extends Partial<KeyboardAwareScrollViewProps> {
   children: React.ReactNode;
@@ -41,7 +38,7 @@ export const Container = forwardRef<KeyboardAwareScrollView, ContainerProps>(
       withoutScroll = false,
       backgroundColor,
       withoutBackgroundImage = false,
-      backgroundImage = ImageResources[`light_background_1`],
+      backgroundImage = 0,
       extendedBackground = false,
       ...scrollViewProps
     },
@@ -50,7 +47,7 @@ export const Container = forwardRef<KeyboardAwareScrollView, ContainerProps>(
     const {theme} = useTheme();
     const insets = useSafeAreaInsets();
     const Wrapper = useSafeArea ? SafeAreaView : View;
-    const bgColor = backgroundColor || theme.colors.background;
+    const bgColor = backgroundColor || theme.colors.background_2;
 
     const content = (
       <Wrapper

package/template/src/common/localization/LocalizationProvider.tsx

@@ -46,41 +46,42 @@ export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({
     storedIsRTL !== undefined ? storedIsRTL : currentLanguage === Languages.ar,
   );
 
+  // Update RTL state when stored values change
   useEffect(() => {
-    setLanguageUtil(currentLanguage);
-    setIsRTL(currentLanguage === Languages.ar);
+    if (storedIsRTL !== undefined) {
+      setIsRTL(storedIsRTL);
+    } else if (storedLanguage) {
+      setIsRTL(storedLanguage === Languages.ar);
+    }
+  }, [storedLanguage, storedIsRTL]);
 
-    // Force app restart on Android when changing RTL/LTR
-    if (Platform.OS === 'android') {
-      const shouldBeRTL = currentLanguage === Languages.ar;
-      if (I18nManager.isRTL !== shouldBeRTL) {
-        I18nManager.allowRTL(shouldBeRTL);
-        I18nManager.forceRTL(shouldBeRTL);
-      }
+  // Set language utility when currentLanguage changes
+  useEffect(() => {
+    if (currentLanguage) {
+      setLanguageUtil(currentLanguage);
     }
   }, [currentLanguage]);
 
   const changeLanguage = (language: Languages) => {
-    // Only restart if the language is actually changing
     if (language !== currentLanguage) {
+      console.log('Changing language from', currentLanguage, 'to', language);
+
       setCurrentLanguage(language);
       dispatch(setLanguageAction(language));
 
       // Set RTL configuration before restart
       const shouldBeRTL = language === Languages.ar;
       if (I18nManager.isRTL !== shouldBeRTL) {
+        console.log('Language change requires RTL update:', shouldBeRTL);
         I18nManager.allowRTL(shouldBeRTL);
         I18nManager.forceRTL(shouldBeRTL);
 
         // Restart the app to apply RTL/LTR changes properly
-        // Small delay to ensure settings are applied
         setTimeout(() => {
           try {
-            // Check if RNRestart is available
             if (RNRestart && typeof RNRestart.restart === 'function') {
               RNRestart.restart();
             } else if (Platform.OS === 'android') {
-              // Fallback for Android using DevSettings
               const DevSettings = NativeModules.DevSettings;
               if (DevSettings && DevSettings.reload) {
                 DevSettings.reload();
@@ -103,7 +104,6 @@ export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({
       const keys = key.split('.');
       let result: any = localization[section];
 
-      // If the key has dot notation (e.g., 'registration.title'), navigate through the object
       if (keys.length > 1) {
         for (const k of keys) {
           result = result[k];
@@ -111,7 +111,6 @@ export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({
         return result || key;
       }
 
-      // Simple key
       return result[key] || key;
     } catch (error) {
       console.warn(
@@ -139,13 +138,11 @@ export const useLocalization = () => {
   return context;
 };
 
-// Shorthand hook for translations
 export const useTranslation = () => {
   const {t} = useLocalization();
   return t;
 };
 
-// Hook to get RTL status
 export const useRTL = () => {
   const {isRTL} = useLocalization();
   return isRTL;

package/template/src/common/localization/RTLInitializer.tsx

@@ -0,0 +1,90 @@
+import React, {useEffect, useState} from 'react';
+import {I18nManager, Platform, NativeModules} from 'react-native';
+import {useAppSelector} from '../../core/store/reduxHelpers';
+import {Languages} from './localization';
+
+interface RTLInitializerProps {
+  children: React.ReactNode;
+}
+
+export const RTLInitializer: React.FC<RTLInitializerProps> = ({children}) => {
+  const [isInitialized, setIsInitialized] = useState(false);
+  const {language, isRTL} = useAppSelector(state => state.app);
+
+  useEffect(() => {
+    const initializeRTL = () => {
+      console.log('=== RTL Initializer - Starting initialization ===');
+      console.log('Stored language:', language);
+      console.log('Stored isRTL:', isRTL);
+      console.log('Current I18nManager.isRTL:', I18nManager.isRTL);
+      console.log('Current I18nManager.forceRTL:', I18nManager.forceRTL);
+
+      // Determine the correct RTL setting with better logic
+      let shouldBeRTL: boolean;
+
+      if (isRTL !== undefined) {
+        // Use stored RTL setting if available (highest priority)
+        shouldBeRTL = isRTL;
+        console.log('✅ Using stored isRTL setting:', shouldBeRTL);
+      } else if (language) {
+        // Use stored language to determine RTL
+        shouldBeRTL = language === Languages.ar;
+        console.log('✅ Using language-based RTL setting:', shouldBeRTL);
+      } else {
+        // Fall back to default (Arabic/RTL)
+        shouldBeRTL = true;
+        console.log('✅ Using default RTL setting:', shouldBeRTL);
+      }
+
+      // Apply RTL setting if it differs from current
+      if (I18nManager.isRTL !== shouldBeRTL) {
+        console.log(
+          '🔄 Updating I18nManager RTL from',
+          I18nManager.isRTL,
+          'to',
+          shouldBeRTL,
+        );
+
+        // Force the RTL setting
+        I18nManager.allowRTL(shouldBeRTL);
+        I18nManager.forceRTL(shouldBeRTL);
+
+        // Double-check the setting was applied
+        setTimeout(() => {
+          console.log(
+            ' Verification - I18nManager.isRTL after update:',
+            I18nManager.isRTL,
+          );
+          if (I18nManager.isRTL !== shouldBeRTL) {
+            console.warn('⚠️ RTL setting was not applied correctly!');
+          } else {
+            console.log('✅ RTL setting applied successfully');
+          }
+        }, 100);
+      } else {
+        console.log(
+          '✅ I18nManager RTL setting is already correct:',
+          I18nManager.isRTL,
+        );
+      }
+
+      // Mark as initialized
+      setIsInitialized(true);
+      console.log('=== RTL Initializer - Initialization complete ===');
+    };
+
+    // Wait longer to ensure Redux state is fully hydrated
+    // Increased timeout to handle slower devices
+    const timer = setTimeout(initializeRTL, 800);
+    return () => clearTimeout(timer);
+  }, [language, isRTL]);
+
+  // Don't render children until RTL is initialized
+  if (!isInitialized) {
+    console.log('⏳ RTL Initializer: Waiting for initialization...');
+    return null; // or a loading screen
+  }
+
+  console.log('🚀 RTL Initializer: Rendering children');
+  return <>{children}</>;
+};

package/template/src/common/localization/intlFormatter.ts

@@ -0,0 +1,37 @@
+import Intl from 'intl';
+import {getLanguage} from './localization';
+// eslint-disable-next-line import/no-unassigned-import
+import 'intl/locale-data/jsonp/en';
+
+export function formatPercent(percent: number | string): string {
+  const formatter = new Intl.NumberFormat(getLanguage(), {
+    style: 'percent',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  });
+
+  return formatter.format(Number(percent) / 100);
+}
+
+export function formatCurrency(
+  price: number | string,
+  currency?: string,
+): string {
+  const formatter = new Intl.NumberFormat(getLanguage(), {
+    style: 'currency',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+    currency: currency || 'USD',
+  });
+
+  return formatter.format(Number(price));
+}
+
+export function formatDecimal(value: number | string): string {
+  const formatter = new Intl.NumberFormat(getLanguage(), {
+    style: 'decimal',
+    minimumFractionDigits: 0,
+  });
+
+  return formatter.format(Number(value));
+}

package/template/src/common/localization/localization.ts

@@ -8,12 +8,11 @@ import {setDateLocale} from './dateFormatter';
 import {loginLocalization} from './translations/loginLocalization';
 import {homeLocalization} from './translations/homeLocalization';
 import {profileLocalization} from './translations/profileLocalization';
+import {I18nManager} from 'react-native';
 import {otpLocalization} from './translations/otpLocalization';
 import {passwordLocalization} from './translations/passwordLocalization';
 import {navigationLocalization} from './translations/navigationLocalization';
 import {mainNavigationLocalization} from './translations/mainNavigationLocalization';
-import {I18nManager} from 'react-native';
-import {posLocalization} from './translations/posLocalization';
 
 export enum Languages {
   en = 'en',
@@ -33,7 +32,6 @@ export const localization = {
   password: new LocalizedStrings(passwordLocalization),
   navigation: new LocalizedStrings(navigationLocalization),
   mainNavigation: new LocalizedStrings(mainNavigationLocalization),
-  pos: new LocalizedStrings(posLocalization),
 };
 
 export function getLanguage(): string {

package/template/src/common/localization/translations/commonLocalization.ts

@@ -1,19 +1,19 @@
 export const commonLocalization = {
   en: {
     search: 'Search',
-    selectPhoto: 'Select a photo',
-    takePhoto: 'Take a photo',
-    chooseFromLibrary: 'Choose from library',
+    selectPhoto: 'Select Photo',
+    takePhoto: 'Take Photo',
+    chooseFromLibrary: 'Choose from Library',
     cancel: 'Cancel',
     reject: 'Reject',
     delete: 'Delete',
     back: 'Back',
     next: 'Next',
     done: 'Done',
-    ok: 'Ok',
+    ok: 'OK',
     continue: 'Continue',
     save: 'Save',
-    loading: 'Loading',
+    loading: 'Loading...',
     photo: 'Photo',
     yes: 'Yes',
     no: 'No',
@@ -21,50 +21,15 @@ export const commonLocalization = {
     warning: 'Warning',
     success: 'Success',
     select: 'Select',
-    dataSuccessfullyUpdated: 'Data has been successfully updated',
+    dataSuccessfullyUpdated: 'Data updated successfully',
     settings: 'Settings',
     required: ' (required)',
     optional: ' (optional)',
-    currency: 'EGP',
-    seeMore: 'See More',
-    restartRequired: 'Restart Required',
-    restartAppMessage: 'The app needs to restart to apply language changes.',
-    restart: 'Restart',
-    change: 'Change',
-    submit: 'Submit',
-    billAmount: 'Bill Amount',
-    fullAmount: 'Full Amount',
-    partialAmount: 'Other Amount',
-    enterAmount: 'Enter Amount',
-    paymentDetails: 'Payment Details',
-    amount: 'Amount',
-    fees: 'Fees',
-    total: 'Total',
-    favoriteCategories: 'Favorite Categories',
-    favoriteProviders: 'Favorite Providers',
-    noFavoriteCategories: 'No favorite categories yet',
-    noFavoriteProviders: 'No favorite providers yet',
-    commission: 'Commission',
-    dueDate: 'Due Date',
-    issueDate: 'Issue Date',
-    print: 'Print',
-    allServices: 'All Services',
-    totalAfterFees: 'Total after service fees',
-    quantity: 'Quantity',
-    amountToPay: 'Amount to Pay',
-    voucher: 'Voucher',
-    invalidAccountNumber: 'Invalid account number',
-    otherAmount: 'Other Amount',
-    error: 'Error',
-    invalid_format: 'Invalid format',
-    otherAmountLabel: 'Other Amount',
-    backToHome: 'Back to Home',
-    confirm: 'Confirm',
   },
   ar: {
     search: 'بحث',
     selectPhoto: 'اختر صورة',
-    takePhoto: 'التقط صورة',
+    takePhoto: 'التقاط صورة',
     chooseFromLibrary: 'اختر من المكتبة',
     cancel: 'إلغاء',
     reject: 'رفض',
@@ -73,54 +38,19 @@ export const commonLocalization = {
     next: 'التالي',
     done: 'تم',
     ok: 'موافق',
-    continue: 'استمرار',
+    continue: 'متابعة',
     save: 'حفظ',
-    loading: 'جاري التحميل',
+    loading: 'جاري التحميل...',
     photo: 'صورة',
     yes: 'نعم',
     no: 'لا',
     areYouSure: 'هل أنت متأكد؟',
     warning: 'تحذير',
-    success: 'نجاح',
-    select: 'اختر',
+    success: 'نجح',
+    select: 'اختيار',
     dataSuccessfullyUpdated: 'تم تحديث البيانات بنجاح',
     settings: 'الإعدادات',
     required: ' (مطلوب)',
     optional: ' (اختياري)',
-    currency: 'ج.م',
-    seeMore: 'عرض المزيد',
-    restartRequired: 'إعادة التشغيل مطلوبة',
-    restartAppMessage: 'يحتاج التطبيق إلى إعادة التشغيل لتطبيق تغييرات اللغة.',
-    restart: 'إعادة تشغيل',
-    change: 'تغيير',
-    submit: 'إرسال',
-    billAmount: 'مبلغ الفاتورة',
-    fullAmount: 'المبلغ الكامل',
-    partialAmount: 'مبلغ آخر',
-    enterAmount: 'أدخل المبلغ',
-    paymentDetails: 'تفاصيل الدفع',
-    amount: 'المبلغ',
-    fees: 'الرسوم',
-    total: 'الإجمالي',
-    favoriteCategories: 'الفئات المفضلة',
-    favoriteProviders: 'مقدمي الخدمات المفضلين',
-    noFavoriteCategories: 'لا توجد فئات مفضلة بعد',
-    noFavoriteProviders: 'لا يوجد مقدمي خدمات مفضلين بعد',
-    commission: 'العمولة',
-    dueDate: 'الموعد المستحق',
-    issueDate: 'التاريخ الصادر',
-    print: 'طباعة',
-    allServices: 'جميع الخدمات',
-    totalAfterFees: 'بعد رسوم الخدمة',
-    quantity: 'الكمية',
-    amountToPay: 'قيمة الدفع',
-    voucher: 'القسيمة',
-    otherAmount: 'مبلغ آخر',
-    invalidAccountNumber: 'رقم الحساب غير صالح',
-    error: 'خطأ',
-    invalid_format: 'صيغة غير صالحة',
-    otherAmountLabel: 'مبلغ آخر',
-    backToHome: 'العودة للرئيسية',
-    confirm: 'تأكيد',
   },
 };

package/template/src/common/localization/translations/emptyLocalization.ts

@@ -1,6 +1,10 @@
 export const emptyLocalization = {
   en: {
-    noData: 'No data',
-    checkThisPageLater: 'Check this page later',
+    noData: 'No data available',
+    checkThisPageLater: 'Check back later',
+  },
+  ar: {
+    noData: 'لا توجد بيانات',
+    checkThisPageLater: 'تحقق لاحقاً',
   },
 };

package/template/src/common/localization/translations/errorsLocalization.ts

@@ -1,22 +1,42 @@
 export const errorsLocalization = {
   en: {
-    listErrorTitle: 'Failed to load data.',
-    tryAgain: 'Try again.',
-    thisFieldIsRequired: 'This field is required.',
-    unknownErrorHasOccurred: 'An unknown error has occurred.',
-    failedToOpenUrl: 'Failed to open URL. Check that the app is installed.',
-    pleaseCheckYourInternetConnection: 'Please check your Internet connection.',
-    invalidEmail: 'Invalid Email',
+    listErrorTitle: 'Failed to load data',
+    tryAgain: 'Try again',
+    thisFieldIsRequired: 'This field is required',
+    unknownErrorHasOccurred: 'An error occurred',
+    failedToOpenUrl: 'Failed to open URL',
+    pleaseCheckYourInternetConnection: 'Please check your internet connection',
+    invalidEmail: 'Invalid email',
     invalidPhoneNumber: 'Invalid phone number',
-    invalidFullName: 'Invalid full name',
+    invalidFullName: 'Invalid name',
     invalidFromDate: (fromField: string, toField: string) =>
-      `${fromField} can't be later than ${toField.toLowerCase()}`,
+      `${fromField} cannot be later than ${toField.toLowerCase()}`,
     invalidToDate: (fromField: string, toField: string) =>
-      `${toField} can't be earlier than ${fromField.toLowerCase()}`,
+      `${toField} cannot be earlier than ${fromField.toLowerCase()}`,
     datesCantBeEqual: (fromField: string, toField: string) =>
-      `${fromField} and ${toField.toLowerCase()} can't be equal`,
-    mobileDataIsTurnedOff: 'Mobile Data is Turned Off',
-    turnOnMobileData: 'Turn on mobile data or use Wi-Fi to access data.',
+      `${fromField} and ${toField.toLowerCase()} cannot be equal`,
+    mobileDataIsTurnedOff: 'Mobile data is turned off',
+    turnOnMobileData: 'Turn on mobile data or use Wi-Fi',
     error: 'Error',
   },
+  ar: {
+    listErrorTitle: 'فشل تحميل البيانات',
+    tryAgain: 'حاول مرة أخرى',
+    thisFieldIsRequired: 'هذا الحقل مطلوب',
+    unknownErrorHasOccurred: 'حدث خطأ',
+    failedToOpenUrl: 'فشل فتح الرابط',
+    pleaseCheckYourInternetConnection: 'يرجى التحقق من اتصال الإنترنت',
+    invalidEmail: 'بريد إلكتروني غير صالح',
+    invalidPhoneNumber: 'رقم هاتف غير صالح',
+    invalidFullName: 'اسم غير صالح',
+    invalidFromDate: (fromField: string, toField: string) =>
+      `${fromField} لا يمكن أن يكون بعد ${toField.toLowerCase()}`,
+    invalidToDate: (fromField: string, toField: string) =>
+      `${toField} لا يمكن أن يكون قبل ${fromField.toLowerCase()}`,
+    datesCantBeEqual: (fromField: string, toField: string) =>
+      `${fromField} و ${toField.toLowerCase()} لا يمكن أن يكونا متساويين`,
+    mobileDataIsTurnedOff: 'بيانات الجوال مغلقة',
+    turnOnMobileData: 'قم بتشغيل بيانات الجوال أو استخدم Wi-Fi',
+    error: 'خطأ',
+  },
 };