Repository navigation
Incorrect font scaling with adjustsFontSizeToFitWidth #52642
Description
Activity
i have same question ("react-native": "0.76.9")
Reacted by Alexander Vakrilov, Napas (Tian) Udomsak, Yifei Wang and dazexiaoxixiI have the same problem in iOS with RN 0.78.0.
#50248 has a patch fixing the minimumFontScale props. But it is not fixing the problem that some text would be rendered with a shrunk font.Running into this also
I've been seeing something similar as well; the line breaks are happening seemingly at random. This is on iOS:
I have the issue only when new architecture is enabled. (react-native 0.79.6)
I found that the issue is triggered when the actual height of the text component is slightly smaller than the line height (thanks to @vakrilov for his initial investigation). For example, in my case I have a text component with line height set to 22. But the actual height returned by
onLayoutis 21.999998092651367.In the source code, text font size is scaled by scaleFontSizeToFitSize. It calls compareToSize internally to determine whether to scale the font size up or down.
compareToSizecompares the available size and measured size to find out if the text fits the space(see this line). However,measuredSize.heightis always same as the line height no matter whether the font size is scaled or not. Therefore,size.height >= measuredSize.heightis always false and the font size is scaled down to the minimum size.In the current implementation, height is not handled in the same way as width. For example, line height is never scaled, and the
thresholdSizeis only applied to width see code. This might be intentionally as in the most cases, we want to scale down the text when it's too wide.As a temporary fix, I patched
compareToSizeto not check height. There probably are better ways to fix it, but I think it's acceptable as a workaround. It doesn't changes the existing behaviours while fixing the issue, for example:- Text is still scaled down properly when it is too wide
allowFontScalingworks normally. Font scales to respect Text Size accessibility settings.- Font is not scaled down if line height is smaller than font size. (e.g.
{ lineHeight: 10; fontSize:15 }) This is rare and the behaviour is unchanged. - Font is not scaled up beyond the specified font size in any situation which lines up the documentation
adjustsFontSizeToFit
Specifies whether fonts should be scaled down automatically to fit given style constraints.diff --git a/node_modules/react-native/Libraries/Text/Text/NSTextStorage+FontScaling.m b/node_modules/react-native/Libraries/Text/Text/NSTextStorage+FontScaling.m index c92b2e9..ef664cd 100644 --- a/node_modules/react-native/Libraries/Text/Text/NSTextStorage+FontScaling.m +++ b/node_modules/react-native/Libraries/Text/Text/NSTextStorage+FontScaling.m @@ -88,7 +88,7 @@ typedef NS_OPTIONS(NSInteger, RCTTextSizeComparisonOptions) { CGSize measuredSize = [layoutManager usedRectForTextContainer:textContainer].size; // Does it fit the size? - BOOL fitsSize = size.width >= measuredSize.width && size.height >= measuredSize.height; + BOOL fitsSize = size.width >= measuredSize.width; CGSize thresholdSize = (CGSize){ size.width * thresholdRatio,```
Reacted by Stefan Parker, Joshua Baker and a-klotz-p8Reacted by Alexander VakrilovReacted by tvillafaneHas there been any follow-up resolution to this issue? I'm encountering a similar problem on iOS version 0.77.1.
Reacted by dazexiaoxixi, njuhasz, Yifei Wang, Min Hu and Abdullah Al-araj@vakrilov It would be nice if you update the issue title; while native iOS uses
adjustsFontSizeToFitWidth, the React Native prop isadjustsFontSizeToFit(which is the term you use in the issue description, but the title has an incorrectadjustsFontSizeToFitWidthterm)Reacted by Peter Marinov (Pete) and Min Hu👋 We're also hitting this on 0.81.4, as a temporary workaround we're checking if the height of the text is less than the lineHeight we want to apply and set a smaller lineHeight via native props.
We do have a custom Text wrapper so this applies to all of the Texts within the app
pseudo full code
useLayoutEffect(() => { const calculatedLineHeight = textStyles.calculatedLineHeight if (!props.adjustsFontSizeToFit || calculatedLineHeight === undefined) { return } nativeTextRef.current?.measure((_x, _y, _width, height) => { if (calculatedLineHeight - height > 0) { const nextLineHeight = height - LineHeightEpsilon nativeTextRef.current?.setNativeProps({ style: { lineHeight: nextLineHeight }, }) } }) }, [textStyles.calculatedLineHeight, props.adjustsFontSizeToFit])
Reacted by Taylor Kline, Niklas Haug and Antony SandeBOOL fitsSize = size.width >= measuredSize.width;
This did it for me, thank you @Yupeng-li !
Still an issue on RN 0.83.2
Thankfully the patch from @Yupeng-li fixed this. Why this seemingly still has not been resolved, I can not understand...Reacted by ChristophI tried the patch mentioned above, but that did not seem to eliminate the issue for us, and in some cases made scaling worse for multi-line blocks of text. The only thing that has worked for our case was simply to delete the lineHeight property selectively:
if (adjustsFontSizeToFit && style?.lineHeight) delete style['lineHeight'];In our case, we have a text wrapper
<InlineText />and pass props to it as if it were<Text />(such as adjustsFontSizeToFit and style). We've used this wrapper for other reasons in the past, but this way we can also still easily use lineHeight in areas we don't scale text size.Reproduced this independently in a production app (React Native 0.83.6 and 0.86.2, Expo SDK 55 & 57, New Architecture/Fabric, iOS), in a different UI shape from the Snack repro above, which suggests this isn't specific to a particular layout pattern.
Setup: a horizontally-wrapping grid of ~28 rounded "chip" Text views (3 per row), each using numberOfLines={1}, adjustsFontSizeToFit, minimumFontScale={0.7}, and an explicit lineHeight — all mounted simultaneously in a single commit (they arrive together from a single async data load, not added one at a time).
Symptom: a small, consistent subset of chips render with drastically smaller text than minimumFontScale should ever allow — well below the configured floor. It's content-independent: short, ordinary words are just as likely to be affected as long ones, and swapping in completely different text (different data set, same shape) reproduces the same pattern at a similar position, matching this issue's report that specific elements (e.g. "2nd and 7th") are affected regardless of their content.
Additional data point via Xcode's view debugger: for one of the affected nodes, I compared its native RCTParagraphComponentView frame against a working neighbor's. The affected node's measured frame/bounds looked completely normal — sized proportionally to its word length, with the intended (unshrunk) lineHeight, just like the working neighbor — yet the painted glyphs were visibly much smaller than that measured frame would suggest. That implies the layout/measurement pass and the actual paint pass are out of sync for the affected node specifically, rather than the shrink computation itself producing a "wrong number." That may narrow down where in RCTTextLayoutManager / the Fabric mounting layer to look.
Also notable: once a specific chip renders with the wrong (tiny) scale, it keeps that wrong scale even after being repositioned within the same mount (e.g. removing earlier items and letting it reflow to a new row) — the corruption seems tied to the specific native view/mount rather than being recomputed from its current position. A full unmount/remount of the whole grid can reproduce the same symptom again on the next simultaneous-commit load.
Not sure if this is the same root cause as #50248 / react/react-native#58492 (the minimumFontScale-ignored-on-Fabric fix) — that would explain shrinking below the floor once a shrink happens, but doesn't obviously explain the measured-frame-vs-painted-glyph mismatch above. Happy to provide a minimal repro project if useful.
That one looks promising, it has been merged last week: #58492
- added 2 commits that reference this issue
on Oct 7, 2026
Description
Sometimes
<Text>element that has bothlineHeightandadjustsFontSizeToFitsometimes shrinks the text even if there is enough place for it to be rendered.It seems to happen when there is a fractional height separator in the layout.
There seem to be two problems:
minimumFontScaleseems not to be respectedSteps to reproduce
Here is minimal repro code of the app (also available in the expo snack)
When running the app the 2nd and 7th text element seem to be wrongly scaled (changing the number of element, the height of the separator or even fast-refresh seem to alter which elements are scaled incorrectly).
React Native Version
0.79.5
Affected Platforms
Runtime - iOS
Output of
npx @react-native-community/cli infoStacktrace or Logs
MANDATORY Reproducer
https://snack.expo.dev/@vakrilov/0e4781
Screenshots and Videos