# react-native: Migración
URL: https://generaltranslation.com/es/docs/react-native/guides/migration.mdx
---
title: Migración
description: Aprende cómo migrar un proyecto a gt-react-native
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita la plantilla en content/docs-templates/. */}


## Resumen

En esta guía se describen los pasos necesarios para migrar a `gt-react-native` un proyecto que ya utiliza una biblioteca de i18n.

También compartiremos algunos consejos y sugerencias para que la migración sea lo más sencilla posible.

## Requisitos previos

* Un proyecto que actualmente utiliza otra biblioteca de i18n.
* Conocimientos básicos de la biblioteca `gt-react-native`.

## ¿Por qué migrar?

Hay muchas razones por las que quizá quieras migrar tu proyecto a `gt-react-native`.

Estas son solo algunas:

* **Se acabaron los archivos JSON:** No vuelvas a gestionar traducciones en archivos JSON.
  Todo tu contenido queda integrado directamente en el código, donde debe estar.
* **Traducciones automáticas:** Genera traducciones de alta calidad y adaptadas al contexto con nuestra herramienta CLI.
  No tendrás que volver a esperar traducciones.
* **Experimenta en desarrollo:** Prueba traducciones fácilmente durante el desarrollo con recarga en caliente de las traducciones.

## Configuración

<Steps>
  <Step>
    Instala `gt-react-native` y la herramienta CLI `gt`.

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

  <Step>
    Crea un archivo `gt.config.json` en la raíz de tu proyecto que incluya una propiedad `defaultLocale` y un array `locales`.

    ```json title="gt.config.json" copy
    {
      "defaultLocale": "en",
      "locales": ["en", "fr", "es"]
    }
    ```

    Agrega el componente `<GTProvider>` en la raíz de tu aplicación y pasa el objeto `config` expandido como props.

    ```tsx
    import { GTProvider } from 'gt-react-native'
    import config from './gt.config.json'

    <GTProvider {...config}>
      <App />
    </GTProvider>
    ```

    Para ver los pasos con más detalle, consulta la guía de [inicio rápido del proyecto](/docs/react-native).
  </Step>

  <Step>
    En este punto, tienes 3 opciones:

    1. Migra por completo todo tu proyecto a `gt-react-native` y elimina la biblioteca de i18n anterior.
    2. Migra por completo tu proyecto, pero sigue usando los diccionarios de la biblioteca de i18n anterior.
    3. Sigue usando la biblioteca de i18n anterior por ahora y migra solo una parte de tu proyecto a `gt-react-native`.

    Para obtener más detalles sobre cada opción, consulta la sección [estrategias de migración](#strategies).
  </Step>
</Steps>

## Estrategias de migración [#strategies]

### Opción 1: migrar por completo todo tu proyecto

Esta opción es la más sencilla, pero también requerirá la mayor cantidad de cambios de código de una sola vez.

Después de configurar tu proyecto, tendrás que buscar todas las instancias de tu biblioteca de i18n anterior y reemplazarlas por `gt-react-native`.

Si tu aplicación usa hooks de React como `useTranslation`, busca todas las instancias de `useTranslation` en tu base de código y reemplázalas por `useGT`.

Luego, tendrás que reemplazar todas las claves de cadena por sus valores reales.

Por ejemplo, si tu código anterior se ve así:

```json title="dictionary.json"
{
  "hello": {
    "description": "Hello, world!"
  }
}
```

```tsx
export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}
```

Deberás reemplazarlo por:

```tsx
export default function MyComponent() {
  const { t } = useGT()
  return <div>{t('Hello, world!')}</div>
}
// O
export default function MyComponent() {
  return <T>Hello, world!</T>
}
```

Hazlo para todas las instancias de tu biblioteca de i18n anterior.


### Opción 2: migrar por completo tu proyecto, pero seguir usando diccionarios de la biblioteca de i18n anterior

Supongamos que quieres migrar tu proyecto a `gt-react-native`, pero quieres seguir usando diccionarios de la biblioteca de i18n anterior
y usar las funciones inline de GT solo para el contenido nuevo.

En este caso, puedes hacer algo similar a la Opción 1:

Busca todas las instancias de tu biblioteca de i18n anterior, como los hooks `useTranslation`, y reemplázalas por `useTranslations`.

El hook `useTranslations` funciona de forma muy similar al hook `useTranslation`, y puedes usarlo de la misma manera.

<Tabs items={['Antes', 'Después']}>
  <Tab value="Before">
    ```tsx
    import { useTranslation } from 'react-i18next'
    export default function MyComponent() {
      const { t } = useTranslation()
      return <div>{t('hello.description')}</div>
    }
    ```
  </Tab>

  <Tab value="After">
    ```tsx
    import { useTranslations } from 'gt-react-native'
    export default function MyComponent() {
      const t = useTranslations()
      return <div>{t('hello.description')}</div>
    }
    ```
  </Tab>
</Tabs>

En cuanto a la configuración, tendrás que crear un archivo `dictionary.[js|ts|json]` en la raíz de tu proyecto o en el directorio `src`.
Copia el contenido de tu archivo de diccionario anterior en este nuevo archivo y luego pásalo al componente `GTProvider`.

```tsx
import { GTProvider } from 'gt-react-native'
import dictionary from './dictionary.json'
import config from './gt.config.json'

<GTProvider {...config} dictionary={dictionary}>
  <App />
</GTProvider>
```

Consulta la guía de [diccionarios](/docs/react-native/guides/dictionaries) para más detalles.


### Opción 3: Sigue usando la biblioteca de i18n anterior por ahora y migra solo una parte de tu proyecto a `gt-react-native`

Esta opción es la más flexible y requerirá la menor cantidad de cambios de código de una sola vez.

En este caso, puedes hacer algo similar a la Opción 2, pero migrar solo una parte de tu proyecto a `gt-react-native`.

Por ejemplo, puedes seguir usando la biblioteca de i18n anterior para algunos componentes y usar `gt-react-native` solo para otros y para el contenido nuevo.

<Callout type="warn">
  Esta opción no se recomienda, ya que tendrás que gestionar dos bibliotecas de i18n diferentes en tu proyecto, lo que puede resultar complejo y provocar errores.
</Callout>

## Consejos para la migración

### 1. Usa el hook `useGT` o el componente `<T>` siempre que sea posible

Siempre que sea posible, te recomendamos usar el hook `useGT` o el componente `<T>`.

Esto te facilitará mucho la edición de contenido en el futuro y hará que tu base de código sea mucho más legible.

### 2. Usa el hook `useTranslations` para contenido existente

El hook `useTranslations` es una excelente forma de seguir usando tus diccionarios existentes.

Lo ofrecemos para facilitar la migración, pero no recomendamos usarlo para contenido nuevo.

### 3. Uso de IA

Si estás usando IA para ayudarte a migrar tu proyecto, tenemos disponibles `LLMs.txt` y `LLMs-full.txt` en:

* [LLMs.txt](/llms.txt)
* [LLMs-full.txt](/llms-full.txt)

Estos archivos contienen el contenido completo de esta documentación, por lo que tu herramienta de IA tendrá acceso a toda la información que necesita para ayudarte con la migración de tu proyecto.