chore: implement i18next

.changeset/add-i18next-support.md

@@ -0,0 +1,5 @@
+---
+"@youversion/platform-react-ui": minor
+---
+
+Add i18next internationalization support with one extractable string ("Verse of The Day"). i18next and react-i18next are optional peer dependencies so existing consumers are unaffected. The SDK creates an isolated i18next instance (no global singleton mutation) and falls back to English by default.

.gitignore

@@ -57,6 +57,7 @@ yarn-error.log*
 
 # Claude Code
 .claude/
+.omc/
 
 # Storybook
 *storybook.log

packages/ui/package.json

@@ -57,8 +57,18 @@
     "tw-animate-css": "1.4.0"
   },
   "peerDependencies": {
+    "i18next": ">=26.0.0",
     "react": ">=19.1.0 <20.0.0",
-    "react-dom": ">=19.1.0 <20.0.0"
+    "react-dom": ">=19.1.0 <20.0.0",
+    "react-i18next": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "i18next": {
+      "optional": true
+    },
+    "react-i18next": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@internal/eslint-config": "workspace:*",

packages/ui/src/components/verse-of-the-day.tsx

@@ -6,6 +6,8 @@ import {
   useVersion,
 } from '@youversion/platform-react-hooks';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
+import i18n from '@/i18n';
 import { AnimatedHeight } from '@/components/animated-height';
 import { BibleAppLogoLockup } from '@/components/bible-app-logo-lockup';
 import { LoaderIcon } from '@/components/icons/loader';
@@ -89,6 +91,7 @@ export function VerseOfTheDay({
   showBibleAppAttribution = true,
   size = 'default',
 }: VerseOfTheDayProps): React.ReactElement {
+  const { t } = useTranslation(undefined, { i18n });
   const day = React.useMemo(() => dayOfYear || getDayOfYear(new Date()), [dayOfYear]);
   const verseRef = React.useRef<HTMLDivElement>(null);
   const { data, loading: loadingVerseOfTheDay, error: errorVerseOfTheDay } = useVerseOfTheDay(day);
@@ -147,7 +150,7 @@ export function VerseOfTheDay({
               'trim-both yv:line-clamp-1 yv:text-muted-foreground yv:uppercase yv:text-xs yv:font-medium yv:select-none'
             }
           >
-            Verse of The Day
+            {t('verseOfTheDay')}
           </p>
         </div>
         {showShareButton ? (

packages/ui/src/i18n/index.ts

@@ -0,0 +1,27 @@
+import i18next, { type i18n as I18nInstance } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import en from './locales/en.json';
+
+const defaultNS = 'translation';
+
+export const resources = {
+  en: { [defaultNS]: en },
+} as const;
+
+const i18n: I18nInstance = i18next.createInstance();
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    defaultNS,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // React already escapes
+    },
+  })
+  .catch((err: unknown) => {
+    console.error('[youversion-sdk] i18n initialization failed:', err);
+  });
+
+export default i18n;

packages/ui/src/i18n/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "verseOfTheDay": "Verse of The Day"
+}