Skip to content

Commit 97cf42f

Browse files
RickardZrinskifacebook-github-bot
RickardZrinski
authored and
facebook-github-bot
committed
Fix maxFontSizeMultiplier prop on Text and TextInput components in new architecture (#47614)
Summary: The `maxFontSizeMultiplier` prop for `Text` and `TextInput` was not handled in Fabric / New Architecture as documented in #47499. bypass-github-export-checks ## Changelog: [GENERAL] [FIXED] - Fix `maxFontSizeMultiplier` prop on `Text` and `TextInput` components in Fabric / New Architecture Pull Request resolved: #47614 Test Plan: I have not added any automated tests for this change but try to do so if requested. I have however added examples to RN Tester for both the Text and TextInput components, as well as compared the behaviour with Paper / Old Architecture. Both on version 0.76. Noticed now I didn't do exactly the same steps in both videos, oops! Be aware that reapplying changes made in the Settings are currently half-broken on the new architecture, thus I'm restarting the app on Android and iOS. But this issue is unrelated to my changes. I've tested on main branch and it has the same issue. Here are comparison videos between Paper and Fabric on iOS *after* I've made my fix. ### Text | Paper | Fabric | | ------------- | ------------- | | <video src="https://github.com/user-attachments/assets/f4fd009f-aa6d-41ab-92fa-8dcf1e351ba1" /> | <video src="https://github.com/user-attachments/assets/fda42cc6-34c2-42a7-a6e2-028e7c866075" /> | ### TextInput | Paper | Fabric | | ------------- | ------------- | | <video src="https://github.com/user-attachments/assets/59b59f7b-25d2-4b5b-a8e2-d2054cc6390b" /> | <video src="https://github.com/user-attachments/assets/72068566-8f2a-4463-874c-45a6f5b63b0d" /> | Reviewed By: Abbondanzo Differential Revision: D65953019 Pulled By: cipolleschi fbshipit-source-id: 90c3c7e236229e9ad9bd346941fafe4af8a9d9fc
1 parent 97ee93f commit 97cf42f

File tree

11 files changed

+276
-5
lines changed

11 files changed

+276
-5
lines changed

‎packages/react-native/ReactAndroid/api/ReactAndroid.api‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7288,6 +7288,7 @@ public class com/facebook/react/views/text/TextAttributeProps {
72887288
public static final field TA_KEY_LETTER_SPACING S
72897289
public static final field TA_KEY_LINE_BREAK_STRATEGY S
72907290
public static final field TA_KEY_LINE_HEIGHT S
7291+
public static final field TA_KEY_MAX_FONT_SIZE_MULTIPLIER S
72917292
public static final field TA_KEY_OPACITY S
72927293
public static final field TA_KEY_ROLE S
72937294
public static final field TA_KEY_TEXT_DECORATION_COLOR S
@@ -7320,6 +7321,7 @@ public class com/facebook/react/views/text/TextAttributeProps {
73207321
protected field mLetterSpacingInput F
73217322
protected field mLineHeight F
73227323
protected field mLineHeightInput F
7324+
protected field mMaxFontSizeMultiplier F
73237325
protected field mNumberOfLines I
73247326
protected field mOpacity F
73257327
protected field mRole Lcom/facebook/react/uimanager/ReactAccessibilityDelegate$Role;

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.java‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ public class TextAttributeProps {
6161
public static final short TA_KEY_LINE_BREAK_STRATEGY = 25;
6262
public static final short TA_KEY_ROLE = 26;
6363
public static final short TA_KEY_TEXT_TRANSFORM = 27;
64+
public static final short TA_KEY_MAX_FONT_SIZE_MULTIPLIER = 29;
6465

6566
public static final int UNSET = -1;
6667

@@ -81,6 +82,7 @@ public class TextAttributeProps {
8182
protected float mLineHeight = Float.NaN;
8283
protected boolean mIsColorSet = false;
8384
protected boolean mAllowFontScaling = true;
85+
protected float mMaxFontSizeMultiplier = Float.NaN;
8486
protected int mColor;
8587
protected boolean mIsBackgroundColorSet = false;
8688
protected int mBackgroundColor;
@@ -227,6 +229,9 @@ public static TextAttributeProps fromMapBuffer(MapBuffer props) {
227229
case TA_KEY_TEXT_TRANSFORM:
228230
result.setTextTransform(entry.getStringValue());
229231
break;
232+
case TA_KEY_MAX_FONT_SIZE_MULTIPLIER:
233+
result.setMaxFontSizeMultiplier((float) entry.getDoubleValue());
234+
break;
230235
}
231236
}
232237

@@ -243,6 +248,8 @@ public static TextAttributeProps fromReadableMap(ReactStylesDiffMap props) {
243248
result.setLineHeight(getFloatProp(props, ViewProps.LINE_HEIGHT, ReactConstants.UNSET));
244249
result.setLetterSpacing(getFloatProp(props, ViewProps.LETTER_SPACING, Float.NaN));
245250
result.setAllowFontScaling(getBooleanProp(props, ViewProps.ALLOW_FONT_SCALING, true));
251+
result.setMaxFontSizeMultiplier(
252+
getFloatProp(props, ViewProps.MAX_FONT_SIZE_MULTIPLIER, Float.NaN));
246253
result.setFontSize(getFloatProp(props, ViewProps.FONT_SIZE, ReactConstants.UNSET));
247254
result.setColor(props.hasKey(ViewProps.COLOR) ? props.getInt(ViewProps.COLOR, 0) : null);
248255
result.setColor(
@@ -411,7 +418,14 @@ private void setAllowFontScaling(boolean allowFontScaling) {
411418
mAllowFontScaling = allowFontScaling;
412419
setFontSize(mFontSizeInput);
413420
setLineHeight(mLineHeightInput);
414-
setLetterSpacing(mLetterSpacingInput);
421+
}
422+
}
423+
424+
private void setMaxFontSizeMultiplier(float maxFontSizeMultiplier) {
425+
if (maxFontSizeMultiplier != mMaxFontSizeMultiplier) {
426+
mMaxFontSizeMultiplier = maxFontSizeMultiplier;
427+
setFontSize(mFontSizeInput);
428+
setLineHeight(mLineHeightInput);
415429
}
416430
}
417431

@@ -420,7 +434,7 @@ private void setFontSize(float fontSize) {
420434
if (fontSize != ReactConstants.UNSET) {
421435
fontSize =
422436
mAllowFontScaling
423-
? (float) Math.ceil(PixelUtil.toPixelFromSP(fontSize))
437+
? (float) Math.ceil(PixelUtil.toPixelFromSP(fontSize, mMaxFontSizeMultiplier))
424438
: (float) Math.ceil(PixelUtil.toPixelFromDIP(fontSize));
425439
}
426440
mFontSize = (int) fontSize;

‎packages/react-native/ReactCommon/react/renderer/attributedstring/TextAttributes.cpp‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@ void TextAttributes::apply(TextAttributes textAttributes) {
4646
allowFontScaling = textAttributes.allowFontScaling.has_value()
4747
? textAttributes.allowFontScaling
4848
: allowFontScaling;
49+
maxFontSizeMultiplier = !std::isnan(textAttributes.maxFontSizeMultiplier)
50+
? textAttributes.maxFontSizeMultiplier
51+
: maxFontSizeMultiplier;
4952
dynamicTypeRamp = textAttributes.dynamicTypeRamp.has_value()
5053
? textAttributes.dynamicTypeRamp
5154
: dynamicTypeRamp;
@@ -168,6 +171,7 @@ bool TextAttributes::operator==(const TextAttributes& rhs) const {
168171
rhs.accessibilityRole,
169172
rhs.role,
170173
rhs.textTransform) &&
174+
floatEquality(maxFontSizeMultiplier, rhs.maxFontSizeMultiplier) &&
171175
floatEquality(opacity, rhs.opacity) &&
172176
floatEquality(fontSize, rhs.fontSize) &&
173177
floatEquality(fontSizeMultiplier, rhs.fontSizeMultiplier) &&
@@ -224,6 +228,10 @@ SharedDebugStringConvertibleList TextAttributes::getDebugProps() const {
224228
"allowFontScaling",
225229
allowFontScaling,
226230
textAttributes.allowFontScaling),
231+
debugStringConvertibleItem(
232+
"maxFontSizeMultiplier",
233+
maxFontSizeMultiplier,
234+
textAttributes.maxFontSizeMultiplier),
227235
debugStringConvertibleItem(
228236
"dynamicTypeRamp", dynamicTypeRamp, textAttributes.dynamicTypeRamp),
229237
debugStringConvertibleItem(

‎packages/react-native/ReactCommon/react/renderer/attributedstring/TextAttributes.h‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ class TextAttributes : public DebugStringConvertible {
5151
std::optional<FontStyle> fontStyle{};
5252
std::optional<FontVariant> fontVariant{};
5353
std::optional<bool> allowFontScaling{};
54+
Float maxFontSizeMultiplier{std::numeric_limits<Float>::quiet_NaN()};
5455
std::optional<DynamicTypeRamp> dynamicTypeRamp{};
5556
Float letterSpacing{std::numeric_limits<Float>::quiet_NaN()};
5657
std::optional<TextTransform> textTransform{};
@@ -117,6 +118,7 @@ struct hash<facebook::react::TextAttributes> {
117118
textAttributes.opacity,
118119
textAttributes.fontFamily,
119120
textAttributes.fontSize,
121+
textAttributes.maxFontSizeMultiplier,
120122
textAttributes.fontSizeMultiplier,
121123
textAttributes.fontWeight,
122124
textAttributes.fontStyle,

‎packages/react-native/ReactCommon/react/renderer/attributedstring/conversions.h‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1017,6 +1017,7 @@ constexpr static MapBuffer::Key TA_KEY_LINE_BREAK_STRATEGY = 25;
10171017
constexpr static MapBuffer::Key TA_KEY_ROLE = 26;
10181018
constexpr static MapBuffer::Key TA_KEY_TEXT_TRANSFORM = 27;
10191019
constexpr static MapBuffer::Key TA_KEY_ALIGNMENT_VERTICAL = 28;
1020+
constexpr static MapBuffer::Key TA_KEY_MAX_FONT_SIZE_MULTIPLIER = 29;
10201021

10211022
// constants for ParagraphAttributes serialization
10221023
constexpr static MapBuffer::Key PA_KEY_MAX_NUMBER_OF_LINES = 0;
@@ -1111,6 +1112,10 @@ inline MapBuffer toMapBuffer(const TextAttributes& textAttributes) {
11111112
builder.putBool(
11121113
TA_KEY_ALLOW_FONT_SCALING, *textAttributes.allowFontScaling);
11131114
}
1115+
if (!std::isnan(textAttributes.maxFontSizeMultiplier)) {
1116+
builder.putDouble(
1117+
TA_KEY_MAX_FONT_SIZE_MULTIPLIER, textAttributes.maxFontSizeMultiplier);
1118+
}
11141119
if (!std::isnan(textAttributes.letterSpacing)) {
11151120
builder.putDouble(TA_KEY_LETTER_SPACING, textAttributes.letterSpacing);
11161121
}

‎packages/react-native/ReactCommon/react/renderer/components/text/BaseTextProps.cpp‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,12 @@ static TextAttributes convertRawProp(
7373
"allowFontScaling",
7474
sourceTextAttributes.allowFontScaling,
7575
defaultTextAttributes.allowFontScaling);
76+
textAttributes.maxFontSizeMultiplier = convertRawProp(
77+
context,
78+
rawProps,
79+
"maxFontSizeMultiplier",
80+
sourceTextAttributes.maxFontSizeMultiplier,
81+
defaultTextAttributes.maxFontSizeMultiplier);
7682
textAttributes.dynamicTypeRamp = convertRawProp(
7783
context,
7884
rawProps,
@@ -266,6 +272,12 @@ void BaseTextProps::setProp(
266272
defaults, value, textAttributes, fontVariant, "fontVariant");
267273
REBUILD_FIELD_SWITCH_CASE(
268274
defaults, value, textAttributes, allowFontScaling, "allowFontScaling");
275+
REBUILD_FIELD_SWITCH_CASE(
276+
defaults,
277+
value,
278+
textAttributes,
279+
maxFontSizeMultiplier,
280+
"maxFontSizeMultiplier");
269281
REBUILD_FIELD_SWITCH_CASE(
270282
defaults, value, textAttributes, letterSpacing, "letterSpacing");
271283
REBUILD_FIELD_SWITCH_CASE(

‎packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.mm‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,17 +135,19 @@ inline static CGFloat RCTBaseSizeForDynamicTypeRamp(const DynamicTypeRamp &dynam
135135
inline static CGFloat RCTEffectiveFontSizeMultiplierFromTextAttributes(const TextAttributes &textAttributes)
136136
{
137137
if (textAttributes.allowFontScaling.value_or(true)) {
138+
CGFloat fontSizeMultiplier = !isnan(textAttributes.fontSizeMultiplier) ? textAttributes.fontSizeMultiplier : 1.0;
138139
if (textAttributes.dynamicTypeRamp.has_value()) {
139140
DynamicTypeRamp dynamicTypeRamp = textAttributes.dynamicTypeRamp.value();
140141
UIFontMetrics *fontMetrics =
141142
[UIFontMetrics metricsForTextStyle:RCTUIFontTextStyleForDynamicTypeRamp(dynamicTypeRamp)];
142143
// Using a specific font size reduces rounding errors from -scaledValueForValue:
143144
CGFloat requestedSize =
144145
isnan(textAttributes.fontSize) ? RCTBaseSizeForDynamicTypeRamp(dynamicTypeRamp) : textAttributes.fontSize;
145-
return [fontMetrics scaledValueForValue:requestedSize] / requestedSize;
146-
} else {
147-
return textAttributes.fontSizeMultiplier;
146+
fontSizeMultiplier = [fontMetrics scaledValueForValue:requestedSize] / requestedSize;
148147
}
148+
CGFloat maxFontSizeMultiplier =
149+
!isnan(textAttributes.maxFontSizeMultiplier) ? textAttributes.maxFontSizeMultiplier : 0.0;
150+
return maxFontSizeMultiplier >= 1.0 ? fminf(maxFontSizeMultiplier, fontSizeMultiplier) : fontSizeMultiplier;
149151
} else {
150152
return 1.0;
151153
}

‎packages/rn-tester/js/examples/Text/TextExample.android.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -482,6 +482,37 @@ function AllowFontScalingExample(props: {}): React.Node {
482482
);
483483
}
484484

485+
function MaxFontSizeMultiplierExample(props: {}): React.Node {
486+
return (
487+
<View testID={'max-font-size-multiplier'}>
488+
<Text>
489+
When allowFontScaling is enabled, you can use the maxFontSizeMultiplier
490+
prop to set an upper limit on how much the font size will be scaled.
491+
</Text>
492+
<Text
493+
allowFontScaling={true}
494+
maxFontSizeMultiplier={1}
495+
style={{marginTop: 10}}>
496+
This text will not scale up (max 1x)
497+
</Text>
498+
<Text allowFontScaling={true} maxFontSizeMultiplier={1.5}>
499+
This text will scale up (max 1.5x)
500+
</Text>
501+
<Text allowFontScaling={true} maxFontSizeMultiplier={1}>
502+
<Text>Inherit max (max 1x)</Text>
503+
</Text>
504+
<Text allowFontScaling={true} maxFontSizeMultiplier={1}>
505+
<Text maxFontSizeMultiplier={1.5}>
506+
Override inherited max (max 1.5x)
507+
</Text>
508+
</Text>
509+
<Text allowFontScaling={true} maxFontSizeMultiplier={1}>
510+
<Text maxFontSizeMultiplier={0}>Ignore inherited max (no max)</Text>
511+
</Text>
512+
</View>
513+
);
514+
}
515+
485516
function NumberOfLinesExample(props: {}): React.Node {
486517
return (
487518
<>
@@ -1462,6 +1493,13 @@ const examples = [
14621493
return <AllowFontScalingExample />;
14631494
},
14641495
},
1496+
{
1497+
title: 'maxFontSizeMultiplier attribute',
1498+
name: 'maxFontSizeMultiplier',
1499+
render(): React.Node {
1500+
return <MaxFontSizeMultiplierExample />;
1501+
},
1502+
},
14651503
{
14661504
title: 'selectable attribute',
14671505
name: 'selectable',

‎packages/rn-tester/js/examples/Text/TextExample.ios.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1176,6 +1176,62 @@ const examples = [
11761176
);
11771177
},
11781178
},
1179+
{
1180+
title: 'maxFontSizeMultiplier attribute',
1181+
name: 'maxFontSizeMultiplier',
1182+
render(): React.Node {
1183+
return (
1184+
<View testID={'max-font-size-multiplier'}>
1185+
<Text>
1186+
When allowFontScaling is enabled, you can use the
1187+
maxFontSizeMultiplier prop to set an upper limit on how much the
1188+
font size will be scaled.
1189+
</Text>
1190+
<Text
1191+
allowFontScaling={true}
1192+
maxFontSizeMultiplier={1}
1193+
style={{marginTop: 10}}>
1194+
This text will not scale up (max 1x)
1195+
</Text>
1196+
<Text allowFontScaling={true} maxFontSizeMultiplier={1.5}>
1197+
This text will scale up (max 1.5x)
1198+
</Text>
1199+
<Text allowFontScaling={true} maxFontSizeMultiplier={1}>
1200+
<Text>Inherit max (max 1x)</Text>
1201+
</Text>
1202+
<Text allowFontScaling={true} maxFontSizeMultiplier={1}>
1203+
<Text maxFontSizeMultiplier={1.5}>
1204+
Override inherited max (max 1.5x)
1205+
</Text>
1206+
</Text>
1207+
<Text allowFontScaling={true} maxFontSizeMultiplier={1}>
1208+
<Text maxFontSizeMultiplier={0}>Ignore inherited max (no max)</Text>
1209+
</Text>
1210+
<Text
1211+
allowFontScaling={true}
1212+
style={{fontSize: 22}}
1213+
dynamicTypeRamp="title2">
1214+
This text will scale with 'title2' dynamic type ramp (no max)
1215+
</Text>
1216+
<Text
1217+
allowFontScaling={true}
1218+
style={{fontSize: 22}}
1219+
dynamicTypeRamp="title2"
1220+
maxFontSizeMultiplier={1.2}>
1221+
This text will scale with 'title2' dynamic type ramp (max 1.2x)
1222+
</Text>
1223+
<Text
1224+
allowFontScaling={true}
1225+
style={{fontSize: 22}}
1226+
dynamicTypeRamp="title2"
1227+
maxFontSizeMultiplier={1}>
1228+
This text uses 'title2' dynamic type ramp but will not scale up (max
1229+
1x)
1230+
</Text>
1231+
</View>
1232+
);
1233+
},
1234+
},
11791235
{
11801236
title: 'Inline views',
11811237
render: (): React.Node => <TextInlineView.Basic />,
@@ -1441,17 +1497,41 @@ const examples = [
14411497
<Text style={{fontSize: 20}} dynamicTypeRamp="title3">
14421498
Title 3
14431499
</Text>
1500+
<Text style={{fontSize: 17}} dynamicTypeRamp="headline">
1501+
Headline
1502+
</Text>
14441503
<Text style={{fontSize: 17}} dynamicTypeRamp="body">
14451504
Body
14461505
</Text>
1506+
<Text style={{fontSize: 16}} dynamicTypeRamp="callout">
1507+
Callout
1508+
</Text>
1509+
<Text style={{fontSize: 15}} dynamicTypeRamp="subheadline">
1510+
Subheadline
1511+
</Text>
1512+
<Text style={{fontSize: 13}} dynamicTypeRamp="footnote">
1513+
Footnote
1514+
</Text>
1515+
<Text style={{fontSize: 12}} dynamicTypeRamp="caption1">
1516+
Caption
1517+
</Text>
1518+
<Text style={{fontSize: 11}} dynamicTypeRamp="caption2">
1519+
Caption 2
1520+
</Text>
14471521
</View>
14481522
<View style={boxStyle}>
14491523
<Text style={boldStyle}>Without `dynamicTypeRamp`:</Text>
14501524
<Text style={{fontSize: 34}}>Large Title</Text>
14511525
<Text style={{fontSize: 28}}>Title</Text>
14521526
<Text style={{fontSize: 22}}>Title 2</Text>
14531527
<Text style={{fontSize: 20}}>Title 3</Text>
1528+
<Text style={{fontSize: 17}}>Headline</Text>
14541529
<Text style={{fontSize: 17}}>Body</Text>
1530+
<Text style={{fontSize: 16}}>Callout</Text>
1531+
<Text style={{fontSize: 15}}>Subheadline</Text>
1532+
<Text style={{fontSize: 13}}>Footnote</Text>
1533+
<Text style={{fontSize: 12}}>Caption</Text>
1534+
<Text style={{fontSize: 11}}>Caption 2</Text>
14551535
</View>
14561536
</View>
14571537
);

0 commit comments

Comments
 (0)