Text visually truncated mid-word despite correct onLayout/onTextLayout measurement
まだ誰も着手していません。
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
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:
onLayoutsometimes reports a height that doesn't matchonTextLayout's
own measured content — either a tiny fractional value (e.g.
479.99993896484375instead of exactly480), or a value roughly one
whole line taller than whatonTextLayoutitself measured as needed
(e.g. container288/12 lines vs text measured at264/11 lines).onTextLayout, for the exact same text and style, can report a
differentlines.lengthbetween two mounts, with the container width
strictly constant.- Despite
onTextLayoutreporting 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, coreFlatList, and a plainScrollView. - Custom fonts: reproduces identically with the system font (no
fontFamilyset at all). - Special characters: reproduces with plain ASCII English text, no accents,
no quotation marks, periods only. - Insufficient container height:
onLayoutsometimes reserves more
height thanonTextLayoutmeasured as necessary, and the text is still
visually truncated. - A component remount (
keychange): 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
- Clone the reproducer: https://github.com/Ge0ffreyS/rn-font-issue
npm install && npx expo run:ios- The app renders ~150 numbered paragraphs on load. Watch the Metro
console for[REPRO] onLayout ... <<< SUSPECTlog lines and look at the
screen for a paragraph whose text stops mid-word with blank space below
it. - 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
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
リンクされている rn-font-issue の reproducer とその README から始め、npm install && npx expo run:ios を実行して、Metro の [REPRO] ログを調べます。視覚的な切り詰めを再現しながら、onLayout と onTextLayout の測定値を比較します。影響を受けるプラットフォームで、報告された相違なしに段落全体が表示されれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- android, ios, react-native
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 活発さ
- 活発
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 32/100