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, desplegar e iterar en aplicaciones 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. La CLI de Lingo.dev lee archivos fuente, envía contenido traducible a modelos de lenguaje de gran tamaño 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 usando Expo. Aprenderás cómo estructurar un proyecto con Expo, configurar un pipeline de traducción y ver los resultados.

Paso 1. Configurar un proyecto 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 el 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 la CLI

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

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "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 tener en cuenta que:

[locale] es un marcador de posición que se reemplaza en tiempo de ejecución. Garantiza 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, incluidos 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 pipeline 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. Usar 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 una configuración regional específica:

// 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;

Usa 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.