Minimal reproduction — zero third-party dependencies on main — of a
React Native iOS (New Architecture) bug: when the user changes the Dynamic
Type size while the app is running, already-rendered <Text> keeps its
stale line breaks and box heights while glyphs draw at the new scale. Lines
run past the right edge of the screen and are clipped. onTextLayout keeps
reporting the stale (fitting) line widths, so the overflow is undetectable
from JS. Relaunching the app at the same Dynamic Type size renders the
identical tree correctly. Android is unaffected.
Related: react/react-native#45857 (stale cached text measurements, fixed via #45978), react/react-native#45655 (no re-render on font scale change). Still reproduces on React Native 0.86.0.
npm install
npx expo run:ios --configuration Release
# launch at default text size — renders correctly, then:
xcrun simctl ui booted content_size extra-extra-large
# → paragraphs overflow the red right-edge hairline with stale line breaks,
# both cards clip to a single line, banner still says "0 overflowing"
# kill + relaunch → identical tree renders correctly at fontScale 1.235The app self-reports: each paragraph compares its onTextLayout line widths
against its own Yoga box width (onLayout), and the banner shows the current
fontScale plus the count of overflowing paragraphs. After the runtime change
the banner's "0 overflowing" is a false negative — that stale measurement
is part of the bug.
| Fresh launch @ default | Runtime change to XXL | Relaunch @ XXL |
|---|---|---|
| correct | stale wrap, clipped lines, "0 overflowing" | correct |
main— plain React Native only (no third-party dependencies).with-reanimated— the same screen with the cards wrapped inreact-native-reanimatedAnimated.Views (mirrors the production layout where this was first observed). Reproduces identically.
All repro-relevant structure lives in App.tsx.