Incorrect font scaling with adjustsFontSizeToFitWidth

[vakrilov]

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:

1. The font is scaled although there is enough space for the text to be rendered with the original font-size
2. 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

[stickor]

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

[ZhangShuaiGou]

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.

[tian000]

Running into this also

[tvillafane]

I've been seeing something similar as well; the line breaks are happening seemingly at random. This is on iOS:

[Yupeng-li]

I have the issue only when new architecture is enabled. (react-native 0.79.6)

[Yupeng-li]

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:

1. Text is still scaled down properly when it is too wide
2. allowFontScaling works normally. Font scales to respect Text Size accessibility settings.
3. 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.
4. 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,```

[dazexiaoxixi]

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

[taylorkline]

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

[dragoncodes]

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

[tvillafane]

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

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

[BasixKOR]

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

[a-klotz-p8]

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