Documentación React Native y Expo

React Native y Expo

Integra i1n con React Native y Expo usando el SDK de i1n o el Modo Bridge con i18n-js.

Configuración

Ejecuta i1n init en tu proyecto de React Native. La CLI detecta automáticamente expo-localization si está presente y configura el formato JSON en el directorio locales/.

Podés usar el SDK de i1n en modo independiente o conectarlo a i18n-js a través del Modo Puente.

Modo Independiente

Utilice el SDK de i1n directamente con expo-localization para la detección de la configuración regional del dispositivo. Inicialice con init(), cargue sus recursos y utilice t() en sus componentes.

El patrón de proveedor de React funciona de manera idéntica a los proyectos web de React. Utilice el hook useI1n() para traducciones seguras de tipos y cambio de locale en tiempo de ejecución.

Modo Puente con i18n-js

Si tu proyecto usa i18n-js, conéctalo con: registerI1n((key, params) => i18n.t(key, params)). La función t() de i1n delega a i18n-js mientras proporciona verificación estricta de tipos y autocompletado.

i1n administra los archivos de traducción y la generación de tipos. i18n-js continúa manejando la pluralización y la interpolación en tiempo de ejecución. Funciona tanto con flujos de trabajo de React Native administrados por Expo como con los básicos.

Despliegue

Ejecutá i1n pull antes de compilar tu app. Las traducciones se incluyen con el binario de la aplicación.

Para actualizaciones de traducción inalámbricas (OTA), combina i1n pull con tu estrategia de actualización OTA (ej. Expo Updates o CodePush).

App.tsx
import * as Localization from 'expo-localization'
import { I18n } from 'i18n-js'

const i18n = new I18n(translations)
i18n.locale = Localization.locale

<Text>{i18n.t('welcome')}</Text>
Bridge Mode — src/i18n.ts
import { registerI1n } from 'i1n'
import { I18n } from 'i18n-js'

const i18n = new I18n(translations)
registerI1n((key, params) => i18n.t(key, params))

Relacionado