YPE-5440 / RNV2-2: Hybrid VerseOfTheDay (native chrome + DOM text) by Dustin-Kelley · Pull Request #183 · youversion/platform-sdk-reactnative-expo

Dustin-Kelley · 2026-09-10T17:26:31Z

Summary

Pilot / canonical hybrid VerseOfTheDay for YPE-5440 / RNV2-2.

Native chrome (Card surface, share button, YouVersion attribution, sun icon, title/reference) wraps the DOM BibleTextView for the verse. Scripture stays in WebView for USFM/HTML/CSS. Public VerseOfTheDay props and exported types are unchanged.

This is the quality gate before Phase 4 bulk: native chrome + Project A primitives + the native↔DOM bridge end to end.

IOS

Android

Hybrid split

Native

Card surface from Project A (Card / Button / Text + tokens)
Share button → React Native Share (or consumer onShare)
YouVersion / Bible App attribution
Title, reference line, sun icon, loading state
Light/dark via useTheme (closes the ADR 0021 VOTD exception — system resolves on native, not inside the WebView)

DOM (unchanged scripture path)

packages/ui/src/dom/bible-text-view.tsx renders the verse
Theme is the resolved light | dark on the in-WebView provider (RNV2-4)
Fonts as encoded props only — no --yv-reader-* CSS
Highlights still native-owned (HighlightsPaint + Controlled Highlights Latch)
Content fetch still fetchBibleContent (no parallel client)

Kept on purpose

packages/ui/src/dom/verse-of-the-day.tsx is not deleted. RNV2-10 removes the full-component wrapper.

How to verify

cd packages/ui
pnpm typecheck
pnpm exec jest --testPathPattern='verse-of-the-day|exports.test'

Layer-3 coverage: render, light/dark tokens + bridge theme, native Share / consumer onShare, embed defaults, and the highlights latch against BibleTextViewDom.

Example app: drop-in — <VerseOfTheDay versionId={3034} /> is the same public API.

Screenshots

Skipped. The VM has no YouVersion app key (apps/example/.env is not present), so a live light/dark capture would not render scripture.

Test plan

UI typecheck
VOTD + exports tests
Full UI package test suite (610 passing)
pnpm lint
Reviewer: example app light/dark + share on a device/simulator with an app key

Greptile Summary

This PR converts VerseOfTheDay into a hybrid component with native presentation around DOM-rendered scripture while preserving its public API.

Adds native card chrome, theming, loading and retry states, attribution, and sharing.
Resolves the daily passage and share source natively while retaining BibleTextViewDom for scripture.
Preserves controlled highlights and forwards provider version filters across the native-to-DOM bridge.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
packages/ui/src/native/verse-of-the-day.tsx	Replaces the full DOM wrapper with native card chrome around BibleTextViewDom and integrates resolved theming, loading, retry, highlights, attribution, and sharing.
packages/ui/src/native/verse-of-the-day-share.ts	Builds filtered native share data while isolating optional version-metadata failures from valid passage responses.
packages/ui/src/native/use-verse-of-the-day-share-source.ts	Loads and caches share data with stale-request protection across passage, version, and filter changes.
packages/ui/src/native/use-verse-of-the-day-passage-id.ts	Exposes passage resolution status and retry behavior for the native loading and failure states.
packages/ui/src/components/ui/text.tsx	Adds the internal eyebrow text variant used by the new native VerseOfTheDay chrome.

Sequence Diagram

sequenceDiagram
  participant App as Consumer App
  participant VOTD as Native VerseOfTheDay
  participant API as Bible Content Client
  participant DOM as BibleTextView DOM
  participant Share as Native Share API
  App->>VOTD: Render props and provider context
  VOTD->>API: Resolve daily passage ID
  API-->>VOTD: Passage ID
  VOTD->>DOM: Passage, resolved theme, filters, highlights
  DOM-->>App: Render scripture in WebView
  VOTD->>API: Load passage text and version metadata
  API-->>VOTD: Share source
  App->>VOTD: Press Share
  VOTD->>Share: Share formatted passage text

_{Reviews (9): Last reviewed commit: "Merge branch 'cursor/hybrid-votd-rnv2-2-..." | Re-trigger Greptile}

RNV2-2. Native Card, share, and YouVersion attribution wrap the DOM BibleTextView so scripture styling stays in WebView. Light/dark resolve on native before they cross the bridge. Share uses the native Share API. Public props are unchanged. The full-component DOM wrapper stays for RNV2-10. Co-authored-by: Dustin Kelley <Dustin-Kelley@users.noreply.github.com>

The share payload came from a separate plain-text fetch, and one failure left the share button disabled and the reference line blank for the life of the mount while the DOM view still painted the verse. The hook now exposes loadShareSource; the button is gated only on the passage id and a press refetches when the background fetch missed. Nothing mounts VerseOfTheDayDom after the hybrid rewrite, so remove its ImplKey and registerDefault. The DOM file stays for RNV2-10. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

bmanquen

Two-axis review (standards + spec vs YPE-5440). Inline comments below mark what must be addressed before merging; everything else found was judgement-call level.

A failed VOTD request left a spinner with Share disabled. Split loading from failure so the card can recover. Co-authored-by: Cursor <cursoragent@cursor.com>

cameronapak

Review

YPE-5440

Summary

Standards: 0 must-fix. Spec: 3 must-fix. Primary concern: native sharing bypasses provider version restrictions.

For Agents

CI: passing

Bot review: clear

Event: REQUEST_CHANGES

HEAD: 9372c1e

Written by Code Reviewer bot on behalf of Cam.

Native share still fetches and builds a payload for excluded, non-permitted, and language-filtered versions. Co-authored-by: Cursor <cursoragent@cursor.com>

Native header and Share fetched a version the DOM verse body would refuse. Share now uses the same permit, exclude, and language rules as the web SDK, with the provider lists as arguments. Co-authored-by: Cursor <cursoragent@cursor.com>

onShare currently fires on Expo web, which changes the public callback from the old DOM wrapper. Co-authored-by: Cursor <cursoragent@cursor.com>

The old wrapper left onShare unset on web so the Web Share flow ran. The hybrid chrome called the host callback on every platform. Co-authored-by: Cursor <cursoragent@cursor.com>

Hybrid VOTD already resolves through useTheme. The ADR still described the old WebView-owned system path. Co-authored-by: Cursor <cursoragent@cursor.com>

cameronapak

Review

YPE-5440

Summary

Standards: 0 must-fix. Spec: 2 must-fix. Primary concern: version restrictions can still be bypassed, and the default web Share flow is now inert.

For Agents

CI: passing

Bot review: clear

Event: REQUEST_CHANGES

HEAD: a246882

Written by Code Reviewer bot on behalf of Cam.

Language allowlists now check version metadata before fetching passage text. In-flight share results also key on the filter lists so a slower permissive request cannot restore a refused header or payload. Co-authored-by: Cursor <cursoragent@cursor.com>

Typecheck failed because renderHook's rerender requires the hook props argument. Match the existing wrapper pattern with rerender(undefined). Co-authored-by: Dustin Kelley <Dustin-Kelley@users.noreply.github.com>

Keep onShare native-only. On web the header still loads share text and uses navigator.share, or the clipboard when that API is missing. Co-authored-by: Cursor <cursoragent@cursor.com>

renderHook.rerender requires an argument under tsconfig.test.json, so the filter-tightening case never typechecked. Co-authored-by: Cursor <cursoragent@cursor.com>

…ouversion/platform-sdk-reactnative-expo into cursor/hybrid-votd-rnv2-2-b0c5

cameronapak

Review

YPE-5440

Summary

Standards: 0 must-fix. Spec: 1 must-fix. Primary concern: an in-flight Share press can send a newly refused version.

For Agents

CI: passing

Bot review: clear

Event: REQUEST_CHANGES

HEAD: fc33ed3

Written by Code Reviewer bot on behalf of Cam.

cameronapak · 2026-09-15T14:04:52Z

+    ) {
+      setResult({ passageId, versionId, filters, data })
+    }
+    return data


issue: A Share press can still send a version that the current filters refuse.

For Agents: reject a stale Share retry

If a press starts loadShareSource under permissive provider filters and those filters tighten before the fetch settles, sameFilters prevents setResult, but this unconditional return data still gives the old payload to handleShare. That handler can then invoke the consumer callback, browser Share, or native Share.share for a now-refused version. Return null when the request snapshot no longer matches currentRef, and test an in-flight Share press after a filter change. The new hook test only checks shareSource state.

Written by Code Reviewer bot on behalf of Cam.

cameronapak · 2026-09-15T14:04:52Z

-  const themeContext = useTheme()
+  const { t } = useSdkTranslation()
+  const resolvedTheme = useTheme(theme ?? background)
  const [sampledDayOfYear] = useState(() => getDayOfYear(new Date()))


praise: Pinning the day when the card mounts keeps the verse and its Share text on the same date across midnight.

For Agents: pinned calendar day

The sampled day feeds native passage resolution and the DOM verse bridge instead of allowing each surface to resolve “today” independently.

Written by Code Reviewer bot on behalf of Cam.

cursoragent and others added 3 commits September 10, 2026 17:26

feat(ui): add eyebrow text variant and update tests

c8b1906

Dustin-Kelley marked this pull request as ready for review September 11, 2026 16:25

Dustin-Kelley requested a review from cameronapak September 11, 2026 16:25

greptile-apps Bot reviewed Sep 11, 2026

View reviewed changes

Comment thread packages/ui/src/native/verse-of-the-day-share.ts

feat(ui): enhance VOTD share functionality with improved error handling

6cb933b

bmanquen reviewed Sep 11, 2026

View reviewed changes

Comment thread packages/ui/src/native/verse-of-the-day.tsx Outdated

Comment thread packages/ui/src/native/verse-of-the-day.tsx Outdated

Comment thread packages/ui/src/native/verse-of-the-day.tsx

fix(ui): retry Verse of the Day after a failed lookup

9372c1e

A failed VOTD request left a spinner with Share disabled. Split loading from failure so the card can recover. Co-authored-by: Cursor <cursoragent@cursor.com>

cameronapak requested changes Sep 11, 2026

View reviewed changes

Comment thread packages/ui/src/native/verse-of-the-day-share.ts

Comment thread packages/ui/src/native/verse-of-the-day-share.ts

cameronapak reviewed Sep 11, 2026

View reviewed changes

Comment thread packages/ui/src/native/verse-of-the-day.tsx

Dustin-Kelley and others added 5 commits September 14, 2026 11:01

test(ui): cover VOTD share against version filter lists

1be5938

Native share still fetches and builds a payload for excluded, non-permitted, and language-filtered versions. Co-authored-by: Cursor <cursoragent@cursor.com>

test(ui): keep VerseOfTheDay onShare native-only

b7c19ac

onShare currently fires on Expo web, which changes the public callback from the old DOM wrapper. Co-authored-by: Cursor <cursoragent@cursor.com>

fix(ui): keep VerseOfTheDay onShare native-only

b6deb3b

The old wrapper left onShare unset on web so the Web Share flow ran. The hybrid chrome called the host callback on every platform. Co-authored-by: Cursor <cursoragent@cursor.com>

docs(adr): drop the VerseOfTheDay theme exception from 0021

a246882

Hybrid VOTD already resolves through useTheme. The ADR still described the old WebView-owned system path. Co-authored-by: Cursor <cursoragent@cursor.com>

Dustin-Kelley requested review from bmanquen and cameronapak September 14, 2026 16:46

cameronapak requested changes Sep 14, 2026

View reviewed changes

Comment thread packages/ui/src/native/verse-of-the-day.tsx Outdated

Comment thread packages/ui/src/native/use-verse-of-the-day-share-source.ts Outdated

Comment thread packages/ui/src/native/__tests__/verse-of-the-day-share.test.ts

Dustin-Kelley and others added 2 commits September 15, 2026 08:19

fix(ui): pass props when rerendering the VOTD share-source hook

9b6a4b1

Typecheck failed because renderHook's rerender requires the hook props argument. Match the existing wrapper pattern with rerender(undefined). Co-authored-by: Dustin Kelley <Dustin-Kelley@users.noreply.github.com>

Dustin-Kelley requested a review from cameronapak September 15, 2026 13:26

Dustin-Kelley and others added 3 commits September 15, 2026 08:29

fix(ui): restore VerseOfTheDay web share

4ebe381

Keep onShare native-only. On web the header still loads share text and uses navigator.share, or the clipboard when that API is missing. Co-authored-by: Cursor <cursoragent@cursor.com>

test(ui): pass props to share-source hook rerender

cb52f2d

renderHook.rerender requires an argument under tsconfig.test.json, so the filter-tightening case never typechecked. Co-authored-by: Cursor <cursoragent@cursor.com>

Merge branch 'cursor/hybrid-votd-rnv2-2-b0c5' of https://github.com/y…

fc33ed3

…ouversion/platform-sdk-reactnative-expo into cursor/hybrid-votd-rnv2-2-b0c5

cameronapak requested changes Sep 15, 2026

View reviewed changes

Navigation Menu

Uh oh!

YPE-5440 / RNV2-2: Hybrid VerseOfTheDay (native chrome + DOM text) - #183

YPE-5440 / RNV2-2: Hybrid VerseOfTheDay (native chrome + DOM text)#183
Dustin-Kelley wants to merge 15 commits into
mainfrom
cursor/hybrid-votd-rnv2-2-b0c5

Dustin-Kelley commented Sep 10, 2026 •

edited by greptile-apps Bot

Loading

Uh oh!

Uh oh!

bmanquen left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cameronapak left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cameronapak left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cameronapak left a comment

Uh oh!

cameronapak Sep 15, 2026

Uh oh!

cameronapak Sep 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

Dustin-Kelley commented Sep 10, 2026 • edited by greptile-apps Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Hybrid split

How to verify

Screenshots

Test plan

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Sequence Diagram

Uh oh!

Uh oh!

bmanquen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cameronapak left a comment

Choose a reason for hiding this comment

Review

Summary

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cameronapak left a comment

Choose a reason for hiding this comment

Review

Summary

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cameronapak left a comment

Choose a reason for hiding this comment

Review

Summary

Uh oh!

cameronapak Sep 15, 2026

Choose a reason for hiding this comment

Uh oh!

cameronapak Sep 15, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Dustin-Kelley commented Sep 10, 2026 •

edited by greptile-apps Bot

Loading