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

En tiempo de compilación, cuando Babel transforma el archivo en `entryPointFilePath`, el plugin añade al principio sentencias `import` para:

* Los polyfills base de `@formatjs` — `getcanonicallocales`, `locale`, `displaynames`, `listformat`, `pluralrules`, `numberformat`, `relativetimeformat` y `datetimeformat` (con todas las zonas horarias) — excepto los que figuren 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 import de polyfill que ya tengas. Las configuraciones regionales se resuelven a partir de `locales`, o de `config`/`configFilePath` si en su lugar pasas esos valores.

*Nota: si el plugin no funciona en tu configuración, importa los polyfills manualmente al principio de tu archivo de entrada. Consulta la [documentación de polyfills de FormatJS](https://formatjs.github.io/docs/polyfills).*

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