Comment localiser une application React Native

{
  "dependencies": {
    "i18next": "^24.2.0",
    "react-i18next": "^15.4.0",
    "react-native-localize": "^3.3.0"
  }
}

{
  "common": {
    "save": "Save",
    "cancel": "Cancel",
    "delete": "Delete"
  },
  "home": {
    "title": "Welcome",
    "subtitle": "Start building something great",
    "itemCount_one": "{{count}} item",
    "itemCount_other": "{{count}} items"
  },
  "settings": {
    "title": "Settings",
    "language": "Language",
    "notifications": "Notifications"
  }
}

{
  "common": {
    "save": "Enregistrer",
    "cancel": "Annuler",
    "delete": "Supprimer"
  },
  "home": {
    "title": "Bienvenue",
    "subtitle": "Commencez a construire quelque chose de genial",
    "itemCount_one": "{{count}} element",
    "itemCount_other": "{{count}} elements"
  },
  "settings": {
    "title": "Parametres",
    "language": "Langue",
    "notifications": "Notifications"
  }
}

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';

import en from '../locales/en.json';
import fr from '../locales/fr.json';

const deviceLanguage = RNLocalize.getLocales()[0]?.languageCode ?? 'en';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      fr: { translation: fr },
    },
    lng: deviceLanguage,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // React Native already handles escaping
    },
    defaultNS: 'translation',
  });

export default i18n;

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useTranslation } from 'react-i18next';

export function HomeScreen() {
  const { t } = useTranslation();
  const itemCount = 3;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{t('home.title')}</Text>
      <Text style={styles.subtitle}>{t('home.subtitle')}</Text>
      <Text>{t('home.itemCount', { count: itemCount })}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  title: { fontSize: 28, fontWeight: 'bold' },
  subtitle: { fontSize: 16, color: '#666', marginTop: 4 },
});

import * as RNLocalize from 'react-native-localize';
import { useEffect } from 'react';
import i18n from './i18n';

export function useDeviceLocaleSync() {
  useEffect(() => {
    const onChange = () => {
      const bestLang = RNLocalize.findBestLanguageTag(
        Object.keys(i18n.options.resources ?? {})
      );
      if (bestLang?.languageTag) {
        i18n.changeLanguage(bestLang.languageTag);
      }
    };

    // Listen for language changes (user changes device language while app is open)
    RNLocalize.addEventListener('change', onChange);
    return () => {
      RNLocalize.removeEventListener('change', onChange);
    };
  }, []);
}

import { I18nManager } from 'react-native';
import * as RNLocalize from 'react-native-localize';
import RNRestart from 'react-native-restart'; // optional, for hot restart

const RTL_LANGUAGES = ['ar', 'he', 'fa', 'ur'];

export function configureRTL() {
  const locale = RNLocalize.getLocales()[0];
  const shouldBeRTL = RTL_LANGUAGES.includes(locale?.languageCode ?? '');

  if (I18nManager.isRTL !== shouldBeRTL) {
    I18nManager.forceRTL(shouldBeRTL);
    I18nManager.allowRTL(shouldBeRTL);

    // Restart required for layout direction change to take effect
    // RNRestart.restart(); // Uncomment if using react-native-restart
  }
}