Text visually truncated mid-word despite correct onLayout/onTextLayout measurement

Description

A multi-line <Text> inside a list (FlatList, @shopify/flash-list, or even a plain ScrollView) is sometimes visually truncated mid-word, even though onLayout / onTextLayout report a correct and complete measurement for the same text.

Evidence gathered from a minimal, isolated repro:

• onLayout sometimes reports a height that doesn't match onTextLayout's own measured content — either a tiny fractional value (e.g. 479.99993896484375 instead of exactly 480), or a value roughly one whole line taller than what onTextLayout itself measured as needed (e.g. container 288/12 lines vs text measured at 264/11 lines).
• onTextLayout, for the exact same text and style, can report a different lines.length between two mounts, with the container width strictly constant.
• Despite onTextLayout reporting the correct, complete text (including its exact final characters), the visual render sometimes stops mid-word, with blank space left where the missing text should be — a divergence between a correct measure pass and an incomplete native paint pass.

This was first found in a production app and then isolated down to a minimal case. The following were tested and ruled out as the cause:

• Any specific list component: reproduces identically with @shopify/flash-list, core FlatList, and a plain ScrollView.
• Custom fonts: reproduces identically with the system font (no fontFamily set at all).
• Special characters: reproduces with plain ASCII English text, no accents, no quotation marks, periods only.
• Insufficient container height: onLayout sometimes reserves more height than onTextLayout measured as necessary, and the text is still visually truncated.
• A component remount (key change): the bug survives a full remount.
• A text-measurement cache keyed by content: making every occurrence of a repeated paragraph textually unique did not spread the bug to more occurrences.

The bug is intermittent and appears to depend on rendering context (surrounding items, timing) rather than the text content or any specific component — the exact same paragraph text reproduces at one list position and not another, and moving it to a different position moves the reproduction with it.

Steps to reproduce

1. Clone the reproducer: https://github.com/Ge0ffreyS/rn-font-issue
2. npm install && npx expo run:ios
3. The app renders ~150 numbered paragraphs on load. Watch the Metro console for [REPRO] onLayout ... <<< SUSPECT log lines and look at the screen for a paragraph whose text stops mid-word with blank space below it.
4. If it doesn't reproduce on first load, reload the app a few times (Cmd+R in the simulator) — it's intermittent. A "Scroll to bottom" button is provided to check paragraphs further down the list.

Full isolation-testing notes and commit-by-commit findings are in the repo's README.

React Native Version

0.86.2

Affected Platforms

Runtime - iOS, Android

This minimal repro was tested on iOS (simulator). The underlying text truncation was also observed on Android (16 / API 36) with the same fontSize/lineHeight in the production app this repro was extracted from, though not exhaustively isolated there.

Environment

OS: macOS 26.6.1
Node: 22.23.2
expo: ~57.0.12
react: 19.2.3
react-native: 0.86.2

(npx react-native info doesn't run standalone in this Expo-managed repro; the versions above are read directly from package.json.)

Stacktrace or Logs

[REPRO] onTextLayout lineCount=11 height=264 lastLineText="...This is repeat number 1." text="18. A former head chef says th..."
[REPRO] onLayout height=287.999755859375 text="18. A former head chef says th..."  <<< SUSPECT

onTextLayout measured 11 lines (264px, correct, complete text) but the container (onLayout) reserved 288px (12 lines) — a full line more than what was measured as necessary — and the paragraph is visually cut off mid-word regardless.

Reproducer

https://github.com/Ge0ffreyS/rn-font-issue