# General Translation React SDKs (gt-react, gt-next, gt-react-native): Plugin
URL: https://generaltranslation.com/fr/docs/react/react-native/plugin.mdx
Docs index: https://generaltranslation.com/llms.txt
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]

Lors du build, lorsque Babel transforme le fichier à l’emplacement `entryPointFilePath`, le plugin ajoute en tête du fichier 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 paramètres régionaux pour chaque paramètre régional résolu, pour les polyfills `displaynames`, `listformat`, `pluralrules`, `numberformat`, `relativetimeformat` et `datetimeformat`.

Il ne modifie que le fichier d’entrée et ignore les imports de polyfills déjà présents. Les paramètres régionaux sont résolus à partir de `locales`, ou de `config`/`configFilePath` si vous fournissez ces options à la place.

<Callout type="warn">
  **Paramètres régionaux avec code régional :** le plugin utilise chaque code de langue configuré tel quel
  pour chaque import de données de paramètre régional. FormatJS ne fournit pas tous les codes régionaux
  pour chaque polyfill ; par exemple, `Intl.PluralRules` fournit `es`, mais pas de module
  `es-US`. Si un import généré est manquant, ajoutez manuellement les polyfills
  ci-dessous afin que chaque import puisse utiliser un code de données de paramètre régional disponible, tout en conservant le paramètre régional de votre application.
</Callout>

<Accordions>
  <Accordion title="Ajouter les polyfills manuellement">
    Si vous ne souhaitez pas utiliser le plugin Babel, installez directement les paquets FormatJS dans votre application :

    <Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
      <Tab value="npm">
        ```bash
        npm install @formatjs/intl-getcanonicallocales @formatjs/intl-locale @formatjs/intl-displaynames @formatjs/intl-listformat @formatjs/intl-pluralrules @formatjs/intl-numberformat @formatjs/intl-relativetimeformat @formatjs/intl-datetimeformat
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn add @formatjs/intl-getcanonicallocales @formatjs/intl-locale @formatjs/intl-displaynames @formatjs/intl-listformat @formatjs/intl-pluralrules @formatjs/intl-numberformat @formatjs/intl-relativetimeformat @formatjs/intl-datetimeformat
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bun add @formatjs/intl-getcanonicallocales @formatjs/intl-locale @formatjs/intl-displaynames @formatjs/intl-listformat @formatjs/intl-pluralrules @formatjs/intl-numberformat @formatjs/intl-relativetimeformat @formatjs/intl-datetimeformat
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm add @formatjs/intl-getcanonicallocales @formatjs/intl-locale @formatjs/intl-displaynames @formatjs/intl-listformat @formatjs/intl-pluralrules @formatjs/intl-numberformat @formatjs/intl-relativetimeformat @formatjs/intl-datetimeformat
        ```
      </Tab>
    </Tabs>

    Ajoutez les polyfills de base et les données de paramètres régionaux en haut de votre fichier d’entrée, avant d’importer votre application. Cet exemple charge `en` et `es-US` :

    ```js title="index.js"
    // Polyfills Intl de base
    import '@formatjs/intl-getcanonicallocales/polyfill';
    import '@formatjs/intl-locale/polyfill';
    import '@formatjs/intl-displaynames/polyfill';
    import '@formatjs/intl-listformat/polyfill';
    import '@formatjs/intl-pluralrules/polyfill-force';
    import '@formatjs/intl-numberformat/polyfill';
    import '@formatjs/intl-relativetimeformat/polyfill';
    import '@formatjs/intl-datetimeformat/polyfill';
    import '@formatjs/intl-datetimeformat/add-all-tz';

    // Données pour le paramètre régional anglais
    import '@formatjs/intl-displaynames/locale-data/en';
    import '@formatjs/intl-listformat/locale-data/en';
    import '@formatjs/intl-pluralrules/locale-data/en';
    import '@formatjs/intl-numberformat/locale-data/en';
    import '@formatjs/intl-relativetimeformat/locale-data/en';
    import '@formatjs/intl-datetimeformat/locale-data/en';

    // Données pour le paramètre régional espagnol des États-Unis
    import '@formatjs/intl-displaynames/locale-data/es-US';
    import '@formatjs/intl-listformat/locale-data/es-US';
    import '@formatjs/intl-pluralrules/locale-data/es';
    import '@formatjs/intl-numberformat/locale-data/es-US';
    import '@formatjs/intl-relativetimeformat/locale-data/es-US';
    import '@formatjs/intl-datetimeformat/locale-data/es-US';
    ```

    Conservez `es-US` comme paramètre régional de votre application. Utilisez `es` uniquement pour l’import des données `PluralRules`, car `@formatjs/intl-pluralrules` ne fournit pas de module de données de paramètres régionaux `es-US`. Consultez la [documentation sur les polyfills de FormatJS](https://formatjs.github.io/docs/polyfills) pour connaître les autres paramètres régionaux et polyfills.
  </Accordion>
</Accordions>

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

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.