Verify ankurah-virtual-scroll behavioral parity with react/leptos templates

[dnorman]

Context

The RN template uses ankurah-virtual-scroll 0.9.0 via the same macro invocation as the react (wasm) and leptos (native) templates:

// rn-bindings/src/lib.rs — identical to ankurah-react-sled-template/wasm-bindings/src/lib.rs
generate_scroll_manager!(Message, MessageView, MessageLiveQuery, timestamp_field = "timestamp");

So the underlying algorithm is shared and structural parity is confirmed. BUFFER_FACTOR (2.0) and DEFAULT_VIEWPORT_HEIGHT (600) match all three; the only config difference is MIN_ROW_HEIGHT = 57 (RN, points) vs 40 (web, px), which is an intentional platform tuning.

What has not been verified is behavioral parity of the RN integration layer, which is necessarily hand-written per platform: RN uses a ScrollView + onLayout visible-ID measurement + maintainVisibleContentPosition, whereas the web templates use DOM getBoundingClientRect. So far only basic rendering is confirmed (the 100-message "Scroll Test" seed room displays in Live mode).

Scenarios to verify

Run against the "Scroll Test" seed room (100 numbered messages) on the iPhone 16 simulator:

1. Backward pagination — scroll up through all 100 messages; confirm history pages in with no stalls, gaps, or duplicated rows, and that hasMorePreceding / mode transitions match the web templates.
2. Anchor stability on prepend — when pagination loads older messages, the currently-visible message must stay in the same viewport position (no jump). (The automated test for this is tracked in Create meaningful Maestro scroll anchor test #2.)
3. Forward pagination + return to Live — scroll back down; confirm forward paging and that the intersection/anchor hand-off returns the manager to Live/auto-scroll mode (and "Jump to Current" hides appropriately).
4. RN driving-layer correctness — the RN app computes visible first/last message IDs from onLayout measurements rather than the DOM; confirm those IDs stay correct across fast scrolls and viewport-height (onLayout) changes.
5. Side-by-side vs react/leptos — run the same scroll sequence in the react (or leptos) template and compare paging thresholds/behavior for any divergence.
6. MIN_ROW_HEIGHT tuning — validate 57pt is a good approximation of the actual RN row height (mis-tuning skews buffer sizing and trigger thresholds).

References

• Related: Create meaningful Maestro scroll anchor test #2 (meaningful Maestro scroll-anchor test) is the automated test for scenario 2.
• Generation: rn-bindings/src/lib.rs; reference: ankurah-react-sled-template/wasm-bindings/src/lib.rs, ankurah-leptos-template/leptos-app/src/{chat,message_list}.rs.
• Driving layer: react-app/src/components/Chat.tsx.