Commencer avec l'internationalisation (i18n) avec Intlayer et React Native

Qu'est-ce qu'Intlayer ?

Intlayer est une bibliothèque d'internationalisation (i18n) innovante et open-source qui simplifie la prise en charge multilingue dans les applications modernes. Elle fonctionne dans de nombreux environnements JavaScript/TypeScript, y compris React Native (via le package react-intlayer).

Avec Intlayer, vous pouvez :

• Gérer facilement les traductions en utilisant des dictionnaires déclaratifs au niveau des composants.
• Assurer la prise en charge de TypeScript avec des types générés automatiquement.
• Localiser dynamiquement le contenu, y compris les chaînes d'interface utilisateur (et dans React pour le web, elle peut également localiser les métadonnées HTML, etc.).
• Bénéficier de fonctionnalités avancées, comme la détection et le changement dynamiques de la langue.

Étape 1 : Installer les dépendances

Depuis votre projet React Native, installez les packages suivants :

npm install intlayer react-intlayer react-native-intlayer

Packages

• intlayer
  L'outil i18n principal pour la configuration, le contenu des dictionnaires, la génération de types et les commandes CLI.

• react-intlayer
  Intégration React qui fournit les fournisseurs de contexte et les hooks React que vous utiliserez dans React Native pour obtenir et changer les langues.

• react-native-intlayer
  Intégration React Native qui fournit le plugin Metro pour intégrer Intlayer avec le bundler React Native.

Étape 2 : Créer une configuration Intlayer

Dans la racine de votre projet (ou à tout endroit pratique), créez un fichier de configuration Intlayer. Il pourrait ressembler à ceci :

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // ... Ajoutez toutes les autres langues nécessaires    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

Dans cette configuration, vous pouvez :

• Configurer votre liste de langues prises en charge.
• Définir une langue par défaut.
• Plus tard, vous pourrez ajouter des options avancées (par exemple, journaux, répertoires de contenu personnalisés, etc.).
• Consultez la documentation de configuration Intlayer pour plus d'informations.

Étape 3 : Ajouter le plugin Metro

Metro est un bundler pour React Native. C'est le bundler par défaut pour les projets React Native créés avec la commande react-native init. Pour utiliser Intlayer avec Metro, vous devez ajouter le plugin à votre fichier metro.config.js :

const { getDefaultConfig } = require("expo/metro-config");const { configMetroIntlayer } = require("react-native-intlayer/metro");module.exports = (async () => {  const defaultConfig = getDefaultConfig(__dirname);  return await configMetroIntlayer(defaultConfig);})();

Étape 4 : Ajouter le fournisseur Intlayer

Pour synchroniser la langue de l'utilisateur dans votre application, vous devez envelopper votre composant racine avec le composant IntlayerProvider de react-intlayer.

Enveloppez votre composant racine ou de niveau supérieur avec IntlayerProvider de react-intlayer.

De plus, vous devez ajouter la fonction intlayerPolyfill à votre fichier index.js pour garantir qu'Intlayer fonctionne correctement.

import { Stack } from "expo-router";import { getLocales } from "expo-localization";import { IntlayerProviderContent } from "react-intlayer";import { intlayerPolyfill } from "react-native-intlayer";import { type FC } from "react";intlayerPolyfill();const getDeviceLocale = () => getLocales()[0]?.languageTag;const RootLayout: FC = () => {  return (    <IntlayerProviderContent locale={getDeviceLocale()}>      <Stack>        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />      </Stack>    </IntlayerProviderContent>  );};export default RootLayout;

Étape 5 : Déclarer votre contenu

Créez des fichiers de déclaration de contenu n'importe où dans votre projet (généralement dans src/), en utilisant l'un des formats d'extension pris en charge par Intlayer :

• .content.ts
• .content.mjs
• .content.cjs
• .content.json
• etc.

Exemple (TypeScript avec des nœuds TSX pour React Native) :

import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";/** * Dictionnaire de contenu pour notre domaine "app" */import { t, type Dictionary } from "intlayer";const homeScreenContent = {  key: "home-screen",  content: {    title: t({      fr: "Bienvenue!",      en: "Welcome!",      es: "¡Bienvenido!",    }),  },} satisfies Dictionary;export default homeScreenContent;

Pour plus de détails sur les déclarations de contenu, consultez la documentation sur le contenu d'Intlayer.

Étape 4 : Utiliser Intlayer dans vos composants

Enveloppez votre composant racine ou de niveau supérieur avec IntlayerProvider de react-intlayer. Ensuite, utilisez le hook useIntlayer dans les composants enfants pour obtenir le contenu localisé.

Exemple

import { Image, StyleSheet, Platform } from "react-native";import { useIntlayer } from "react-intlayer";import { HelloWave } from "@/components/HelloWave";import ParallaxScrollView from "@/components/ParallaxScrollView";import { ThemedText } from "@/components/ThemedText";import { ThemedView } from "@/components/ThemedView";import { type FC } from "react";const HomeScreen = (): FC => {  const { title, steps } = useIntlayer("home-screen");  return (    <ParallaxScrollView      headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}      headerImage={        <Image          source={require("@/assets/images/partial-react-logo.png")}          style={styles.reactLogo}        />      }    >      <ThemedView style={styles.titleContainer}>        <ThemedText type="title">{title}</ThemedText>        <HelloWave />      </ThemedView>    </ParallaxScrollView>  );};const styles = StyleSheet.create({  titleContainer: {    flexDirection: "row",    alignItems: "center",    gap: 8,  },});export default HomeScreen;

Lorsque vous utilisez content.someKey dans des props basées sur des chaînes (par exemple, le title d'un bouton ou les children d'un composant Text), appelez content.someKey.value pour obtenir la chaîne réelle.

(Optionnel) Étape 5 : Changer la langue de l'application

Pour changer de langue depuis vos composants, vous pouvez utiliser la méthode setLocale du hook useLocale :

import { type FC } from "react";import { Button } from "react-native";import { Locales } from "intlayer";import { useLocale } from "react-intlayer";export const LocaleSwitcher: FC = () => {  const { setLocale } = useLocale();  return (    <Button      title="Passer au français"      onPress={() => {        setLocale(Locales.FRENCH);      }}    />  );};

Cela déclenche un nouveau rendu de tous les composants utilisant le contenu d'Intlayer, affichant désormais les traductions pour la nouvelle langue.

Consultez la documentation de useLocale pour plus de détails.

Configurer TypeScript (si vous utilisez TypeScript)

Intlayer génère des définitions de types dans un dossier caché (par défaut .intlayer) pour améliorer l'autocomplétion et détecter les erreurs de traduction :

// tsconfig.json{  // ... votre configuration TS existante  "include": [    "src", // votre code source    ".intlayer", // <-- assurez-vous que les types générés automatiquement sont inclus    // ... tout autre élément que vous incluez déjà  ],}

Cela permet des fonctionnalités comme :

• Autocomplétion pour vos clés de dictionnaire.
• Vérification des types qui avertit si vous accédez à une clé inexistante ou si vous faites une erreur de type.

Configuration Git

Pour éviter de commettre les fichiers générés automatiquement par Intlayer, ajoutez ce qui suit à votre .gitignore :

# Ignorer les fichiers générés par Intlayer.intlayer

Aller plus loin

• Éditeur visuel : Utilisez l'Éditeur Visuel Intlayer pour gérer les traductions visuellement.
• Intégration CMS : Vous pouvez également externaliser et récupérer votre contenu de dictionnaire depuis un CMS.
• Commandes CLI : Explorez le CLI Intlayer pour des tâches comme extraire des traductions ou vérifier les clés manquantes.

Amusez-vous à construire vos applications React Native avec une i18n pleinement optimisée grâce à Intlayer !