jralvarenga/expo

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

1. Create the translator with @better-translate/core
2. Wrap the app with BetterTranslateProvider
3. 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