# react-native: Almacenamiento local de traducciones
URL: https://generaltranslation.com/es/docs/react-native/guides/local-tx.mdx
---
title: Almacenamiento local de traducciones
description: Guarda las traducciones en el bundle de tu aplicación en lugar de usar una CDN
---

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


## ¿Qué son las traducciones locales?

Las traducciones locales se almacenan en el bundle de tu app, en lugar de recuperarse desde una CDN (Content Distribution Network). Cuando agregas el comando `gt translate` a tu proceso de compilación, se generan traducciones en formato JSON. El paso final es incorporar esas traducciones a tu app para poder utilizarlas.

Hay dos formas de hacerlo:

1. **En el bundle de tu app** (local): Guarda las traducciones en el bundle de tu app después de generarlas
2. **En una CDN** (predeterminado): Obtén las traducciones desde una CDN en runtime

De forma predeterminada, `gt-react-native` obtiene las traducciones desde la CDN de General Translation. Al traducir tu app con nuestra API, las traducciones se guardan automáticamente en nuestra CDN.

<Callout>
  **Comportamiento predeterminado:** GT usa almacenamiento en CDN de forma predeterminada. Cambia al almacenamiento local solo si necesitas las ventajas específicas que ofrece.
</Callout>

## Compensaciones

### Ventajas de las traducciones locales

* **Tiempos de carga más rápidos**: Las traducciones locales se sirven directamente desde tu aplicación, por lo que cargan más rápido que las traducciones servidas desde una CDN
* **Sin dependencia de servicios externos**: La capacidad de tu aplicación para cargar traducciones no depende de la disponibilidad de la CDN. Si no se encuentran traducciones para una configuración regional, la aplicación recurre automáticamente al idioma predeterminado
* **Funciona sin conexión**: Las traducciones vienen incluidas con tu aplicación

### Desventajas de las traducciones locales

* **Aumento del tamaño del bundle**: Las traducciones locales aumentan el tamaño del bundle de tu app, lo que puede hacer que la carga inicial de la app sea más lenta.
* **Gestión del contenido**: Para editar una traducción, debes volver a desplegar tu app con la nueva traducción cada vez que hagas cambios.

## Configuración

### Paso 1: Crear la función de carga

Agrega un archivo `loadTranslations.[js|ts]` en `./src` con el siguiente contenido:

```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  const t = await import(`./_gt/${locale}.json`);
  return t.default;
}
```


### Paso 2: Configura GTProvider

Pasa `loadTranslations` como prop al componente [`<GTProvider>`](/docs/react-native/api/components/gtprovider):

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

export default function App() {
  return (
    <GTProvider loadTranslations={loadTranslations} locales={['es', 'fr']}>
      <YourApp />
    </GTProvider>
  );
}
```


### Paso 3: Configura la CLI

Ejecuta el comando de configuración y selecciona el almacenamiento local:

```bash
npx gt configure
```

Cuando se te indique:

* **¿Guardar en el CDN?** Selecciona &quot;No&quot;
* **Directorio de traducción:** El CLI usará automáticamente `./src/_gt`

Como alternativa, puedes configurar manualmente el archivo `gt.config.json` para usar traducciones locales. Consulta la [documentación de configuración del CLI](/docs/cli/reference/config) para más información.


### Paso 4: Genera las traducciones

Ahora, al ejecutar el comando `translate`, las traducciones se descargarán automáticamente y se incluirán en tu código base:

```bash
npx gt translate
```

Las traducciones se almacenarán en `src/_gt/` y se empaquetarán con tu aplicación.


## Integración con la compilación

### Proceso de compilación en React

Añade la generación de traducciones a tu script de compilación:

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


### Flujo de CI/CD

```yaml
# .github/workflows/deploy.yml
- name: Generate Translations
  run: npx gt translate
  
- name: Build Application  
  run: npm run build
```


## Problemas comunes

### Faltan archivos de traducción

Asegúrate de generar las traducciones antes de compilar:

```bash
# ❌ Compilar sin traducciones
<...YOUR_BUILD_COMMAND...>

# ✅ Generar las traducciones primero
npx gt translate && <...YOUR_BUILD_COMMAND...>
```


### Errores en la ruta de importación

Haz que la función de carga coincida con la estructura de tus directorios:

```ts
// ❌ Ruta incorrecta
const t = await import(`../translations/${locale}.json`);

// ✅ Ruta correcta para src/_gt
const t = await import(`./_gt/${locale}.json`);
```


### Tamaño elevado del bundle

Considera dividir el código en aplicaciones con muchos idiomas:

```ts
// Cargar traducciones solo cuando sea necesario
export default async function loadTranslations(locale: string) {
  // Solo cargar si la configuración regional está activa
  if (locale === getCurrentLocale()) {
    const translations = await import(`./_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}
```

<Callout>
  El almacenamiento local es la mejor opción para aplicaciones con traducciones estables que no requieren actualizaciones frecuentes.
</Callout>


## Próximos pasos

* [Guía de idiomas](/docs/react-native/guides/languages) - Configura los idiomas admitidos