Incorrect font scaling with adjustsFontSizeToFitWidth

Description

Sometimes <Text> element that has both lineHeight and adjustsFontSizeToFit sometimes 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:

The font is scaled although there is enough space for the text to be rendered with the original font-size
minimumFontScale seems not to be respected

Steps 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).

import { SafeAreaView, StyleSheet, Text, View } from "react-native";

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 12,
    lineHeight: 20,
    width: 200,
  },
  separator: {
    height: 0.5,
    width: 200,
    backgroundColor: "green",
  },
});

const Test = () => (
  <Text
    style={styles.text}
    numberOfLines={1}
    adjustsFontSizeToFit
    minimumFontScale={0.8}
  >
    XXXXXXXXX
  </Text>
);

export default function App() {
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.separator} />
        <Test />
        <Test />
        <Test />
        <Test />
        <Test />
        <Test />
        <Test />
        <Test />
        <Test />
        <Test />
      </View>
    </SafeAreaView>
  );
}

React Native Version

0.79.5

Affected Platforms

Runtime - iOS

Output of `npx @react-native-community/cli info`

System:
  OS: macOS 15.5
  CPU: (14) arm64 Apple M4 Max
  Memory: 115.22 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.15.1
    path: ~/.nvm/versions/node/v20.15.1/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v20.15.1/bin/yarn
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v20.15.1/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/alexander.vakrilov/.rvm/gems/ruby-3.3.6/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2411.12071903
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 3.3.6
    path: /Users/alexander.vakrilov/.rvm/rubies/ruby-3.3.6/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.5
    wanted: 0.79.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

No crash

MANDATORY Reproducer

https://snack.expo.dev/@vakrilov/0e4781

Screenshots and Videos

i have same question ("react-native": "0.76.9")

I 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)

@vakrilov

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 onLayout is 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. compareToSize compares the available size and measured size to find out if the text fits the space(see this line). However, measuredSize.height is always same as the line height no matter whether the font size is scaled or not. Therefore, size.height >= measuredSize.height is 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 thresholdSize is 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 compareToSize to 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
allowFontScaling works 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,```

Has there been any follow-up resolution to this issue? I'm encountering a similar problem on iOS version 0.77.1.

@vakrilov

@vakrilov It would be nice if you update the issue title; while native iOS uses adjustsFontSizeToFitWidth, the React Native prop is adjustsFontSizeToFit (which is the term you use in the issue description, but the title has an incorrect adjustsFontSizeToFitWidth term)

👋 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])

@Yupeng-li

BOOL fitsSize = size.width >= measuredSize.width;

This did it for me, thank you @Yupeng-li !

Still persists on RN 0.81.5 but #43543 seems to fix this, although it needs some tinkering to work with newer versions.

@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...

I 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

Tolerate sub-pixel height shortfall in adjustsFontSizeToFit on iOS

how about #58930

Navigation Menu

Repository navigation

Incorrect font scaling with adjustsFontSizeToFitWidth #52642

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of `npx @react-native-community/cli info`

Stacktrace or Logs

MANDATORY Reproducer

Screenshots and Videos

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Incorrect font scaling with adjustsFontSizeToFitWidth #52642

Description

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of npx @react-native-community/cli info

Stacktrace or Logs

MANDATORY Reproducer

Screenshots and Videos

Activity

stickor commented on Jul 22, 2025

ZhangShuaiGou commented on Sep 8, 2025

tian000 commented on Sep 22, 2025

tvillafane commented on Sep 30, 2025

Yupeng-li commented on Oct 29, 2025

Yupeng-li commented on Oct 31, 2025

dazexiaoxixi commented on Nov 19, 2025

taylorkline commented on Jan 21, 2026

dragoncodes commented on Jan 22, 2026

tvillafane commented on Mar 11, 2026

BasixKOR commented on Mar 17, 2026

a-klotz-p8 commented on Jul 2, 2026

singlecolor commented on Aug 11, 2026

Full-lifey commented on Sep 16, 2026

christophby commented on Oct 6, 2026

antoinerousseau commented on Oct 13, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx @react-native-community/cli info`