Documentación / React Native and Expo

Localización de React Native y Expo, automatizada

Traduce una aplicación React Native o Expo: el texto, los marcadores de posición y las etiquetas de accesibilidad se convierten en llamadas t() con react-i18next, configuradas sin API exclusivas del navegador.

Cómo funciona

La copia en <Text>, placeholder, accessibilityLabel y accessibilityHint se traduce, para que los lectores de pantalla también hablen el idioma del usuario.

La configuración generada lee el idioma del dispositivo con Intl en lugar de las API del navegador, y funciona con Expo Router (app/_layout) o una entrada App clásica.

Antes y después

La salida real del motor para este archivo. En una ejecución real, el modelo alojado nombra las claves a partir del contexto.

src/screens/OrderStatus.tsx · antes

import { Pressable, Text, View } from 'react-native';

export function OrderStatus({ onTrack }) {
  return (
    <View>
      <Text>Your order is on its way</Text>
      <Pressable onPress={onTrack} accessibilityLabel="Track your package">
        <Text>Track package</Text>
      </Pressable>
    </View>
  );
}

src/screens/OrderStatus.tsx · después

import { Pressable, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';

export function OrderStatus({ onTrack }) {
  const { t } = useTranslation();
  return (
    <View>
      <Text>{t('order_status.your_order_is_on_its')}</Text>
      <Pressable onPress={onTrack} accessibilityLabel="Track your package">
        <Text>{t('order_status.track_package')}</Text>
      </Pressable>
    </View>
  );
}

locales/en.json

{
  "order_status": {
    "your_order_is_on_its": "Your order is on its way",
    "track_package": "Track package"
  }
}

Lo que añade la configuración

La primera ejecución configura react-i18next si el proyecto aún no lo tiene:

i18next y react-i18next
src/i18n.ts, importado desde app/_layout, App o index

Ejecutarlo

La CLI necesita Node.js 22 o posterior.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

O añade la GitHub Action y obtén una pull request en cada push. Pruébalo primero en tu propio código en el playground.