From 4e8724953262556e38ffee8b553bc33be8f1ec2f Mon Sep 17 00:00:00 2001 From: Adam Comella Date: Tue, 4 Sep 2018 17:33:06 -0700 Subject: [PATCH] iOS: Add a maxFontSizeMultiplier prop to and (#20915) Summary: **Motivation** Whenever a user changes the system font size to its maximum allowable setting, React Native apps that allow font scaling can become unusable because the text gets too big. Experimenting with a native app like iMessage on iOS, the font size used for non-body text (e.g. header, navigational elements) is capped while the body text (e.g. text in the message bubbles) is allowed to grow. This PR introduces a new prop on `` and `` called `maxFontSizeMultiplier`. This enables devs to set the maximum allowed text scale factor on a Text/TextInput. The default is 0 which means no limit. Another PR will add this feature to Android. **Test Plan** I created a test app which utilizes all categories of values of `maxFontSizeMultiplier`: - `undefined`: inherit from parent - `0`: no limit - `1`, `1.2`: fixed limits I tried this with `Text`, `TextInput` with `value`, and `TextInput` with children. For `Text`, I also verified that nesting works properly (if a child `Text` doesn't specify `maxFontSizeMultiplier`, it inherits it from its parent). Lastly, we've been using a version of this in Skype for several months. **Release Notes** [GENERAL] [ENHANCEMENT] [Text/TextInput] - Added maxFontSizeMultiplier prop to prevent some text from getting unusably large as user increases OS's font scale setting (iOS) Adam Comella Microsoft Corp. Pull Request resolved: https://github.com/facebook/react-native/pull/20915 Differential Revision: D9646739 Pulled By: shergin fbshipit-source-id: c823f59c1e342c22d6297b88b2cb11c5a1f10310 --- Libraries/Components/TextInput/TextInput.js | 15 ++++++++++++++- Libraries/Text/BaseText/RCTBaseTextViewManager.m | 1 + Libraries/Text/RCTTextAttributes.h | 3 ++- Libraries/Text/RCTTextAttributes.m | 13 ++++++++++++- Libraries/Text/Text.js | 2 ++ Libraries/Text/Text/RCTTextViewManager.m | 1 - Libraries/Text/TextPropTypes.js | 8 ++++++++ 7 files changed, 39 insertions(+), 4 deletions(-) diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index 1257467c3b2018..3cd4f0b7ba185b 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -177,6 +177,7 @@ type Props = $ReadOnly<{| autoCorrect?: ?boolean, autoFocus?: ?boolean, allowFontScaling?: ?boolean, + maxFontSizeMultiplier?: ?boolean, editable?: ?boolean, keyboardType?: ?KeyboardType, returnKeyType?: ?ReturnKeyType, @@ -367,6 +368,14 @@ const TextInput = createReactClass({ * default is `true`. */ allowFontScaling: PropTypes.bool, + /** + * Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. + * Possible values: + * `null/undefined` (default): inherit from the parent node or the global default (0) + * `0`: no max, ignore parent/global default + * `>= 1`: sets the maxFontSizeMultiplier of this node to this value + */ + maxFontSizeMultiplier: PropTypes.number, /** * If `false`, text is not editable. The default value is `true`. */ @@ -933,7 +942,11 @@ const TextInput = createReactClass({ ); if (childCount >= 1) { children = ( - + {children} ); diff --git a/Libraries/Text/BaseText/RCTBaseTextViewManager.m b/Libraries/Text/BaseText/RCTBaseTextViewManager.m index 2cf43ebf38cf6c..7ecf57588affec 100644 --- a/Libraries/Text/BaseText/RCTBaseTextViewManager.m +++ b/Libraries/Text/BaseText/RCTBaseTextViewManager.m @@ -36,6 +36,7 @@ - (RCTShadowView *)shadowView RCT_REMAP_SHADOW_PROPERTY(fontStyle, textAttributes.fontStyle, NSString) RCT_REMAP_SHADOW_PROPERTY(fontVariant, textAttributes.fontVariant, NSArray) RCT_REMAP_SHADOW_PROPERTY(allowFontScaling, textAttributes.allowFontScaling, BOOL) +RCT_REMAP_SHADOW_PROPERTY(maxFontSizeMultiplier, textAttributes.maxFontSizeMultiplier, CGFloat) RCT_REMAP_SHADOW_PROPERTY(letterSpacing, textAttributes.letterSpacing, CGFloat) // Paragraph Styles RCT_REMAP_SHADOW_PROPERTY(lineHeight, textAttributes.lineHeight, CGFloat) diff --git a/Libraries/Text/RCTTextAttributes.h b/Libraries/Text/RCTTextAttributes.h index 7575bb17269f80..8a358866b82632 100644 --- a/Libraries/Text/RCTTextAttributes.h +++ b/Libraries/Text/RCTTextAttributes.h @@ -31,6 +31,7 @@ extern NSString *const RCTTextAttributesTagAttributeName; @property (nonatomic, copy, nullable) NSString *fontFamily; @property (nonatomic, assign) CGFloat fontSize; @property (nonatomic, assign) CGFloat fontSizeMultiplier; +@property (nonatomic, assign) CGFloat maxFontSizeMultiplier; @property (nonatomic, copy, nullable) NSString *fontWeight; @property (nonatomic, copy, nullable) NSString *fontStyle; @property (nonatomic, copy, nullable) NSArray *fontVariant; @@ -71,7 +72,7 @@ extern NSString *const RCTTextAttributesTagAttributeName; - (UIFont *)effectiveFont; /** - * Font size multiplier reflects `allowFontScaling` and `fontSizeMultiplier`. + * Font size multiplier reflects `allowFontScaling`, `fontSizeMultiplier`, and `maxFontSizeMultiplier`. */ - (CGFloat)effectiveFontSizeMultiplier; diff --git a/Libraries/Text/RCTTextAttributes.m b/Libraries/Text/RCTTextAttributes.m index 4309138d00fe09..e4db8031514f86 100644 --- a/Libraries/Text/RCTTextAttributes.m +++ b/Libraries/Text/RCTTextAttributes.m @@ -24,6 +24,7 @@ - (instancetype)init _lineHeight = NAN; _textDecorationStyle = NSUnderlineStyleSingle; _fontSizeMultiplier = NAN; + _maxFontSizeMultiplier = NAN; _alignment = NSTextAlignmentNatural; _baseWritingDirection = NSWritingDirectionNatural; _textShadowRadius = NAN; @@ -49,6 +50,7 @@ - (void)applyTextAttributes:(RCTTextAttributes *)textAttributes _fontFamily = textAttributes->_fontFamily ?: _fontFamily; _fontSize = !isnan(textAttributes->_fontSize) ? textAttributes->_fontSize : _fontSize; _fontSizeMultiplier = !isnan(textAttributes->_fontSizeMultiplier) ? textAttributes->_fontSizeMultiplier : _fontSizeMultiplier; + _maxFontSizeMultiplier = !isnan(textAttributes->_maxFontSizeMultiplier) ? textAttributes->_maxFontSizeMultiplier : _maxFontSizeMultiplier; _fontWeight = textAttributes->_fontWeight ?: _fontWeight; _fontStyle = textAttributes->_fontStyle ?: _fontStyle; _fontVariant = textAttributes->_fontVariant ?: _fontVariant; @@ -191,7 +193,15 @@ - (UIFont *)effectiveFont - (CGFloat)effectiveFontSizeMultiplier { - return !RCTHasFontHandlerSet() && _allowFontScaling && !isnan(_fontSizeMultiplier) ? _fontSizeMultiplier : 1.0; + bool fontScalingEnabled = !RCTHasFontHandlerSet() && _allowFontScaling; + + if (fontScalingEnabled) { + CGFloat fontSizeMultiplier = !isnan(_fontSizeMultiplier) ? _fontSizeMultiplier : 1.0; + CGFloat maxFontSizeMultiplier = !isnan(_maxFontSizeMultiplier) ? _maxFontSizeMultiplier : 0.0; + return maxFontSizeMultiplier >= 1.0 ? fminf(maxFontSizeMultiplier, fontSizeMultiplier) : fontSizeMultiplier; + } else { + return 1.0; + } } - (UIColor *)effectiveForegroundColor @@ -260,6 +270,7 @@ - (BOOL)isEqual:(RCTTextAttributes *)textAttributes RCTTextAttributesCompareObjects(_fontFamily) && RCTTextAttributesCompareFloats(_fontSize) && RCTTextAttributesCompareFloats(_fontSizeMultiplier) && + RCTTextAttributesCompareFloats(_maxFontSizeMultiplier) && RCTTextAttributesCompareStrings(_fontWeight) && RCTTextAttributesCompareObjects(_fontStyle) && RCTTextAttributesCompareObjects(_fontVariant) && diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 66dfc16f53623a..1974dbeabe7070 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -58,6 +58,7 @@ const viewConfig = { numberOfLines: true, ellipsizeMode: true, allowFontScaling: true, + maxFontSizeMultiplier: true, disabled: true, selectable: true, selectionColor: true, @@ -263,6 +264,7 @@ const RCTVirtualText = validAttributes: { ...ReactNativeViewAttributes.UIView, isHighlighted: true, + maxFontSizeMultiplier: true, }, uiViewClassName: 'RCTVirtualText', })); diff --git a/Libraries/Text/Text/RCTTextViewManager.m b/Libraries/Text/Text/RCTTextViewManager.m index 7dafffc4aa31d0..73801cf115684a 100644 --- a/Libraries/Text/Text/RCTTextViewManager.m +++ b/Libraries/Text/Text/RCTTextViewManager.m @@ -24,7 +24,6 @@ @interface RCTTextViewManager () @implementation RCTTextViewManager { NSHashTable *_shadowViews; - CGFloat _fontSizeMultiplier; } RCT_EXPORT_MODULE(RCTText) diff --git a/Libraries/Text/TextPropTypes.js b/Libraries/Text/TextPropTypes.js index 5a3c99d7378531..e99cf1cc56cb83 100644 --- a/Libraries/Text/TextPropTypes.js +++ b/Libraries/Text/TextPropTypes.js @@ -100,6 +100,14 @@ module.exports = { * See https://facebook.github.io/react-native/docs/text.html#allowfontscaling */ allowFontScaling: PropTypes.bool, + /** + * Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. + * Possible values: + * `null/undefined` (default): inherit from the parent node or the global default (0) + * `0`: no max, ignore parent/global default + * `>= 1`: sets the maxFontSizeMultiplier of this node to this value + */ + maxFontSizeMultiplier: PropTypes.number, /** * Indicates whether the view is an accessibility element. *