Don't enlarge font when adjustFontSizeToFit is set on iOS on the new architecture (#44163)

Summary:
On the old architecture `adjustFontSizeToFit` only shrinks the font size when there's too little space, while on the new arch it's also enlarged when there's too much space so that it always takes the entire width. This PR changes this behavior so that it only shrinks the text.

Fixes https://github.com/facebook/react-native/issues/42044

bypass-github-export-checks

## Changelog:

[IOS] [FIXED] - Fixed font size enlarging when `adjustFontSizeToFit` is set

Pull Request resolved: https://github.com/facebook/react-native/pull/44163

Test Plan:
<details>
<summary>Tested on the following code</summary>

```jsx
import { Text, SafeAreaView, View, StyleSheet } from 'react-native';

export default function Test() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={{margin: 4, borderWidth: 1, borderColor: 'black'}}>
        <Text style={{ fontSize: 16 }}>
          Some text that fits (no adjust, unlimited height)
        </Text>
      </View>

      <View style={{margin: 4, borderWidth: 1, borderColor: 'black'}}>
        <Text style={{ fontSize: 16 }} adjustsFontSizeToFit>
          Some text that fits (adjust, unlimited height)
        </Text>
      </View>

      <View style={{margin: 4, borderWidth: 1, borderColor: 'black'}}>
        <Text style={{ fontSize: 16 }} numberOfLines={1}>
          Some text that fits (no adjust, 1 line)
        </Text>
      </View>

      <View style={{margin: 4, borderWidth: 1, borderColor: 'black'}}>
        <Text style={{ fontSize: 16 }} adjustsFontSizeToFit numberOfLines={1}>
          Some text that fits (adjust, 1 line)
        </Text>
      </View>

      <View style={{margin: 4, borderWidth: 1, borderColor: 'black'}}>
        <Text style={{ fontSize: 16 }}>
          Some longer text that doesn't fit if displayed in one line (no adjust, unlimited height)
        </Text>
      </View>

      <View style={{margin: 4, borderWidth: 1, borderColor: 'black'}}>
        <Text style={{ fontSize: 16 }} adjustsFontSizeToFit>
          Some longer text that doesn't fit if displayed in one line (adjust, unlimited height)
        </Text>
      </View>

      <View style={{margin: 4, borderWidth: 1, borderColor: 'black'}}>
        <Text style={{ fontSize: 16 }} numberOfLines={1}>
          Some longer text that doesn't fit if displayed in one line (no adjust, 1 line)
        </Text>
      </View>

      <View style={{margin: 4, borderWidth: 1, borderColor: 'black'}}>
        <Text style={{ fontSize: 16 }} adjustsFontSizeToFit numberOfLines={1}>
        Some longer text that doesn't fit if displayed in one line (adjust, 1 line)
        </Text>
      </View>

      <View style={{margin: 4, borderWidth: 1, borderColor: 'black'}}>
        <Text style={{ fontSize: 16 }}>
          Even longer text that doesn't even fit if it has as much as two entire lines for itself, what a darn shame (no adjust, unlimited height)
        </Text>
      </View>

      <View style={{margin: 4, borderWidth: 1, borderColor: 'black'}}>
        <Text style={{ fontSize: 16 }} adjustsFontSizeToFit>
          Even longer text that doesn't even fit if it has as much as two entire lines for itself, what a darn shame (adjust, unlimited height)
        </Text>
      </View>

      <View style={{margin: 4, borderWidth: 1, borderColor: 'black'}}>
        <Text style={{ fontSize: 16 }} numberOfLines={2}>
          Even longer text that doesn't even fit if it has as much as two entire lines for itself, what a darn shame (no adjust, 2 lines)
        </Text>
      </View>

      <View style={{margin: 4, borderWidth: 1, borderColor: 'black'}}>
        <Text style={{ fontSize: 16 }} numberOfLines={2} adjustsFontSizeToFit>
          Even longer text that doesn't even fit if it has as much as two entire lines for itself, what a darn shame (adjust, 2 lines)
        </Text>
      </View>
    </SafeAreaView>
  );
}
```

</details>

|Old arch (without this PR)|Old arch (with this PR)|
|-|-|
|<img width="546" alt="old_no_change" src="https://github.com/facebook/react-native/assets/21055725/f9682c0c-9a23-46b3-984d-607f83811d9e">|<img width="546" alt="old_changed" src="https://github.com/facebook/react-native/assets/21055725/c07f88fb-8ca2-415e-95c9-27bf718fc510">|

|New arch (without this PR)|New arch (with this PR)|
|-|-|
|<img width="546" alt="new_no_change" src="https://github.com/facebook/react-native/assets/21055725/173ac140-a836-4a40-83ef-c5365972700f">|<img width="546" alt="new_changed" src="https://github.com/facebook/react-native/assets/21055725/b0b00e45-17d2-4756-8ae5-a21c4ec242d9">|

Reviewed By: cortinico

Differential Revision: D56356139

Pulled By: cipolleschi

fbshipit-source-id: d11a5f4b95fb7da28a24d9136d41349d39851d9e
This commit is contained in:
Jakub Piasecki
2024-04-19 10:20:15 -07:00
committed by Facebook GitHub Bot
parent 8ecbb36492
commit ed7766cee9
@@ -19,6 +19,11 @@ typedef NS_OPTIONS(NSInteger, RCTTextSizeComparisonOptions) {
minimumFontSize:(CGFloat)minimumFontSize
maximumFontSize:(CGFloat)maximumFontSize
{
// Don't scale the font if it already fits
if ([self compareToSize:size thresholdRatio:0.01] & RCTTextSizeComparisonSmaller) {
return;
}
CGFloat bottomRatio = 1.0 / 128.0;
CGFloat topRatio = 128.0;
CGFloat ratio = 1.0;