# react-native: Inicio rápido de React Native con Expo
URL: https://generaltranslation.com/es/docs/react-native/tutorials/quickstart-expo.mdx
---
title: Inicio rápido de React Native con Expo
description: Agrega varios idiomas a tu aplicación Expo en menos de 10 minutos
---

Al final de esta guía, tu aplicación Expo mostrará contenido en varios idiomas, con un selector de idioma con el que los usuarios podrán interactuar.

**Requisitos previos:**

* Un proyecto de Expo (SDK 49+)
* Node.js 18+

<Callout type="warn">
  `gt-react-native` sigue siendo experimental y puede no funcionar en todos los proyectos.
  Avísanos si encuentras algún problema [abriendo un issue en GitHub](https://github.com/generaltranslation/gt/issues).
</Callout>

<Callout type="info">
  **¿Quieres una configuración automática?** Ejecuta `npx gt@latest` para configurar todo con el [asistente de configuración](/docs/cli/init). En esta guía se explica la configuración manual.
</Callout>

<Callout type="info">
  ¿Buscas un proyecto de React Native CLI sin Expo? Consulta el [inicio rápido de React Native](/docs/react-native/tutorials/quickstart).
</Callout>

***

## Paso 1: Instala los paquetes

`gt-react-native` es la biblioteca que habilita las traducciones en tu aplicación. `gt` es la herramienta CLI que prepara las traducciones para producción.

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm i gt-react-native
    npm i -D gt
    ```
  </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>

***

## Paso 2: Crea un archivo de configuración de traducción

Crea un archivo **`gt.config.json`** en la raíz de tu proyecto. Esto le indica a la biblioteca qué idiomas son compatibles:

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

* **`defaultLocale`** — el idioma en el que está escrita tu aplicación (tu idioma de origen).
* **`locales`** — los idiomas a los que quieres traducir. Elige cualquiera de la [lista de configuraciones regionales compatibles](/docs/platform/supported-locales).
* **`files.gt.output`** — donde la CLI guarda los archivos de traducción. `[locale]` se reemplaza por cada código de idioma (p. ej., `content/es.json`).

***


## Paso 3: Configura los polyfills

El entorno de ejecución de JavaScript de React Native no incluye las API de `Intl` que necesita `gt-react-native`. La forma más sencilla de solucionarlo es usar el plugin de Babel incluido.

Agrégalo a tu configuración de Babel:

```js title="babel.config.js"
import gtPlugin from 'gt-react-native/plugin';
import { createRequire } from 'module';
import gtConfig from './gt.config.json' with { type: 'json' };
const require = createRequire(import.meta.url);

export default function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        gtPlugin,
        {
          locales: [gtConfig.defaultLocale, ...gtConfig.locales],
          entryPointFilePath: require.resolve('expo-router/entry'),
        },
      ],
    ],
  };
}
```

<Accordions>
  <Accordion title="¿El plugin de Babel no funciona? Usa un polyfill manualmente">
    Instala los polyfills de FormatJS e impórtalos al inicio de tu archivo de entrada. Necesitas los polyfills base, además de los datos específicos de la configuración regional para cada idioma que uses.

    Consulta la [documentación de polyfills de FormatJS](https://formatjs.github.io/docs/polyfills) para ver la lista completa. Como mínimo, necesitas:

    ```tsx title="index.js"
    import '@formatjs/intl-getcanonicallocales/polyfill';
    import '@formatjs/intl-locale/polyfill';
    import '@formatjs/intl-pluralrules/polyfill-force';
    import '@formatjs/intl-numberformat/polyfill';
    import '@formatjs/intl-datetimeformat/polyfill';
    import '@formatjs/intl-datetimeformat/add-all-tz';

    // Añade datos de configuración regional para cada idioma:
    import '@formatjs/intl-pluralrules/locale-data/en';
    import '@formatjs/intl-pluralrules/locale-data/es';
    import '@formatjs/intl-numberformat/locale-data/en';
    import '@formatjs/intl-numberformat/locale-data/es';
    // ... repite para cada configuración regional y polyfill
    ```
  </Accordion>
</Accordions>

***


## Paso 4: Crea un cargador de traducciones

Metro (el bundler de Expo) no es compatible con las importaciones dinámicas, así que debes asignar explícitamente cada configuración regional a su archivo de traducción:

```ts title="loadTranslations.ts"
const translations: Record<string, any> = {
  es: require("@/content/es.json"),
  fr: require("@/content/fr.json"),
  ja: require("@/content/ja.json"),
};

export function loadTranslations(locale: string) {
  return translations[locale] ?? {};
}
```

La CLI genera estos archivos cuando ejecutas `npx gt translate`.

***


## Paso 5: Agrega el `GTProvider` a tu layout

El componente **`GTProvider`** le da acceso a las traducciones a toda tu aplicación. Agrégalo a tu layout raíz:

```tsx title="app/_layout.tsx"
import { Slot } from 'expo-router';
import { GTProvider } from 'gt-react-native';
import gtConfig from '../gt.config.json';
import { loadTranslations } from '../loadTranslations';

export default function RootLayout() {
  return (
    <GTProvider
      config={gtConfig}
      loadTranslations={loadTranslations}
      projectId={process.env.EXPO_PUBLIC_GT_PROJECT_ID}
      devApiKey={process.env.EXPO_PUBLIC_GT_DEV_API_KEY}
    >
      <Slot />
    </GTProvider>
  );
}
```

`GTProvider` gestiona el estado de la configuración regional y pone las traducciones a disposición de todos los componentes hijo. La prop `devApiKey` habilita la traducción bajo demanda durante el desarrollo.

***


## Paso 6: Marca el contenido para su traducción

Envuelve cualquier texto que quieras traducir con el componente **`<T>`**:

```tsx title="app/index.tsx"
import { Text, View } from 'react-native';
import { T } from 'gt-react-native';

export default function Home() {
  return (
    <View>
      <T>
        <Text>bienvenido a mi aplicación</Text>
      </T>
      <T>
        <Text>This content will be translated automatically.</Text>
      </T>
    </View>
  );
}
```

Todo lo que esté dentro de `<T>` se traduce como una sola unidad.

***


## Paso 7: Agregar un selector de idioma

Agrega un **`<LocaleSelector>`** para que los usuarios cambien de idioma:

```tsx title="app/index.tsx"
import { Text, View } from 'react-native';
import { T, LocaleSelector } from 'gt-react-native';

export default function Home() {
  return (
    <View>
      <LocaleSelector />
      <T>
        <Text>bienvenido a mi aplicación</Text>
      </T>
    </View>
  );
}
```

`LocaleSelector` muestra un selector con los idiomas de tu `gt.config.json`.

***


## Paso 8: Configura las variables de entorno (opcional)

Para ver las traducciones en desarrollo, necesitas una clave API de General Translation.

Crea un archivo **`.env.local`**. Expo requiere que las variables de entorno públicas tengan el prefijo `EXPO_PUBLIC_`:

```bash title=".env.local"
EXPO_PUBLIC_GT_DEV_API_KEY="your-dev-api-key"
EXPO_PUBLIC_GT_PROJECT_ID="your-project-id"
```

Obtén tus claves gratuitas en [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) o ejecútalo así:

```bash
npx gt auth
```

<Callout type="warn">
  Para el desarrollo, usa una clave que empiece por `gtx-dev-`. Las claves de producción (`gtx-api-`) son solo para CI/CD.

  Nunca expongas claves de API de producción en el bundle de tu aplicación ni hagas commit de ellas en el control de versiones.
</Callout>

<Accordions>
  <Accordion title="¿Puedo usar gt-react-native sin claves de API?">
    Sí. Sin claves de API, `gt-react-native` funciona como una biblioteca de i18n estándar. No tendrás traducción bajo demanda en desarrollo, pero aun así puedes:

    * Proporcionar manualmente tus propios archivos de traducción
    * Usar todos los componentes (`<T>`, `<Var>`, `LocaleSelector`, etc.)
    * Ejecutar `npx gt generate` para crear plantillas de archivos de traducción y luego traducirlas tú mismo
  </Accordion>
</Accordions>

***


## Paso 9: Consulta cómo funciona

Inicia tu compilación de desarrollo:

```bash
npx expo start --dev-client
```

<Callout type="warn">
  **Expo Go no funciona** con `gt-react-native` porque incluye un módulo nativo. Necesitas una [compilación de desarrollo](https://docs.expo.dev/develop/development-builds/introduction/):

  ```bash
  npx expo run:ios
  # o
  npx expo run:android
  ```
</Callout>

Usa el selector de idioma para cambiar de idioma. Deberías ver el contenido traducido.

<Callout type="info">
  En desarrollo, las traducciones se realizan bajo demanda, así que es posible que veas un breve estado de carga la primera vez que cambies a un idioma nuevo. En producción, las traducciones se generan por adelantado y se cargan al instante.
</Callout>

***


## Paso 10: Traducir cadenas (no solo en JSX)

Para cadenas simples, como los atributos `placeholder` o los valores de `accessibilityLabel`, usa el hook **`useGT`**:

```tsx title="app/contact.tsx"
import { TextInput, View } from 'react-native';
import { useGT } from 'gt-react-native';

export default function Contact() {
  const gt = useGT();

  return (
    <View>
      <TextInput
        placeholder={gt('Enter your email')}
        accessibilityLabel={gt('Email input field')}
      />
    </View>
  );
}
```

***


## Paso 11: Desplegar en producción

En producción, las traducciones se generan por adelantado en tiempo de compilación (sin llamadas a la API en tiempo real). Agrega el comando `translate` a tu script de compilación:

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

Configura tus variables de entorno de **producción** en tu CI/CD (son solo del lado del servidor, no `EXPO_PUBLIC_`):

```bash
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```

<Callout type="warn">
  Las claves de producción comienzan con `gtx-api-` (no con `gtx-dev-`). Obtén una en [dash.generaltranslation.com](https://dash.generaltranslation.com). Nunca expongas las claves de producción en el bundle de tu aplicación.
</Callout>

Eso es todo: tu aplicación ahora es multilingüe. 🎉

***


## Solución de problemas

<Accordions>
  <Accordion title="No se pudo encontrar 'GtReactNative'">
    ```
    ERROR  [Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'GtReactNative' could not be found.]
    ```

    Esto significa que el módulo nativo no se ha enlazado. Causas comunes:

    1. **Estás usando Expo Go** en lugar de una compilación de desarrollo. Cambia a una compilación de desarrollo:

    ```bash
    npx expo run:ios
    # o
    npx expo run:android
    ```

    2. **Los Pods no están actualizados (iOS).** Prueba a reinstalarlos:

    ```bash
    cd ios && rm -rf build Pods Podfile.lock && pod install && cd ..
    ```
  </Accordion>

  <Accordion title="Error de códigos de configuración regional no válidos">
    ```
    Error: You are using invalid locale codes in your configuration.
    ```

    Normalmente, esto significa que los polyfills no están configurados correctamente. Asegúrate de que el plugin de Babel esté configurado (o de haber importado manualmente los polyfills) y borra la caché:

    ```bash
    npx expo start --clear
    ```
  </Accordion>

  <Accordion title="Las traducciones son lentas en desarrollo">
    Esto es normal. En desarrollo, las traducciones se realizan bajo demanda (tu contenido se traduce en tiempo real mediante la API). Esta demora **no existe en producción**: todas las traducciones se generan por adelantado con `npx gt translate`.
  </Accordion>

  <Accordion title="Algunas traducciones son inexactas">
    Un texto ambiguo puede dar lugar a traducciones inexactas. Por ejemplo, &quot;apple&quot; podría referirse a la fruta o a la empresa. Añade una prop `context` para ayudar:

    ```jsx
    <T context="the technology company">Apple</T>
    ```

    Tanto `<T>` como `useGT()` admiten la opción `context`.
  </Accordion>
</Accordions>

***

## Próximos pasos

* [**Guía del componente `<T>`**](/docs/react-native/guides/t) — Aprende sobre variables, plurales y patrones avanzados de traducción
* [**Guía de traducción de cadenas**](/docs/react-native/guides/strings) — Profundiza en `useGT`
* [**Componentes Variable**](/docs/react-native/guides/variables) — Maneja contenido dinámico con `<Var>`, `<Num>`, `<Currency>` y `<DateTime>`
* [**Desplegar en producción**](/docs/react-native/tutorials/quickdeploy) — Configuración de CI/CD, almacenamiento en caché y optimización del rendimiento