# General Translation React SDKs (gt-react, gt-next): Configurer React Native
URL: https://generaltranslation.com/fr/docs/react/react-native/setup.mdx
---

title: Configurer React Native
description: Initialisez General Translation dans une application React Native, ajoutez le provider et chargez les traductions, pour Expo comme pour le CLI React Native bare.

---

`gt-react-native` s’initialise au point d’entrée de votre application : appelez [`initializeGT`](/docs/node/reference/functions/initialize-gt) une seule fois au niveau du module, puis encapsulez votre application dans [`<GTProvider>`](/docs/react/reference/components/gt-provider). Contrairement aux packages web, le provider charge lui-même les traductions ; vous ne lui passez donc pas de prop `translations`, et il détermine le `locale` à partir de l’appareil par défaut.

Cette page couvre les aspects de configuration propres à React Native. Pour suivre le parcours complet étape par étape, y compris l’installation et la CLI, consultez le [React Native Quickstart](/docs/react/react-native-quickstart). Pour le plugin de polyfill dont cette configuration dépend, voir [Plugin](/docs/react/react-native/plugin).

*Avertissement : `gt-react-native` embarque un module natif, donc Expo Go n’est pas compatible — exécutez un build de développement (`npx expo run:ios` / `run:android`). Avec le CLI React Native bare, exécutez `cd ios && pod install` après l’installation.*

## Initialiser General Translation [#initialize]

Appelez `initializeGT` une seule fois, au niveau du module de votre fichier d’entrée, avant le rendu de votre application. Incluez votre `gt.config.json` avec l’opérateur spread et transmettez une fonction [`loadTranslations`](/docs/react/reference/functions/load-translations). Ajoutez `projectId` et `devApiKey` pour activer la traduction à la demande pendant le développement.

```tsx
import { initializeGT } from 'gt-react-native';
import gtConfig from './gt.config.json';
import { loadTranslations } from './loadTranslations';

// Initialiser une seule fois, au niveau du module
initializeGT({
  ...gtConfig,
  loadTranslations,
  projectId: process.env.EXPO_PUBLIC_GT_PROJECT_ID,
  devApiKey: process.env.EXPO_PUBLIC_GT_DEV_API_KEY,
});
```

`initializeGT` accepte les mêmes options de paramètre régional et de livraison que les autres frameworks — consultez la [référence de configuration](/docs/react/reference/config#initialization). `gt.config.json` n’est pas lu automatiquement ; importez-le, puis utilisez l’opérateur de décomposition dans l’appel.

*Remarque : dans Expo, les variables d’environnement publiques doivent être préfixées par `EXPO_PUBLIC_`. N’exposez jamais une clé API de production dans le bundle de votre application.*

## Ajouter le provider [#provider]

Enveloppez votre application dans `<GTProvider>`. Dans React Native, le provider charge en interne les traductions du paramètre régional actif et gère l’état du paramètre régional. Il ne nécessite donc pas de prop `translations` et utilise par défaut le `locale` de l’appareil (vous pouvez tout de même fournir une valeur `locale` facultative pour la remplacer — voir ci-dessous). Il affiche un contenu de secours pendant le chargement des traductions ; passez une prop `fallback` pour le personnaliser.

```tsx title="App.tsx"
import { GTProvider } from 'gt-react-native';
import Home from './src/Home';

export default function App() {
  return (
    <GTProvider>
      <Home />
    </GTProvider>
  );
}
```

Le provider accepte également les props facultatives `locale`, `region` et `enableI18n` pour remplacer les valeurs qu’il déterminerait autrement d’après l’appareil.

## Charger les traductions [#load-translations]

Metro, le bundler de React Native, ne prend pas en charge les imports dynamiques. Associez donc chaque paramètre régional à son fichier de traduction à l’aide d’appels `require` statiques. Le CLI génère ces fichiers lorsque vous exécutez `npx gt translate`.

```ts title="loadTranslations.ts"
const translations: Record<string, unknown> = {
  es: require('./src/_gt/es.json'),
  fr: require('./src/_gt/fr.json'),
  ja: require('./src/_gt/ja.json'),
};

export function loadTranslations(locale: string) {
  return translations[locale] ?? {};
}
```

## Points d’entrée [#entry-points]

L’endroit où vous appelez `initializeGT` dépend du type de projet.

<Tabs items={['Expo', 'React Native CLI']}>
  <Tab value="Expo">
    Initialisez-le dans votre root layout, au niveau du module, puis affichez le provider.

    ```tsx title="app/_layout.tsx"
    import { Slot } from 'expo-router';
    import { GTProvider, initializeGT } from 'gt-react-native';
    import gtConfig from '../gt.config.json';
    import { loadTranslations } from '../loadTranslations';

    initializeGT({
      ...gtConfig,
      loadTranslations,
      projectId: process.env.EXPO_PUBLIC_GT_PROJECT_ID,
      devApiKey: process.env.EXPO_PUBLIC_GT_DEV_API_KEY,
    });

    export default function RootLayout() {
      return (
        <GTProvider>
          <Slot />
        </GTProvider>
      );
    }
    ```
  </Tab>

  <Tab value="React Native CLI">
    Initialisez-le dans `index.js`, avant l’enregistrement de l’application, puis ajoutez le provider dans `App.tsx`.

    ```js title="index.js"
    import { AppRegistry } from 'react-native';
    import { initializeGT } from 'gt-react-native';
    import App from './App';
    import { name as appName } from './app.json';
    import gtConfig from './gt.config.json';
    import { loadTranslations } from './loadTranslations';

    initializeGT({ ...gtConfig, loadTranslations });

    AppRegistry.registerComponent(appName, () => App);
    ```

    ```tsx title="App.tsx"
    import { GTProvider } from 'gt-react-native';
    import Home from './src/Home';

    export default function App() {
      return (
        <GTProvider>
          <Home />
        </GTProvider>
      );
    }
    ```
  </Tab>
</Tabs>

Dans les deux cas, vous devez aussi configurer le [plugin de polyfill](/docs/react/react-native/plugin) dans `babel.config.js`, sinon les API `Intl` dont dépend `gt-react-native` seront absentes.