@croacroa/react-native-template 1.0.0 → 2.0.0

package/i18n/index.ts

@@ -1,77 +1,194 @@
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
-import * as Localization from "expo-localization";
-import { storage } from "@/services/storage";
-
-import en from "./locales/en.json";
-import fr from "./locales/fr.json";
-
-export const LANGUAGES = {
-  en: { name: "English", nativeName: "English" },
-  fr: { name: "French", nativeName: "Français" },
-} as const;
-
-export type LanguageCode = keyof typeof LANGUAGES;
-
-const LANGUAGE_STORAGE_KEY = "app_language";
-
-const resources = {
-  en: { translation: en },
-  fr: { translation: fr },
-};
-
-/**
- * Get the device's preferred language
- * Falls back to 'en' if not supported
- */
-function getDeviceLanguage(): LanguageCode {
-  const locale = Localization.getLocales()[0];
-  const languageCode = locale?.languageCode || "en";
-
-  // Check if we support this language
-  if (languageCode in LANGUAGES) {
-    return languageCode as LanguageCode;
-  }
-
-  return "en";
-}
-
-/**
- * Initialize i18n with the saved language or device language
- */
-export async function initI18n(): Promise<void> {
-  // Try to get saved language preference
-  const savedLanguage = await storage.get<LanguageCode>(LANGUAGE_STORAGE_KEY);
-  const initialLanguage = savedLanguage || getDeviceLanguage();
-
-  await i18n.use(initReactI18next).init({
-    resources,
-    lng: initialLanguage,
-    fallbackLng: "en",
-    compatibilityJSON: "v3",
-    interpolation: {
-      escapeValue: false, // React already escapes values
-    },
-    react: {
-      useSuspense: false, // Prevents issues with SSR/async loading
-    },
-  });
-}
-
-/**
- * Change the app language
- */
-export async function changeLanguage(language: LanguageCode): Promise<void> {
-  await i18n.changeLanguage(language);
-  await storage.set(LANGUAGE_STORAGE_KEY, language);
-}
-
-/**
- * Get current language
- */
-export function getCurrentLanguage(): LanguageCode {
-  return (i18n.language || "en") as LanguageCode;
-}
-
-export { i18n };
-export default i18n;
+/**
+ * @fileoverview Internationalization (i18n) setup with RTL support
+ * Provides multi-language support with automatic device language detection.
+ * @module i18n
+ */
+
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import * as Localization from "expo-localization";
+import { I18nManager } from "react-native";
+import { storage } from "@/services/storage";
+
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+import es from "./locales/es.json";
+import de from "./locales/de.json";
+import ar from "./locales/ar.json";
+
+/**
+ * Supported languages configuration.
+ * Each language includes its English name, native name, and RTL flag.
+ */
+export const LANGUAGES = {
+  en: { name: "English", nativeName: "English", rtl: false },
+  fr: { name: "French", nativeName: "Français", rtl: false },
+  es: { name: "Spanish", nativeName: "Español", rtl: false },
+  de: { name: "German", nativeName: "Deutsch", rtl: false },
+  ar: { name: "Arabic", nativeName: "العربية", rtl: true },
+} as const;
+
+export type LanguageCode = keyof typeof LANGUAGES;
+
+const LANGUAGE_STORAGE_KEY = "app_language";
+
+const resources = {
+  en: { translation: en },
+  fr: { translation: fr },
+  es: { translation: es },
+  de: { translation: de },
+  ar: { translation: ar },
+};
+
+/**
+ * Get the device's preferred language
+ * Falls back to 'en' if not supported
+ */
+function getDeviceLanguage(): LanguageCode {
+  const locale = Localization.getLocales()[0];
+  const languageCode = locale?.languageCode || "en";
+
+  // Check if we support this language
+  if (languageCode in LANGUAGES) {
+    return languageCode as LanguageCode;
+  }
+
+  return "en";
+}
+
+/**
+ * Initialize i18n with the saved language or device language
+ */
+export async function initI18n(): Promise<void> {
+  // Try to get saved language preference
+  const savedLanguage = await storage.get<LanguageCode>(LANGUAGE_STORAGE_KEY);
+  const initialLanguage = savedLanguage || getDeviceLanguage();
+
+  await i18n.use(initReactI18next).init({
+    resources,
+    lng: initialLanguage,
+    fallbackLng: "en",
+    compatibilityJSON: "v3",
+    interpolation: {
+      escapeValue: false, // React already escapes values
+    },
+    react: {
+      useSuspense: false, // Prevents issues with SSR/async loading
+    },
+  });
+}
+
+/**
+ * Change the app language and apply RTL settings if needed.
+ * Note: RTL changes require an app restart to take full effect.
+ *
+ * @param language - The language code to switch to
+ * @returns Promise that resolves when the language is changed
+ */
+export async function changeLanguage(language: LanguageCode): Promise<void> {
+  await i18n.changeLanguage(language);
+  await storage.set(LANGUAGE_STORAGE_KEY, language);
+
+  // Handle RTL layout direction
+  const isRTL = LANGUAGES[language].rtl;
+  if (I18nManager.isRTL !== isRTL) {
+    I18nManager.allowRTL(isRTL);
+    I18nManager.forceRTL(isRTL);
+    // Note: App restart is required for RTL changes to take full effect
+  }
+}
+
+/**
+ * Check if the current language is RTL
+ */
+export function isCurrentLanguageRTL(): boolean {
+  const currentLang = getCurrentLanguage();
+  return LANGUAGES[currentLang]?.rtl ?? false;
+}
+
+/**
+ * Get all available languages as an array for UI selectors
+ */
+export function getAvailableLanguages(): Array<{
+  code: LanguageCode;
+  name: string;
+  nativeName: string;
+  rtl: boolean;
+}> {
+  return Object.entries(LANGUAGES).map(([code, config]) => ({
+    code: code as LanguageCode,
+    ...config,
+  }));
+}
+
+/**
+ * Get current language
+ */
+export function getCurrentLanguage(): LanguageCode {
+  return (i18n.language || "en") as LanguageCode;
+}
+
+/**
+ * Hook-friendly RTL detection
+ * Returns current RTL state from I18nManager
+ */
+export function isRTL(): boolean {
+  return I18nManager.isRTL;
+}
+
+/**
+ * Get text alignment based on RTL
+ * Useful for styling text components
+ */
+export function getTextAlign(): "left" | "right" {
+  return I18nManager.isRTL ? "right" : "left";
+}
+
+/**
+ * Get flex direction based on RTL
+ * Useful for horizontal layouts
+ */
+export function getFlexDirection(): "row" | "row-reverse" {
+  return I18nManager.isRTL ? "row-reverse" : "row";
+}
+
+/**
+ * Get start/end values swapped for RTL
+ * Useful for margins, paddings, and positioning
+ */
+export function getStartEnd(): { start: "left" | "right"; end: "left" | "right" } {
+  return I18nManager.isRTL
+    ? { start: "right", end: "left" }
+    : { start: "left", end: "right" };
+}
+
+/**
+ * Transform a value for RTL (e.g., for translateX animations)
+ * @param value - The original value
+ * @returns The transformed value (negated for RTL)
+ */
+export function rtlTransform(value: number): number {
+  return I18nManager.isRTL ? -value : value;
+}
+
+/**
+ * Check if a specific language requires RTL
+ */
+export function isLanguageRTL(languageCode: string): boolean {
+  const lang = LANGUAGES[languageCode as LanguageCode];
+  return lang?.rtl ?? false;
+}
+
+/**
+ * Force app restart for RTL changes to take effect
+ * Call this after changing to/from an RTL language
+ */
+export async function applyRTLAndRestart(isRTL: boolean): Promise<void> {
+  I18nManager.allowRTL(isRTL);
+  I18nManager.forceRTL(isRTL);
+  // Note: In production, use expo-updates to reload the app
+  // await Updates.reloadAsync();
+}
+
+export { i18n };
+export default i18n;

package/i18n/locales/ar.json

@@ -0,0 +1,101 @@
+{
+  "common": {
+    "loading": "جاري التحميل...",
+    "error": "خطأ",
+    "success": "نجاح",
+    "cancel": "إلغاء",
+    "confirm": "تأكيد",
+    "save": "حفظ",
+    "delete": "حذف",
+    "edit": "تعديل",
+    "close": "إغلاق",
+    "back": "رجوع",
+    "next": "التالي",
+    "done": "تم",
+    "retry": "إعادة المحاولة",
+    "search": "بحث",
+    "noResults": "لم يتم العثور على نتائج",
+    "offline": "أنت غير متصل",
+    "online": "متصل مرة أخرى"
+  },
+  "auth": {
+    "signIn": "تسجيل الدخول",
+    "signUp": "إنشاء حساب",
+    "signOut": "تسجيل الخروج",
+    "email": "البريد الإلكتروني",
+    "password": "كلمة المرور",
+    "confirmPassword": "تأكيد كلمة المرور",
+    "name": "الاسم",
+    "forgotPassword": "نسيت كلمة المرور؟",
+    "resetPassword": "إعادة تعيين كلمة المرور",
+    "noAccount": "ليس لديك حساب؟",
+    "haveAccount": "لديك حساب بالفعل؟",
+    "welcomeBack": "مرحباً بعودتك!",
+    "signInToContinue": "سجل الدخول للمتابعة",
+    "createAccount": "إنشاء حساب",
+    "joinUs": "انضم إلينا اليوم",
+    "enterEmail": "أدخل بريدك الإلكتروني",
+    "enterPassword": "أدخل كلمة المرور",
+    "enterName": "أدخل اسمك",
+    "passwordHint": "8 أحرف على الأقل",
+    "invalidCredentials": "البريد الإلكتروني أو كلمة المرور غير صحيحة",
+    "accountCreated": "تم إنشاء الحساب بنجاح!",
+    "sessionExpired": "انتهت الجلسة. يرجى تسجيل الدخول مرة أخرى.",
+    "biometric": {
+      "title": "المصادقة البيومترية",
+      "prompt": "قم بالمصادقة للمتابعة",
+      "fallback": "استخدام رمز المرور",
+      "enabled": "تم تفعيل تسجيل الدخول البيومتري",
+      "disabled": "تم تعطيل تسجيل الدخول البيومتري",
+      "notAvailable": "المصادقة البيومترية غير متاحة"
+    }
+  },
+  "navigation": {
+    "home": "الرئيسية",
+    "profile": "الملف الشخصي",
+    "settings": "الإعدادات",
+    "notifications": "الإشعارات"
+  },
+  "profile": {
+    "title": "الملف الشخصي",
+    "editProfile": "تعديل الملف الشخصي",
+    "changePhoto": "تغيير الصورة",
+    "personalInfo": "المعلومات الشخصية",
+    "memberSince": "عضو منذ {{date}}"
+  },
+  "settings": {
+    "title": "الإعدادات",
+    "appearance": "المظهر",
+    "theme": "السمة",
+    "themeLight": "فاتح",
+    "themeDark": "داكن",
+    "themeSystem": "النظام",
+    "language": "اللغة",
+    "notifications": "الإشعارات",
+    "pushNotifications": "إشعارات الدفع",
+    "emailNotifications": "إشعارات البريد الإلكتروني",
+    "security": "الأمان",
+    "biometricAuth": "المصادقة البيومترية",
+    "changePassword": "تغيير كلمة المرور",
+    "privacy": "سياسة الخصوصية",
+    "terms": "شروط الخدمة",
+    "about": "حول",
+    "version": "الإصدار",
+    "deleteAccount": "حذف الحساب"
+  },
+  "errors": {
+    "generic": "حدث خطأ ما",
+    "network": "خطأ في الشبكة. يرجى التحقق من اتصالك.",
+    "timeout": "انتهت مهلة الطلب. يرجى المحاولة مرة أخرى.",
+    "unauthorized": "غير مصرح لك بتنفيذ هذا الإجراء.",
+    "notFound": "المورد غير موجود.",
+    "validation": "يرجى التحقق من المدخلات والمحاولة مرة أخرى."
+  },
+  "validation": {
+    "required": "هذا الحقل مطلوب",
+    "email": "يرجى إدخال بريد إلكتروني صالح",
+    "passwordMin": "يجب أن تكون كلمة المرور 8 أحرف على الأقل",
+    "passwordMatch": "كلمات المرور غير متطابقة",
+    "nameMin": "يجب أن يكون الاسم حرفين على الأقل"
+  }
+}

package/i18n/locales/de.json

@@ -0,0 +1,101 @@
+{
+  "common": {
+    "loading": "Wird geladen...",
+    "error": "Fehler",
+    "success": "Erfolg",
+    "cancel": "Abbrechen",
+    "confirm": "Bestätigen",
+    "save": "Speichern",
+    "delete": "Löschen",
+    "edit": "Bearbeiten",
+    "close": "Schließen",
+    "back": "Zurück",
+    "next": "Weiter",
+    "done": "Fertig",
+    "retry": "Erneut versuchen",
+    "search": "Suchen",
+    "noResults": "Keine Ergebnisse gefunden",
+    "offline": "Du bist offline",
+    "online": "Wieder online"
+  },
+  "auth": {
+    "signIn": "Anmelden",
+    "signUp": "Registrieren",
+    "signOut": "Abmelden",
+    "email": "E-Mail",
+    "password": "Passwort",
+    "confirmPassword": "Passwort bestätigen",
+    "name": "Name",
+    "forgotPassword": "Passwort vergessen?",
+    "resetPassword": "Passwort zurücksetzen",
+    "noAccount": "Noch kein Konto?",
+    "haveAccount": "Bereits ein Konto?",
+    "welcomeBack": "Willkommen zurück!",
+    "signInToContinue": "Melde dich an, um fortzufahren",
+    "createAccount": "Konto erstellen",
+    "joinUs": "Werde noch heute Mitglied",
+    "enterEmail": "E-Mail eingeben",
+    "enterPassword": "Passwort eingeben",
+    "enterName": "Name eingeben",
+    "passwordHint": "Mindestens 8 Zeichen",
+    "invalidCredentials": "Ungültige E-Mail oder Passwort",
+    "accountCreated": "Konto erfolgreich erstellt!",
+    "sessionExpired": "Sitzung abgelaufen. Bitte erneut anmelden.",
+    "biometric": {
+      "title": "Biometrische Authentifizierung",
+      "prompt": "Authentifiziere dich, um fortzufahren",
+      "fallback": "Code verwenden",
+      "enabled": "Biometrische Anmeldung aktiviert",
+      "disabled": "Biometrische Anmeldung deaktiviert",
+      "notAvailable": "Biometrische Authentifizierung nicht verfügbar"
+    }
+  },
+  "navigation": {
+    "home": "Startseite",
+    "profile": "Profil",
+    "settings": "Einstellungen",
+    "notifications": "Benachrichtigungen"
+  },
+  "profile": {
+    "title": "Profil",
+    "editProfile": "Profil bearbeiten",
+    "changePhoto": "Foto ändern",
+    "personalInfo": "Persönliche Informationen",
+    "memberSince": "Mitglied seit {{date}}"
+  },
+  "settings": {
+    "title": "Einstellungen",
+    "appearance": "Erscheinungsbild",
+    "theme": "Design",
+    "themeLight": "Hell",
+    "themeDark": "Dunkel",
+    "themeSystem": "System",
+    "language": "Sprache",
+    "notifications": "Benachrichtigungen",
+    "pushNotifications": "Push-Benachrichtigungen",
+    "emailNotifications": "E-Mail-Benachrichtigungen",
+    "security": "Sicherheit",
+    "biometricAuth": "Biometrische Authentifizierung",
+    "changePassword": "Passwort ändern",
+    "privacy": "Datenschutzrichtlinie",
+    "terms": "Nutzungsbedingungen",
+    "about": "Über",
+    "version": "Version",
+    "deleteAccount": "Konto löschen"
+  },
+  "errors": {
+    "generic": "Etwas ist schief gelaufen",
+    "network": "Netzwerkfehler. Bitte überprüfe deine Verbindung.",
+    "timeout": "Zeitüberschreitung. Bitte erneut versuchen.",
+    "unauthorized": "Du bist nicht berechtigt, diese Aktion auszuführen.",
+    "notFound": "Ressource nicht gefunden.",
+    "validation": "Bitte überprüfe deine Eingaben und versuche es erneut."
+  },
+  "validation": {
+    "required": "Dieses Feld ist erforderlich",
+    "email": "Bitte gib eine gültige E-Mail-Adresse ein",
+    "passwordMin": "Das Passwort muss mindestens 8 Zeichen lang sein",
+    "passwordMatch": "Passwörter stimmen nicht überein",
+    "nameMin": "Der Name muss mindestens 2 Zeichen lang sein"
+  }
+}