mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
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:
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;
|
||||
|
||||
Reference in New Issue
Block a user