Hacktoberfest 2026：維護者為十月標記出來的 issue，仍然開放、適合新手。 瀏覽 Hacktoberfest issue

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

未關閉
  • 哪裡不對？
#57,920 2 則留言 2 個 reaction 已指派 0 人 在 GitHub 檢視

維護者通常 1 天內回覆

@Ge0ffreyS 已經在處理了。

開始於 2026年8月26日。

  • #2011 來自 @Ge0ffreyS —— 未關閉

評估

難度
5/5
預估耗時
一週以上
新手友好度
32/100
Issue 類型
缺陷
描述清晰度
基本清楚
活躍度
活躍
技術堆疊
android, ios, react-native
領域
mobile

研究方向

先從連結的 rn-font-issue reproducer 及其 README 開始，然後執行 npm install && npx expo run:ios 並檢查 Metro 的 [REPRO] 記錄。在重現視覺截斷的同時，比較 onLayout 和 onTextLayout 的測量結果。當段落在受影響的平台上完整呈現，且不存在所報告的差異時，即表示完成。

由索引模型根據 Issue 內容生成。

描述

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

主要語言
C++
星號
127k
分支
25.3k
30 天內沒有已合併 PR

環境準備

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

react/react-native 的其他 Issue

查看 react/react-native 的全部 Issue

相似的 Issue

更多 C++ Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。