Fonctionnalités de l'app

Application multilingue

Le dossier `languageConfig` aide votre app Expo ou React Native CLI à parler plusieurs langues. Il s’appuie sur i18next, inclut 25 fichiers de langue, part de la langue du téléphone et permet de changer langue et mise en page droite‑à‑gauche (RTL) simplement. Avec Expo Router vous le branchez dans `app/_layout.tsx`. Avec React Native CLI vous ne modifiez en général que le câblage de localisation dans votre `App.tsx` racine—navigation et écrans peuvent rester tels quels. Téléchargez le ZIP, décompressez-le à côté de votre code (par ex. dans `src/`), puis suivez les étapes ci-dessous.

Vidéo de démonstration

Court enregistrement d’écran du starter langues dans l’app : changement de langue, mise en page RTL et chaînes traduites.

Téléchargement

Le ZIP contient le dossier `languageConfig` complet. Sur Mac un dossier `__MACOSX` peut apparaître : vous pouvez l’ignorer. À la fin vous devez avoir un dossier principal nommé `languageConfig`.

Arborescence

languageConfig/
├── config.ts
├── languages.ts
├── context/
│   └── LanguageContext.tsx
├── i18n/
│   └── index.ts
└── locales/
    ├── ar.json … zh.json (25 languages)

À quoi sert chaque fichier

• config.ts Retransmet les helpers de `languages.ts`. Vous pouvez importer depuis `config` ou `languages`, comme vous préférez.
• languages.ts Liste les langues prises en charge, indique lesquelles sont en RTL, et fournit des données pour un sélecteur (drapeau, nom natif, nom en anglais).
• i18n/index.ts Configure i18next : charge chaque JSON, commence avec la langue de l’appareil, retombe sur l’anglais et branche `react-i18next` pour React Native.
• context/LanguageContext.tsx Fournit `LanguageProvider` : partage la langue courante et le RTL, enregistre le choix de l’utilisateur et expose `setLanguage` pour changer. Il attend vos fonctions de stockage—adaptez le chemin d’import si besoin.
• locales/*.json Un fichier JSON par langue. Chaque clé est un identifiant de texte pour l’interface. i18next les charge sous le namespace `translation`.

Dépendances

Installez ces paquets dans votre projet Expo ou React Native CLI s’ils ne sont pas déjà là :

• i18next
• react-i18next
• expo-localization

Branchez-le en quelques étapes

1. Copiez ou décompressez `languageConfig` dans votre projet (par ex. `src/languageConfig`).
2. Installez : `i18next`, `react-i18next` et `expo-localization`.
3. Enveloppez la racine (layout ou `App`) avec `LanguageProvider` depuis `languageConfig/context/LanguageContext.tsx`.
4. Dans vos écrans, utilisez `useTranslation()` de `react-i18next` et les clés de vos JSON.

Exemple : brancher votre fichier racine

Gardez `languageConfig` à côté du fichier principal de l’app—par ex. `src/languageConfig` à côté de `src/app/_layout.tsx` (Expo Router) ou `src/App.tsx` (CLI). Si vos dossiers diffèrent, changez les imports.

Si vous utilisez des raccourcis comme `@/languageConfig/...`, préférez-les à `../languageConfig` ou `./languageConfig`.

Expo Router — `app/_layout.tsx`

Importez le fichier i18n une fois, enveloppez tout avec `LanguageProvider` et utilisez `useAppLanguage` pour que la `View` racine passe en RTL si besoin. Laissez `LanguageProvider` en dehors du `Stack` pour un état de langue partagé.

import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import 'react-native-reanimated';
import { LanguageProvider, useAppLanguage } from '../languageConfig/context/LanguageContext';
import '../languageConfig/i18n';

function RootLayoutContent() {
  const { isRtl } = useAppLanguage();

  return (
    <View style={[styles.root, isRtl && { direction: 'rtl' }]}>
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
      <StatusBar style="auto" />
    </View>
  );
}

export default function RootLayout() {
  return (
    <LanguageProvider>
      <RootLayoutContent />
    </LanguageProvider>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
});

React Native CLI — `App.tsx`

En React Native CLI, vous changez surtout la partie localisation du fichier racine—mêmes étapes ci-dessous (import i18n une fois, `LanguageProvider`, `useAppLanguage` dans un composant interne). Le reste de l’app peut rester inchangé. Remplacez le `NavigationContainer` d’exemple par votre vrai navigateur.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { LanguageProvider, useAppLanguage } from './languageConfig/context/LanguageContext';
import './languageConfig/i18n';
// import your root navigator

function AppShell() {
  const { isRtl } = useAppLanguage();

  return (
    <View style={[styles.root, isRtl && { direction: 'rtl' }]}>
      <NavigationContainer>{/* <RootNavigator /> */}</NavigationContainer>
    </View>
  );
}

export default function App() {
  return (
    <LanguageProvider>
      <AppShell />
    </LanguageProvider>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
});

Rappel simple : votre fichier racine

Voici le même schéma que les exemples plus haut, avec des mots simples. Expo Router et la CLI React Native n’ont pas les mêmes chemins d’import, mais les étapes restent les mêmes. En CLI, vous ne modifiez en pratique que ce bloc de localisation dans le fichier racine.

• Importez `languageConfig/i18n` une seule fois en haut du fichier racine. Ce fichier démarre i18next, charge tous les JSON, lit la langue de l’appareil avec expo-localization et utilise l’anglais si une traduction manque.
• Enveloppez toute l’app avec `LanguageProvider` depuis `languageConfig/context/LanguageContext.tsx`. Placez-le au-dessus du navigateur (`Stack`, `NavigationContainer`, etc.) pour que tous les écrans partagent la langue et le choix enregistré.
• Dans un composant enfant, appelez `useAppLanguage()` et mettez la `View` racine en `direction: 'rtl'` pour les langues RTL (par ex. l’arabe). Vous le faites une seule fois, pas sur chaque écran.
• Dans les écrans normaux, utilisez `useTranslation()` de `react-i18next` pour les textes. Le fichier racine ne fait qu’initialiser i18n, le provider et la direction globale.