Funciones de la app

App multilingüe

La carpeta `languageConfig` ayuda a que tu app Expo o React Native CLI tenga varios idiomas. Usa i18next, trae 25 archivos de idioma, parte del idioma del teléfono y permite cambiar idioma y diseño de derecha a izquierda (RTL) con poco esfuerzo. Con Expo Router lo conectas en `app/_layout.tsx`. Con React Native CLI normalmente solo cambias la parte de localización en tu `App.tsx` raíz; la navegación y las pantallas pueden quedarse igual. Descarga el ZIP, descomprímelo junto a tu código (por ejemplo en `src/`) y sigue los pasos de abajo.

Vídeo de demostración

Breve grabación de pantalla del starter de idiomas en la app: cambio de idioma, diseño RTL y textos traducidos.

Descarga

El ZIP trae la carpeta `languageConfig` completa. En Mac puede aparecer una carpeta extra `__MACOSX`; puedes ignorarla. Al final deberías tener una carpeta principal llamada `languageConfig`.

Estructura de carpetas

languageConfig/
├── config.ts
├── languages.ts
├── context/
│   └── LanguageContext.tsx
├── i18n/
│   └── index.ts
└── locales/
    ├── ar.json … zh.json (25 languages)

Para qué sirve cada archivo

• config.ts Devuelve los helpers de `languages.ts`. Puedes importar desde `config` o desde `languages`, como prefieras.
• languages.ts Lista idiomas soportados, indica cuáles son de derecha a izquierda (RTL) y trae datos para un selector (bandera, nombre nativo, nombre en inglés).
• i18n/index.ts Configura i18next: carga cada JSON, empieza con el idioma del dispositivo, usa inglés como respaldo y conecta `react-i18next` para React Native.
• context/LanguageContext.tsx Ofrece `LanguageProvider`: comparte idioma actual y si es RTL, guarda la elección del usuario y expone `setLanguage` para cambiar. Espera helpers de guardado en tu proyecto—ajusta la ruta de import si hace falta.
• locales/*.json Un archivo JSON por idioma. Cada clave es un ID de texto para la interfaz. i18next los carga bajo el namespace `translation`.

Dependencias

Instala estos paquetes en tu proyecto Expo o React Native CLI si aún no los tienes:

• i18next
• react-i18next
• expo-localization

Conéctalo en pocos pasos

1. Copia o descomprime `languageConfig` en tu proyecto (por ejemplo `src/languageConfig`).
2. Instala: `i18next`, `react-i18next` y `expo-localization`.
3. Envuelve el layout raíz (o `App`) con `LanguageProvider` de `languageConfig/context/LanguageContext.tsx`.
4. En tus pantallas usa `useTranslation()` de `react-i18next` y las claves de tus JSON.

Ejemplo: cablear tu archivo raíz

Mantén `languageConfig` junto a tu archivo principal de la app—por ejemplo `src/languageConfig` al lado de `src/app/_layout.tsx` (Expo Router) o `src/App.tsx` (CLI). Si tus carpetas son distintas, cambia las rutas de import.

Si usas atajos como `@/languageConfig/...`, úsalos en lugar de `../languageConfig` o `./languageConfig`.

Expo Router — `app/_layout.tsx`

Importa el archivo i18n una vez, envuelve todo con `LanguageProvider` y usa `useAppLanguage` para que la `View` raíz pueda pasar a RTL cuando haga falta. Deja `LanguageProvider` fuera de `Stack` para que todas las pantallas compartan el mismo idioma.

import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import 'react-native-reanimated';
import { LanguageProvider, useAppLanguage } from '../languageConfig/context/LanguageContext';
import '../languageConfig/i18n';

function RootLayoutContent() {
  const { isRtl } = useAppLanguage();

  return (
    <View style={[styles.root, isRtl && { direction: 'rtl' }]}>
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
      <StatusBar style="auto" />
    </View>
  );
}

export default function RootLayout() {
  return (
    <LanguageProvider>
      <RootLayoutContent />
    </LanguageProvider>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
});

React Native CLI — `App.tsx`

En React Native CLI normalmente solo cambias la parte de localización en tu archivo raíz—los mismos pasos de abajo (importar i18n una vez, envolver con `LanguageProvider`, usar `useAppLanguage` en un componente interno). El resto de la app puede quedarse igual. Cambia el `NavigationContainer` de ejemplo por tu navegador real.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { LanguageProvider, useAppLanguage } from './languageConfig/context/LanguageContext';
import './languageConfig/i18n';
// import your root navigator

function AppShell() {
  const { isRtl } = useAppLanguage();

  return (
    <View style={[styles.root, isRtl && { direction: 'rtl' }]}>
      <NavigationContainer>{/* <RootNavigator /> */}</NavigationContainer>
    </View>
  );
}

export default function App() {
  return (
    <LanguageProvider>
      <AppShell />
    </LanguageProvider>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
});

Resumen simple: tu archivo raíz

Esto resume lo mismo que los ejemplos de código de arriba, en palabras sencillas. Expo Router y React Native CLI cambian un poco las rutas de importación; los pasos son los mismos. En CLI sueles tocar solo este bloque de localización en el archivo raíz.

• Importa `languageConfig/i18n` una sola vez al inicio de tu archivo raíz. Ese archivo arranca i18next, carga todos los JSON, lee el idioma del dispositivo con expo-localization y usa inglés si falta una traducción.
• Envuelve toda la app con `LanguageProvider` de `languageConfig/context/LanguageContext.tsx`. Colócalo encima del navegador (`Stack`, `NavigationContainer`, etc.) para que todas las pantallas compartan idioma y la elección guardada.
• En un componente hijo, usa `useAppLanguage()` y pon la `View` raíz con `direction: 'rtl'` cuando el idioma sea RTL (por ejemplo árabe). Lo escribes una vez, no en cada pantalla.
• En las pantallas normales usa `useTranslation()` de `react-i18next` para los textos. El archivo raíz solo prepara i18n, el provider y la dirección general del layout.