React Native (Expo) - Lingo.dev CLI

¿Qué es Expo?

Expo es un framework y plataforma para crear aplicaciones de React Native. Proporciona herramientas y servicios para construir, implementar e iterar aplicaciones para iOS, Android y web desde la misma base de código JavaScript.

¿Qué es Lingo.dev CLI?

Lingo.dev es una plataforma de traducción impulsada por IA. El CLI de Lingo.dev lee archivos fuente, envía contenido traducible a modelos de lenguaje de gran escala y escribe los archivos traducidos de vuelta a tu proyecto.

Acerca de esta guía

Esta guía explica cómo configurar Lingo.dev CLI en un proyecto de React Native utilizando Expo. Aprenderás cómo estructurar un proyecto con Expo, configurar un proceso de traducción y ver los resultados.

Paso 1. Configurar un proyecto de Expo

Crea una nueva aplicación Expo:
```
npx create-expo-app@latest my-app
```
Navega al directorio del proyecto:
```
cd my-app
```

Instala las dependencias de localización:

npx expo install expo-localization
npx expo install i18n-js

Paso 2. Crear contenido fuente

Crea un directorio para almacenar contenido localizable:
```
mkdir -p app/i18n
```

Crea un archivo que contenga contenido localizable (por ejemplo, app/i18n/en.json):

{
  "home": {
    "title": "Welcome",
    "subtitle": "This text is translated by Lingo.dev"
  },
  "cta": "Get started"
}

Paso 3. Configurar el CLI

En la raíz del proyecto, crea un archivo i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": 1.8,
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "json": {
      "include": ["app/i18n/[locale].json"]
    }
  }
}

Este archivo define:

los archivos que Lingo.dev CLI debe traducir
los idiomas entre los que traducir

En este caso, la configuración traduce archivos JSON del inglés al español.

Es importante destacar que:

[locale] es un marcador de posición que se reemplaza en tiempo de ejecución. Asegura que el contenido se lea desde una ubicación (por ejemplo, app/i18n/en.json) y se escriba en una ubicación diferente (por ejemplo, app/i18n/es.json).
Lingo.dev CLI admite varios formatos de archivo, incluyendo JSON, MDX y más.

Para obtener más información, consulta configuración de i18n.json.

Paso 4. Traducir el contenido

Regístrate para obtener una cuenta de Lingo.dev.
Inicia sesión en Lingo.dev a través de la CLI:
```
npx lingo.dev@latest login
```
Ejecuta el proceso de traducción:
```
npx lingo.dev@latest run
```
La CLI creará un archivo app/i18n/es.json para almacenar el contenido traducido y un archivo i18n.lock para realizar un seguimiento de lo que se ha traducido (para evitar retraducciones innecesarias).

Paso 5. Utilizar las traducciones

En el archivo tsconfig.json, habilita las importaciones JSON:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

Crea una función que cargue el contenido traducido para un idioma específico:

// app/lib/i18n.ts
import { getLocales } from "expo-localization";
import { I18n } from "i18n-js";

import en from "../i18n/en.json";
import es from "../i18n/es.json";

const i18n = new I18n({ en, es });

i18n.defaultLocale = "en";
i18n.enableFallback = true;
i18n.locale = getLocales()[0]?.languageCode ?? "en";

export default i18n;

Utiliza la función para mostrar el contenido traducido:

// App.tsx
import { useState } from "react";
import { View, Text, Pressable } from "react-native";
import i18n from "./app/lib/i18n";

export default function App() {
  const [locale, setLocale] = useState(i18n.locale);

  const toggleLocale = () => {
    const next = locale === "en" ? "es" : "en";
    i18n.locale = next;
    setLocale(next);
  };

  return (
    <View>
      <Text>{i18n.t("home.title")}</Text>
      <Text>{i18n.t("home.subtitle")}</Text>

      <Pressable onPress={toggleLocale}>
        <Text>
          {locale === "en" ? "Switch to Español" : "Cambiar a English"}
        </Text>
      </Pressable>
    </View>
  );
}

Inicia el servidor de desarrollo:
```
npx expo start
```
Navega a http://localhost:8081.
Alterna entre los idiomas disponibles.