Manages internationalization strings and translation workflows using i18next and react-i18next. Use when adding new text, supporting additional languages, or implementing pluralization and interpolation in Purrsuit Mobile App.
This skill handles the internationalization (i18n) workflow for the Purrsuit Mobile App, ensuring type-safe translations and consistent language support.
Use this skill when you need to:
Translations are stored in app/i18n/ with one file per language (e.g., en.ts, ja.ts).
// 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
translate HelperUse the standalone translate function for non-component logic:
import { translate } from "@/i18n"
const title = translate("homeScreen:title")
const message = translate("homeScreen:deleteAlertMessage", { petType: "cat" })
tx PropMany components support a tx prop for automatic translation:
<Text tx="homeScreen:title" preset="heading" />
<Button tx="common:ok" onPress={handlePress} />
useTranslation HookFor complex cases or dynamic content:
import { useTranslation } from "react-i18next"
const { t } = useTranslation()
return <Text>{t("homeScreen:title")}</Text>
Keys: greeting: "Hello, {{name}}!"
Usage: translate("greeting", { name: "Mirza" })
Keys:
pet_one: "{{count}} pet"
pet_other: "{{count}} pets"
Usage: translate("pet", { count: 5 })
We use TxKeyPath to ensure keys exist at compile time.
Format: section:key for top level, section:nested.key for deeper levels.
See TRANSLATION_STRUCTURE.md for detailed file patterns.
See I18N_BEST_PRACTICES.md for naming conventions and workflow steps.