React Native I18N Workflow

React Native i18n Workflow

This skill handles the internationalization (i18n) workflow for the Purrsuit Mobile App, ensuring type-safe translations and consistent language support.

When to Use This Skill

Use this skill when you need to:

• Add new translatable strings to the app
• Support a new language
• Implement interpolation (e.g., "Hello {{name}}!")
• Use pluralization in translations
• Handle RTL (Right-to-Left) language detection and layout
• Ensure type safety for translation keys

Translation Files

Translations are stored in app/i18n/ with one file per language (e.g., en.ts, ja.ts).

English (Source) Pattern

// app/i18n/en.ts
const en = {
  common: {
    ok: "OK!",
    cancel: "Cancel",
  },
  homeScreen: {
    title: "My Collection",
    deleteAlertMessage: "Delete this {{petType}} encounter?",
  }
}
export default en
export type Translations = typeof en

Using Translations

1. The translate Helper

Use the standalone translate function for non-component logic:

import { translate } from "@/i18n"

const title = translate("homeScreen:title")
const message = translate("homeScreen:deleteAlertMessage", { petType: "cat" })

2. The tx Prop

Many components support a tx prop for automatic translation:

<Text tx="homeScreen:title" preset="heading" />
<Button tx="common:ok" />

3. The useTranslation Hook

For complex cases or dynamic content:

import { useTranslation } from "react-i18next"

const { t } = useTranslation()
return <Text>{t("homeScreen:title")}</Text>

Advanced Patterns

Interpolation

Keys: greeting: "Hello, {{name}}!" Usage: translate("greeting", { name: "Mirza" })

Pluralization

Keys: pet_one: "{{count}} pet" pet_other: "{{count}} pets" Usage: translate("pet", { count: 5 })

Key Path Types

We use TxKeyPath to ensure keys exist at compile time. Format: section:key for top level, section:nested.key for deeper levels.

References

See TRANSLATION_STRUCTURE.md for detailed file patterns.

See I18N_BEST_PRACTICES.md for naming conventions and workflow steps.