# General Translation React SDKs (gt-react, gt-next): Configurar React Native
URL: https://generaltranslation.com/es/docs/react/react-native/setup.mdx
---

title: Configurar React Native
description: Inicializa General Translation en una app de React Native, agrega el proveedor y carga las traducciones, tanto para Expo como para la CLI de React Native sin Expo.

---

`gt-react-native` se inicializa en el punto de entrada de tu app: llamas a [`initializeGT`](/docs/node/reference/functions/initialize-gt) una sola vez a nivel de módulo y luego envuelves tu app con [`<GTProvider>`](/docs/react/reference/components/gt-provider). A diferencia de los paquetes web, el proveedor carga las traducciones por sí solo, así que no le pasas una prop `translations` y, de forma predeterminada, resuelve la `configuración regional` desde el dispositivo.

Esta página cubre las partes de la configuración específicas de React Native. Para seguir el recorrido completo paso a paso, incluida la instalación y la CLI, consulta el [Quickstart de React Native](/docs/react/react-native-quickstart). Para ver el plugin de polyfill del que depende esta configuración, consulta [Plugin](/docs/react/react-native/plugin).

*Advertencia: `gt-react-native` incluye un módulo nativo, por lo que Expo Go no es compatible; ejecuta una development build (`npx expo run:ios` / `run:android`). En la CLI de React Native sin Expo, ejecuta `cd ios && pod install` después de la instalación.*

## Inicializa General Translation [#initialize]

Llama a `initializeGT` una sola vez, en el nivel de módulo de tu archivo de entrada, antes de que se renderice tu aplicación. Despliega tu `gt.config.json` y pasa una función [`loadTranslations`](/docs/react/reference/functions/load-translations). Agrega `projectId` y `devApiKey` para habilitar la traducción on-demand durante el desarrollo.

```tsx
import { initializeGT } from 'gt-react-native';
import gtConfig from './gt.config.json';
import { loadTranslations } from './loadTranslations';

// Inicializar 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,
});
```

`initializeGT` acepta las mismas opciones de configuración regional y de entrega que los demás frameworks; consulta la [referencia de configuración](/docs/react/reference/config#initialization). `gt.config.json` no se lee automáticamente, así que impórtalo y usa spread en la llamada.

*Nota: en Expo, las variables de entorno públicas deben llevar el prefijo `EXPO_PUBLIC_`. Nunca expongas una API key de producción en el bundle de tu aplicación.*

## Añade el proveedor [#provider]

Envuelve tu aplicación en `<GTProvider>`. En React Native, el proveedor carga internamente las traducciones de la configuración regional activa y administra el estado de la configuración regional, por lo que no requiere una prop `translations` y toma la configuración regional del dispositivo de forma predeterminada (aun así, puedes pasar una configuración regional opcional para sobrescribirla; consulta más abajo). Muestra un contenido alternativo de carga mientras se cargan las traducciones; pasa una prop `fallback` para personalizarlo.

```tsx title="App.tsx"
import { GTProvider } from 'gt-react-native';
import Home from './src/Home';

export default function App() {
  return (
    <GTProvider>
      <Home />
    </GTProvider>
  );
}
```

El proveedor también acepta las props opcionales `locale`, `region` y `enableI18n` para sobrescribir los valores que, de otro modo, obtendría del dispositivo.

## Cargar traducciones [#load-translations]

Metro, el empaquetador de React Native, no admite importaciones dinámicas, por lo que debes asociar cada configuración regional con su archivo de traducción mediante llamadas estáticas a `require`. La CLI genera estos archivos cuando ejecutas `npx gt translate`.

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

## Puntos de entrada [#entry-points]

Dónde llames a `initializeGT` depende del tipo de proyecto.

<Tabs items={['Expo', 'React Native CLI']}>
  <Tab value="Expo">
    Inicializa en tu layout raíz, a nivel de módulo, y luego renderiza el proveedor.

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

    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">
    Inicializa en `index.js`, antes de registrar la app, y agrega el proveedor en `App.tsx`.

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

    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>

En ambos casos, también debes configurar el [plugin de polyfill](/docs/react/react-native/plugin) en `babel.config.js`; de lo contrario, no estarán disponibles las API de `Intl` de las que depende `gt-react-native`.