# General Translation React SDKs (gt-react, gt-next, gt-react-native): Quickstart de React Native
URL: https://generaltranslation.com/es/docs/react/react-native-quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Añade General Translation a una app de React Native con gt-react-native, tanto para Expo como para React Native CLI puro.

`gt-react-native` añade internacionalización automática a las apps de React Native. Inicializa General Translation en el punto de entrada de tu app, añade un plugin de Babel para los polyfills que necesita React Native y envuelve tu app con [`GTProvider`](/docs/react/reference/components/gt-provider).

Este quickstart cubre tanto Expo como React Native CLI puro. Para apps web de React, usa el [Quickstart de React](/docs/react/react-quickstart).

<Callout type="warn">
  **Advertencia:** `gt-react-native` es experimental y puede que no funcione en todos los proyectos. Incluye un módulo nativo, así que **Expo Go no es compatible**: necesitas una compilación de desarrollo.
</Callout>

## Quickstart [#quickstart]

Instala el paquete, crea un archivo de configuración, configura los polyfills, añade un cargador de traducciones, inicializa General Translation con el proveedor, marca el contenido para traducirlo y genera las traducciones.

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

Instala `gt-react-native` como dependencia y la [CLI de `gt`](/docs/cli/quickstart) como dependencia de desarrollo.

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

<Callout type="info">
  **Nota:** Si usas React Native CLI puro, ejecuta `cd ios && pod install` después de la instalación para vincular el módulo nativo.
</Callout>

### 2. Crea `gt.config.json`

Crea un archivo `gt.config.json` en el directorio raíz de tu proyecto. En él se indican el idioma de origen, las configuraciones regionales de destino y dónde se escriben los archivos de traducción.

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

* `defaultLocale` — el idioma en el que está escrita tu app.
* `locales` — los idiomas a los que quieres traducir. Elige entre las [locales compatibles](/docs/platform/dashboard/reference/supported-locales).
* `files.gt.output` — dónde el CLI guarda los archivos de traducción. `[locale]` se sustituye por cada código de configuración regional.

### 3. Configura los polyfills

El entorno de ejecución de JavaScript de React Native no incluye las APIs de `Intl` que necesita `gt-react-native`. Añade el plugin de Babel incluido y haz que `entryPointFilePath` apunte al archivo de punto de entrada de tu app.

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

El plugin es una **exportación con nombre**, así que debes desestructurarlo: `const { plugin: gtPlugin } = require('gt-react-native/plugin')`. Inyecta los polyfills de `@formatjs` necesarios al principio de tu archivo de entrada. Si Metro no puede resolver los datos de configuración regional para una configuración regional específica de una región, sigue la [configuración manual de polyfills](/docs/react/react-native/plugin#how-it-works) y mantén sin cambios la configuración regional de tu app.

### 4. Crea un cargador de traducciones

Metro (el empaquetador de React Native) no admite importaciones dinámicas, así que asigna cada configuración regional a su archivo de traducción mediante llamadas estáticas a `require`.

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

La CLI genera estos archivos cuando ejecutas [`npx gt translate`](/docs/cli/reference/commands/translate).

<Callout type="warn">
  **Advertencia:** Estos archivos no existen hasta que los crees, y Metro no empaquetará tu app hasta que existan. Ejecuta [`npx gt generate`](/docs/cli/reference/commands/generate) (no se necesita ninguna API Key) o [`npx gt translate`](/docs/cli/reference/commands/translate) (con credenciales) antes de iniciar la app.
</Callout>

### 5. Inicializa General Translation y añade el proveedor

Llama a [`initializeGT`](/docs/react/reference/config#initialize) una vez en el punto de entrada de tu app, antes de renderizarla, y luego envuélvela con [`GTProvider`](/docs/react/reference/components/gt-provider). A diferencia de los paquetes web, [`GTProvider`](/docs/react/reference/components/gt-provider) carga las traducciones internamente, por lo que no debes pasar una prop `translations` y, por lo general, tampoco necesitas pasar `locale`, ya que se detecta automáticamente. Aun así, acepta una prop `locale` opcional si necesitas anular esa detección.

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

    // Inicializa una vez, a nivel de módulo
    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';

    // Inicializa una vez, antes de registrar la app
    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>

<Callout type="info">
  **Nota:** Las opciones `projectId` y `devApiKey` habilitan la traducción on-demand durante el desarrollo. En Expo, expónlas con el prefijo `EXPO_PUBLIC_`.
</Callout>

### 6. Marca el contenido para traducirlo

Envuelve el JSX en el componente [`<T>`](/docs/react/reference/components/t) para traducirlo en el mismo documento. Para cadenas independientes, como los valores de `placeholder` y `accessibilityLabel`, usa el hook [`useGT`](/docs/react/reference/hooks/use-gt). Para crear un selector de idioma, usa el hook [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector): `gt-react-native` no incluye un componente selector predefinido.

```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()`](/docs/react/reference/hooks/use-gt) devuelve directamente la función de traducción, por lo que debes llamarla como `const gt = useGT();`.

### 7. Genera traducciones

Ejecuta la CLI para traducir tu proyecto a través de la API de General Translation.

```bash
npx gt translate
```

Agrega el comando a tu script de compilación para que las compilaciones de producción siempre tengan traducciones actualizadas:

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

<Callout type="info">
  **Nota:** [`npx gt translate`](/docs/cli/reference/commands/translate) necesita un ID de proyecto y una clave de API de producción, configurados como `GT_PROJECT_ID` y `GT_API_KEY` en tu entorno. Ejecuta [`npx gt auth`](/docs/cli/reference/commands/auth) o visita el [panel de control](/docs/platform/dashboard/get-started) para obtenerlos.
</Callout>

## Next steps

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

## Sitemap

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