# General Translation React SDKs (gt-react, gt-next): Démarrage rapide React Native
URL: https://generaltranslation.com/fr/docs/react/react-native-quickstart.mdx
---

title: Démarrage rapide React Native
description: Ajoutez General Translation à une application React Native avec gt-react-native, pour Expo comme pour React Native CLI sans surcouche.
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/managing-locales
    - /docs/react/guides/formatting-variables

---

`gt-react-native` ajoute l’internationalisation automatique aux applications React Native. Vous initialisez General Translation au point d’entrée de votre application, ajoutez un plugin Babel pour les polyfills dont React Native a besoin, puis encapsulez votre application dans `GTProvider`.

Ce démarrage rapide couvre à la fois Expo et React Native CLI sans surcouche. Pour les applications React pour le Web, utilisez le [démarrage rapide React](/docs/react/react-quickstart).

<Callout type="warning">
  `gt-react-native` est expérimental et peut ne pas fonctionner pour tous les projets. Il inclut un module natif, donc **Expo Go n’est pas pris en charge** — vous avez besoin d’un build de développement.
</Callout>

## démarrage rapide [#quickstart]

Installez le package, créez un fichier de configuration, configurez les polyfills, ajoutez un loader de traduction, initialisez General Translation à l’aide du provider, marquez le contenu à traduire et générez les traductions.

### 1. Installez `gt-react-native`

Installez `gt-react-native` comme dépendance et la [CLI `gt`](/docs/cli/quickstart) comme dépendance de développement.

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install gt-react-native && npm install gt --save-dev
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-react-native && yarn add --dev gt
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-react-native && bun add --dev gt
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-react-native && pnpm add --save-dev gt
    ```
  </Tab>
</Tabs>

*Remarque : si vous utilisez React Native CLI en mode bare, exécutez `cd ios && pod install` après l’installation pour lier le module natif.*

### 2. Créer `gt.config.json`

Créez un fichier `gt.config.json` à la racine de votre projet. Il indique votre langue source, vos paramètres régionaux cibles et l’emplacement où seront enregistrés les fichiers de traduction.

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr", "ja"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

* `defaultLocale` — la langue dans laquelle votre application est rédigée.
* `locales` — les langues vers lesquelles traduire. Choisissez parmi les [langues prises en charge](/docs/platform/dashboard/reference/supported-locales).
* `files.gt.output` — l’emplacement où le CLI écrit les fichiers de traduction. `[locale]` est remplacé par chaque code de langue.

### 3. Configurer les polyfills

L&#39;environnement d&#39;exécution JavaScript de React Native n&#39;inclut pas les API `Intl` dont `gt-react-native` a besoin. Ajoutez le plugin Babel fourni en faisant pointer `entryPointFilePath` vers le fichier d&#39;entrée de votre application.

<Tabs items={['Expo', 'React Native CLI']}>
  <Tab value="Expo">
    ```js title="babel.config.js"
    const { plugin: gtPlugin } = require('gt-react-native/plugin');
    const gtConfig = require('./gt.config.json');

    module.exports = function (api) {
      api.cache(true);
      return {
        presets: ['babel-preset-expo'],
        plugins: [
          [
            gtPlugin,
            {
              locales: [gtConfig.defaultLocale, ...gtConfig.locales],
              entryPointFilePath: require.resolve('expo-router/entry'),
            },
          ],
        ],
      };
    };
    ```
  </Tab>

  <Tab value="React Native CLI">
    ```js title="babel.config.js"
    const path = require('path');
    const { plugin: gtPlugin } = require('gt-react-native/plugin');
    const gtConfig = require('./gt.config.json');

    module.exports = {
      presets: ['module:@react-native/babel-preset'],
      plugins: [
        [
          gtPlugin,
          {
            locales: [gtConfig.defaultLocale, ...gtConfig.locales],
            entryPointFilePath: path.resolve(__dirname, 'index.js'),
          },
        ],
      ],
    };
    ```
  </Tab>
</Tabs>

Le plugin est un **export nommé** ; vous devez donc le déstructurer : `const { plugin: gtPlugin } = require('gt-react-native/plugin')`. Il injecte les polyfills `@formatjs` requis en haut de votre fichier d&#39;entrée. Si cela ne fonctionne pas dans votre configuration, importez les polyfills manuellement — consultez la [documentation des polyfills de FormatJS](https://formatjs.github.io/docs/polyfills).

### 4. Créez un loader de traduction

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.

```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] ?? {};
}
```

Le CLI génère ces fichiers quand vous exécutez `npx gt translate`.

### 5. Initialisez General Translation et ajoutez le provider

Appelez [`initializeGT`](/docs/node/reference/functions/initialize-gt) une seule fois au point d&#39;entrée de votre application, avant le rendu, puis encapsulez votre application dans `GTProvider`. Contrairement aux packages web, `GTProvider` charge les traductions en interne : vous ne lui passez donc pas de prop `translations` et, en général, vous n&#39;avez pas non plus besoin de lui passer `locale` — il est détecté automatiquement. Une prop `locale` facultative reste acceptée si vous devez forcer la valeur détectée.

<Tabs items={['Expo', 'React Native CLI']}>
  <Tab value="Expo">
    ```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';

    // Initialisez 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,
    });

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

  <Tab value="React Native CLI">
    ```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';

    // Initialisez une seule fois, avant l'enregistrement de l'application
    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>

*Remarque : les options `projectId` et `devApiKey` activent la traduction à la demande pendant le développement. Dans Expo, exposez-les avec le préfixe `EXPO_PUBLIC_`.*

### 6. Marquer le contenu pour la traduction

Encapsulez le JSX dans le composant [`<T>`](/docs/react/reference/components/t) pour le traduire sur place. Pour les chaînes autonomes, comme les valeurs `placeholder` et `accessibilityLabel`, utilisez le hook [`useGT`](/docs/react/reference/hooks/use-gt). Pour créer un sélecteur de langue, utilisez le hook [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) — `gt-react-native` ne fournit pas de composant de sélection prêt à l’emploi.

```tsx title="src/Home.tsx"
import { Text, View, Pressable, TextInput } from 'react-native';
import { T, useGT, useLocaleSelector } from 'gt-react-native';

export default function Home() {
  const gt = useGT();
  const { locales, locale, setLocale } = useLocaleSelector();

  return (
    <View>
      <View style={{ flexDirection: 'row', gap: 8 }}>
        {locales.map((l) => (
          <Pressable key={l} onPress={() => setLocale(l)}>
            <Text style={{ fontWeight: l === locale ? 'bold' : 'normal' }}>
              {l}
            </Text>
          </Pressable>
        ))}
      </View>
      <T>
        <Text>Welcome to my app</Text>
      </T>
      <TextInput accessibilityLabel={gt('Email input field')} />
    </View>
  );
}
```

`useGT()` renvoie directement la fonction de traduction, appelez-la donc comme ceci : `const gt = useGT();`.

### 7. Générer les traductions

Exécutez le CLI pour traduire votre projet via l’API de General Translation.

```bash
npx gt translate
```

Ajoutez la commande à votre script de build afin que les builds de production disposent toujours de traductions à jour :

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && <your build command>"
  }
}
```

*Remarque : `npx gt translate` nécessite un identifiant de projet et une clé API de production, définis comme `GT_PROJECT_ID` et `GT_API_KEY` dans vos variables d’environnement. Exécutez `npx gt auth` ou rendez-vous sur le [Dashboard](/docs/platform/dashboard/get-started) pour les obtenir.*
## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales
- /docs/react/guides/formatting-variables