From f856dc93694db203a2453bc5f6f76fdf72969560 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Wed, 19 Aug 2026 20:19:19 +0000 Subject: [PATCH] feat(ui): accept optional lng on YouVersionProvider Hosts can set bundled UI copy instead of following the browser locale. When lng is set, skip navigator language detection so Expo can pass its provider locale through the WebView (YPE-5119, unblocks YPE-4820). --- .changeset/ype-5119-provider-lng.md | 5 +++ docs/i18n-guidelines.md | 12 ++++++ packages/ui/README.md | 8 ++++ .../components/YouVersionProvider.test.tsx | 38 +++++++++++++++++ .../ui/src/components/YouVersionProvider.tsx | 42 ++++++++++++------- packages/ui/src/i18n/index.test.ts | 34 +++++++++++++++ packages/ui/src/i18n/index.ts | 17 +++++--- packages/ui/src/index.ts | 2 +- 8 files changed, 136 insertions(+), 22 deletions(-) create mode 100644 .changeset/ype-5119-provider-lng.md diff --git a/.changeset/ype-5119-provider-lng.md b/.changeset/ype-5119-provider-lng.md new file mode 100644 index 00000000..b19ca535 --- /dev/null +++ b/.changeset/ype-5119-provider-lng.md @@ -0,0 +1,5 @@ +--- +'@youversion/platform-react-ui': minor +--- + +Add an optional `lng` prop on `YouVersionProvider` so a host can set UI language instead of always following the browser locale. diff --git a/docs/i18n-guidelines.md b/docs/i18n-guidelines.md index 54a8b374..c19b2dd4 100644 --- a/docs/i18n-guidelines.md +++ b/docs/i18n-guidelines.md @@ -58,6 +58,18 @@ const { t } = useTranslation(undefined, { i18n }); Never hardcode user-facing text in JSX attributes (`aria-label`, `title`, `placeholder`, `alt`) or visible copy. +## Host-set language + +By default the UI language follows `navigator.languages`. Pass `lng` on `YouVersionProvider` to set it explicitly — for example the React Native Expo SDK forwarding its `locale` into a WebView: + +```tsx + + + +``` + +Regional tags such as `es-MX` resolve to a bundled locale (`es`). Unsupported tags fall back to English. Omit `lng` to keep browser detection. No new translation keys are needed for this; existing bundles (including Spanish `verseOfTheDay`) are used as-is. + ## Local checks ```bash diff --git a/packages/ui/README.md b/packages/ui/README.md index 39af9d7e..b886a811 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -41,6 +41,14 @@ function App() { } ``` +Optional `lng` sets bundled UI copy (Verse of the Day heading, buttons, etc.) instead of following the browser language. Regional tags like `es-MX` resolve to a bundled locale: + +```tsx + + + +``` + ## Styling All component CSS is automatically injected when you wrap your app with `YouVersionProvider` — no extra imports or build steps needed. Under the hood, it uses React 19's [`