# General Translation React SDKs (gt-react, gt-next, gt-react-native): Plugin
URL: https://generaltranslation.com/es/docs/react/react-native/plugin.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Referencia del plugin de Babel `gt-react-native` de General Translation, que inyecta los polyfills de `Intl` que necesita React Native. Referencia de la API del plugin `gt-react-native`.

`gt-react-native/plugin` es un plugin de Babel que inyecta los polyfills de `@formatjs` para `Intl` que necesita `gt-react-native`. El entorno de ejecución de JavaScript de React Native no incluye todas las API de `Intl` que se usan para dar formato a números, fechas, plurales y nombres de configuraciones regionales, por lo que el plugin las agrega en el punto de entrada de tu aplicación.

Configúralo en `babel.config.js`. Forma parte del [setup](/docs/react/react-native/setup) estándar de React Native; esta página documenta qué hace y cuáles son sus opciones.

## Resumen general [#overview]

Agrega el plugin a tu configuración de Babel, haciendo que `entryPointFilePath` apunte al archivo de entrada de tu app y pasando las configuraciones regionales a las que se les aplicará el polyfill. El plugin es una **exportación con nombre**, así que desestrúcturalo (`const { plugin } = require('gt-react-native/plugin')`) en lugar de usar directamente el objeto del módulo.

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

## Cómo funciona [#how-it-works]

Durante la compilación, cuando Babel transforma el archivo indicado en `entryPointFilePath`, el plugin antepone instrucciones `import` para:

* Los polyfills base de `@formatjs`: `getcanonicallocales`, `locale`, `displaynames`, `listformat`, `pluralrules`, `numberformat`, `relativetimeformat` y `datetimeformat` (con todas las zonas horarias), excepto los incluidos en `excludePolyfills`.
* Los datos de configuración regional de cada configuración regional resuelta para los polyfills `displaynames`, `listformat`, `pluralrules`, `numberformat`, `relativetimeformat` y `datetimeformat`.

Solo modifica el archivo de entrada y omite cualquier importación de polyfill que ya tengas. Las configuraciones regionales se resuelven a partir de `locales` o, si proporcionas estos parámetros, de `config`/`configFilePath`.

<Callout type="warn">
  **Configuraciones regionales regionales:** El plugin usa cada código de configuración regional configurado sin cambios
  para cada importación de datos de configuración regional. FormatJS no proporciona todos los códigos regionales
  para cada polyfill; por ejemplo, `Intl.PluralRules` proporciona `es`, pero no un
  módulo `es-US`. Si falta una importación generada, añade los polyfills manualmente
  a continuación para que cada importación pueda usar un código de datos de configuración regional disponible mientras tu aplicación
  conserva su configuración regional.
</Callout>

<Accordions>
  <Accordion title="Añadir los polyfills manualmente">
    Si no quieres usar el plugin de Babel, instala los paquetes de FormatJS directamente en tu aplicación:

    <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>

    Añade los polyfills base y los datos de configuración regional al principio de tu archivo de entrada, antes de importar la aplicación. Este ejemplo carga `en` y `es-US`:

    ```js title="index.js"
    // Polyfills base de Intl
    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';

    // Datos de configuración regional para inglés
    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';

    // Datos de configuración regional para español de Estados Unidos
    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';
    ```

    Mantén `es-US` como la configuración regional de tu aplicación. Usa `es` solo para importar los datos de `PluralRules`, ya que `@formatjs/intl-pluralrules` no incluye un módulo de datos de configuración regional para `es-US`. Consulta la [documentación sobre polyfills de FormatJS](https://formatjs.github.io/docs/polyfills) para ver otras configuraciones regionales y polyfills.
  </Accordion>
</Accordions>

## Opciones [#options]

| Opción                                         | Descripción                                                                                    | Tipo       | Opcional | Predeterminado |
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------- | -------- | -------------- |
| [`locales`](#locales)                          | Códigos de configuración regional cuyos datos se cargarán.                                     | `string[]` | Sí       | De `config`    |
| [`entryPointFilePath`](#entry-point-file-path) | Ruta del archivo de entrada al que se agregan los polyfills.                                   | `string`   | Sí       | `src/App.tsx`  |
| [`config`](#config)                            | Objeto de configuración de General Translation del que se leen las configuraciones regionales. | `object`   | Sí       | —              |
| [`configFilePath`](#config-file-path)          | Ruta a un `gt.config.json` del que se leen las configuraciones regionales.                     | `string`   | Sí       | —              |
| [`excludePolyfills`](#exclude-polyfills)       | Polyfills base que se omitirán.                                                                | `string[]` | Sí       | `[]`           |

### `locales` [#locales]

**Type** `string[]` · **Optional**

Los códigos de configuración regional para los que se cargarán los datos de configuración regional de `@formatjs`. Incluye tu configuración regional predeterminada y cada configuración regional de destino, por ejemplo `[gtConfig.defaultLocale, ...gtConfig.locales]`. Si se omite, las configuraciones regionales se obtienen de `config` o `configFilePath`.

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

**Tipo** `string` · **Opcional** · **Predeterminado** `src/App.tsx`

Ruta absoluta al archivo en el que se inyectan las importaciones del polyfill. Debe ser el punto de entrada real de tu aplicación. Los valores más habituales son `require.resolve('expo-router/entry')` para Expo y `path.resolve(__dirname, 'index.js')` para la CLI bare de React Native.

### `config` [#config]

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

Un objeto de configuración de General Translation del que se resuelven las configuraciones regionales, como alternativa a pasar `locales` directamente.

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

**Tipo** `string` · **Opcional**

Ruta a un archivo `gt.config.json` del que obtener las configuraciones regionales, como alternativa a pasar `locales` o `config`.

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

**Tipo** `string[]` · **Opcional** · **Predeterminado** `[]`

Rutas base de importación de polyfills que se omitirán si ya proporcionas una. Los valores deben coincidir con las rutas base de importación de polyfills del plugin, como `@formatjs/intl-datetimeformat/add-all-tz`.

## Ejemplo [#example]

React Native CLI básico, con `index.js` como punto de entrada:

```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.