| name | expo |
| description | Expo and React Native integration guide using Better Translate React support. |
Expo Skill
Use this guide when the app is Expo or React Native.
Correct package combination
- required:
@better-translate/core
- required:
@better-translate/react
There is no separate native adapter package.
Correct integration
- Create the translator with
@better-translate/core
- Wrap the app with
BetterTranslateProvider
- Use
useTranslations() inside screens and components
Keep TypeScript autocomplete available
The simplest no-extra-generic setup is to bind the translator once and export an
app-local provider + hook pair.
Pattern 1: createBetterTranslateReact(translator)
import { createBetterTranslateReact } from "@better-translate/react";
import { translator } from "./i18n";
export const { BetterTranslateProvider, useTranslations } =
createBetterTranslateReact(translator);
Then screens can import your app-local hook:
import { useTranslations } from "./i18n";
export function HomeScreen() {
const { t } = useTranslations();
return <Text>{t("home.title")}</Text>;
}
These fallback patterns still work in Expo too.
Pattern 2: explicit generic
import { useTranslations } from "@better-translate/react";
import { translator } from "./i18n";
export function HomeScreen() {
const { t } = useTranslations<typeof translator>();
return <Text>{t("home.title")}</Text>;
}
Pattern 3: module augmentation for zero-arg useTranslations()
Create src/better-translate.d.ts:
import { translator } from "./i18n";
declare module "@better-translate/react" {
interface BetterTranslateReactTypes {
translator: typeof translator;
}
}
Then components can call useTranslations() directly and keep key autocomplete.
Important rule
Do not look for @better-translate/react-native.
Expo support lives inside @better-translate/react.
When to change packages
Only add more packages if the app actually needs them:
- add
@better-translate/md for localized content files
- add
@better-translate/cli for generated locale files