Expo
Expo utiliza el mismo adaptador de React que React web.
No existe un paquete separado @better-translate/react-native.
1. Instala los paquetes
npm install @better-translate/core @better-translate/react2. Crea el traductor
Crea lib/i18n.ts:
ts
1import { configureTranslations } from "@better-translate/core";23const en = {4 home: {5 title: "Hello from Expo",6 },7} as const;89const es = {10 home: {11 title: "Hola desde Expo",12 },13} as const;1415export const translator = await configureTranslations({16 availableLocales: ["en", "es"] as const,17 defaultLocale: "en",18 fallbackLocale: "en",19 messages: { en, es },20});3. Envuelve la app
Crea o actualiza App.tsx:
tsx
1import { BetterTranslateProvider } from "@better-translate/react";23import { HomeScreen } from "./components/home-screen";4import { translator } from "./lib/i18n";56export default function App() {7 return (8 <BetterTranslateProvider translator={translator}>9 <HomeScreen />10 </BetterTranslateProvider>11 );12}4. Usa las traducciones en una pantalla
Crea components/home-screen.tsx:
tsx
1import { Button, Text, View } from "react-native";23import { useTranslations } from "@better-translate/react";45import { translator } from "../lib/i18n";67export function HomeScreen() {8 const { locale, setLocale, t } = useTranslations<typeof translator>();910 return (11 <View style={{ gap: 12, padding: 24 }}>12 <Text>{t("home.title")}</Text>13 <Button14 title={locale === "en" ? "Spanish" : "English"}15 onPress={() => setLocale(locale === "en" ? "es" : "en")}16 />17 </View>18 );19}Modelo mental
@better-translate/corees el propietario de los datos de traducción@better-translate/reactproporciona a Expo el proveedor y el hook
Esa es la configuración completa para la mayoría de las apps de Expo.
Genera archivos de locale automáticamente
En lugar de escribir cada traducción a mano, usa el CLI para extraer cadenas y generar archivos de locale: Guía del CLI