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

title: Plugin
description: Référence du plugin Babel gt-react-native de General Translation, qui injecte les polyfills Intl nécessaires à React Native. Référence API du plugin gt-react-native.

---

`gt-react-native/plugin` est un plugin Babel qui injecte les polyfills `@formatjs` `Intl` nécessaires à `gt-react-native`. Le runtime JavaScript de React Native n’embarque pas l’ensemble des API `Intl` utilisées pour formater les nombres, les dates, les pluriels et les noms de paramètres régionaux ; le plugin les ajoute donc au point d’entrée de votre application.

Configurez-le dans `babel.config.js`. Il fait partie du [setup](/docs/react/react-native/setup) standard de React Native ; cette page décrit son rôle et ses options.

## Vue d’ensemble [#overview]

Ajoutez le plugin à votre configuration Babel en faisant pointer `entryPointFilePath` vers le fichier d’entrée de votre application et en passant les locales à polyfiller. Le plugin est une **exportation nommée** ; déstructurez-le donc (`const { plugin } = require('gt-react-native/plugin')`) au lieu d’utiliser directement l’objet du module.

```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'),
        },
      ],
    ],
  };
};
```

## Fonctionnement [#how-it-works]

Au moment du build, lorsque Babel transforme le fichier situé à `entryPointFilePath`, le plugin ajoute en tête des instructions `import` pour :

* Les polyfills `@formatjs` de base — `getcanonicallocales`, `locale`, `displaynames`, `listformat`, `pluralrules`, `numberformat`, `relativetimeformat` et `datetimeformat` (avec tous les fuseaux horaires) — à l’exception de ceux listés dans `excludePolyfills`.
* Les données de locale pour chaque locale résolue, pour les polyfills `displaynames`, `listformat`, `pluralrules`, `numberformat`, `relativetimeformat` et `datetimeformat`.

Il modifie uniquement le fichier d’entrée et ignore tout import de polyfill déjà présent. Les locales sont résolues à partir de `locales`, ou de `config`/`configFilePath` si vous fournissez plutôt ceux-ci.

*Remarque : si le plugin ne fonctionne pas dans votre configuration, importez les polyfills manuellement en haut de votre fichier d’entrée. Consultez [la documentation des polyfills de FormatJS](https://formatjs.github.io/docs/polyfills).*

## Options [#options]

| Option                                         | Description                                                                | Type       | Facultatif | Par défaut      |
| ---------------------------------------------- | -------------------------------------------------------------------------- | ---------- | ---------- | --------------- |
| [`locales`](#locales)                          | Codes de langue pour lesquels charger les données de paramètre régional.   | `string[]` | Oui        | Depuis `config` |
| [`entryPointFilePath`](#entry-point-file-path) | Chemin du fichier d'entrée auquel les polyfills sont ajoutés.          | `string`   | Oui        | `src/App.tsx`   |
| [`config`](#config)                            | Objet de configuration General Translation depuis lequel lire les locales. | `object`   | Oui        | —               |
| [`configFilePath`](#config-file-path)          | Chemin vers un `gt.config.json` depuis lequel lire les locales.            | `string`   | Oui        | —               |
| [`excludePolyfills`](#exclude-polyfills)       | Polyfills de base à exclure.                                               | `string[]` | Oui        | `[]`            |

### `locales` [#locales]

**Type** `string[]` · **facultatif**

Les codes de langue pour lesquels charger les données de locales de `@formatjs`. Incluez votre locale par défaut et chaque locale cible, par exemple `[gtConfig.defaultLocale, ...gtConfig.locales]`. Lorsqu’elle est omise, la valeur de `locales` est déterminée à partir de `config` ou de `configFilePath`.

### `entryPointFilePath` [#entry-point-file-path]

**Type** `string` · **facultatif** · **Par défaut** `src/App.tsx`

Chemin absolu du fichier dans lequel sont injectés les imports du polyfill. Il doit s’agir du véritable point d’entrée de votre application. Les valeurs les plus courantes sont `require.resolve('expo-router/entry')` pour Expo et `path.resolve(__dirname, 'index.js')` pour le bare React Native CLI.

### `config` [#config]

**Type** `{ defaultLocale: string; locales: string[] } & Record<string, unknown>` · **Facultatif**

Un objet de configuration General Translation permettant de déterminer les locales, plutôt que de passer `locales` directement.

### `configFilePath` [#config-file-path]

**Type** `string` · **facultatif**

Chemin vers un fichier `gt.config.json` à partir duquel déterminer les locales, au lieu de passer `locales` ou `config`.

### `excludePolyfills` [#exclude-polyfills]

**Type** `string[]` · **facultatif** · **Par défaut** `[]`

Chemins d’import des polyfills de base à ignorer si vous en fournissez vous-même. Les valeurs doivent correspondre aux chemins d’import des polyfills de base du plugin, tels que `@formatjs/intl-datetimeformat/add-all-tz`.

## Exemple [#example]

Bare React Native CLI, avec `index.js` comme point d’entrée :

```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'),
      },
    ],
  ],
};
```