دليل React Native للعربية (1): إعداد i18next و I18nManager

لماذا i18next؟

تعتبر مكتبة react-i18next المعيار الذهبي في عالم React. سنقوم بدمجها مع I18nManager الخاص بـ React Native لقلب الاتجاه.

التثبيت

npm install i18next react-i18next intl-pluralrules

التكوين الأساسي (i18n.js)

أنشئ ملفاً جديداً لتهيئة اللغات:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import ar from "./locales/ar.json";
import en from "./locales/en.json";

i18n.use(initReactI18next).init({
  compatibilityJSON: 'v3',
  resources: {
    en: { translation: en },
    ar: { translation: ar },
  },
  lng: "ar", // اللغة الافتراضية
  fallbackLng: "en",
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

تفعيل RTL

في ملف App.js أو عند تغيير اللغة، يجب التأكد من حالة I18nManager:

import { I18nManager } from 'react-native';
import i18n from './i18n';

const changeLanguage = (lang) => {
  i18n.changeLanguage(lang);
  const isRTL = lang === 'ar';
  
  if (isRTL !== I18nManager.isRTL) {
    I18nManager.allowRTL(isRTL);
    I18nManager.forceRTL(isRTL);
    // ملاحظة: قد تحتاج لإعادة تشغيل التطبيق (Reload) لتطبيق التغييرات بشكل كامل
  }
};