Expo

Expo uses the same React adapter as web React.

There is no separate @better-translate/react-native package.

1. Install the packages

npm install @better-translate/core @better-translate/react

2. Create the translator

Create lib/i18n.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. Wrap the app

Create or update 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. Use translations in a screen

Create 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}

Mental model

@better-translate/core owns the translation data
@better-translate/react gives Expo the provider and hook

That is the full setup for most Expo apps.

Generate locale files automatically

Instead of writing every translation by hand, use the CLI to extract strings and generate locale files: CLI guide

Examples

expo-example