Dynamic Text Sizes for Text component

Summary:
Dynamic Text Sizes for Text component.
Text gains new prop - allowFontScaling (false by default).
There is also AccessibilityManager module that allows you to tune multipliers per each content size category.

Author: Vladislav Alexeev

Examples/UIExplorer/TextExample.ios.js

@@ -378,6 +378,25 @@ exports.examples = [
       </View>
     );
   },
+}, {
+  title: 'allowFontScaling attribute',
+  render: function() {
+    return (
+      <View>
+        <Text>
+          By default, text will respect Text Size accessibility setting on iOS.
+          It means that all font sizes will be increased or descreased depending on the value of Text Size setting in
+          {" "}<Text style={{fontWeight: 'bold'}}>Settings.app - Display & Brightness - Text Size</Text>
+        </Text>
+        <Text style={{marginTop: 10}}>
+          You can disable scaling for your Text component by passing {"\""}allowFontScaling={"{"}false{"}\""} prop.
+        </Text>
+        <Text allowFontScaling={false} style={{marginTop: 20}}>
+          This text will not scale.
+        </Text>
+      </View>
+    );
+  },
 }];
 
 var styles = StyleSheet.create({

Libraries/ART/RCTConvert+ART.m

@@ -87,7 +87,7 @@ + (ARTTextFrame)ARTTextFrame:(id)json
   }
 
   NSDictionary *fontDict = dict[@"font"];
-  CTFontRef font = (__bridge CTFontRef)[self UIFont:nil withFamily:fontDict[@"fontFamily"] size:fontDict[@"fontSize"] weight:fontDict[@"fontWeight"] style:fontDict[@"fontStyle"]];
+  CTFontRef font = (__bridge CTFontRef)[self UIFont:nil withFamily:fontDict[@"fontFamily"] size:fontDict[@"fontSize"] weight:fontDict[@"fontWeight"] style:fontDict[@"fontStyle"] scaleMultiplier:1.0];
   if (!font) {
     return frame;
   }

Libraries/Text/RCTShadowRawText.m

@@ -9,8 +9,32 @@
 
 #import "RCTShadowRawText.h"
 
+#import "RCTUIManager.h"
+
 @implementation RCTShadowRawText
 
+- (instancetype)init
+{
+  if ((self = [super init])) {
+    [[NSNotificationCenter defaultCenter] addObserver:self
+                                             selector:@selector(contentSizeMultiplierDidChange:)
+                                                 name:RCTUIManagerWillUpdateViewsDueToContentSizeMultiplierChangeNotification
+                                               object:nil];
+  }
+  return self;
+}
+
+- (void)dealloc
+{
+  [[NSNotificationCenter defaultCenter] removeObserver:self];
+}
+
+- (void)contentSizeMultiplierDidChange:(NSNotification *)note
+{
+  [self dirtyLayout];
+  [self dirtyText];
+}
+
 - (void)setText:(NSString *)text
 {
   if (_text != text) {

Libraries/Text/RCTShadowText.h

@@ -30,6 +30,8 @@ extern NSString *const RCTReactTagAttributeName;
 @property (nonatomic, strong) UIColor *textDecorationColor;
 @property (nonatomic, assign) NSUnderlineStyle textDecorationStyle;
 @property (nonatomic, assign) RCTTextDecorationLineType textDecorationLine;
+@property (nonatomic, assign) CGFloat fontSizeMultiplier;
+@property (nonatomic, assign) BOOL allowFontScaling;
 
 - (void)recomputeText;
 

Libraries/Text/RCTShadowText.m

@@ -9,6 +9,9 @@
 
 #import "RCTShadowText.h"
 
+#import "RCTAccessibilityManager.h"
+#import "RCTUIManager.h"
+#import "RCTBridge.h"
 #import "RCTConvert.h"
 #import "RCTLog.h"
 #import "RCTShadowRawText.h"
@@ -51,16 +54,31 @@ - (instancetype)init
     _letterSpacing = NAN;
     _isHighlighted = NO;
     _textDecorationStyle = NSUnderlineStyleSingle;
+    [[NSNotificationCenter defaultCenter] addObserver:self
+                                             selector:@selector(contentSizeMultiplierDidChange:)
+                                                 name:RCTUIManagerWillUpdateViewsDueToContentSizeMultiplierChangeNotification
+                                               object:nil];
   }
   return self;
 }
 
+- (void)dealloc
+{
+  [[NSNotificationCenter defaultCenter] removeObserver:self];
+}
+
 - (NSString *)description
 {
   NSString *superDescription = super.description;
   return [[superDescription substringToIndex:superDescription.length - 1] stringByAppendingFormat:@"; text: %@>", [self attributedString].string];
 }
 
+- (void)contentSizeMultiplierDidChange:(NSNotification *)note
+{
+  [self dirtyLayout];
+  [self dirtyText];
+}
+
 - (NSDictionary *)processUpdatedProperties:(NSMutableSet *)applierBlocks
                           parentProperties:(NSDictionary *)parentProperties
 {
@@ -190,7 +208,9 @@ - (NSAttributedString *)_attributedStringWithFontFamily:(NSString *)fontFamily
     [self _addAttribute:NSBackgroundColorAttributeName withValue:self.backgroundColor toAttributedString:attributedString];
   }
 
-  UIFont *font = [RCTConvert UIFont:nil withFamily:fontFamily size:fontSize weight:fontWeight style:fontStyle];
+  UIFont *font = [RCTConvert UIFont:nil withFamily:fontFamily
+                               size:fontSize weight:fontWeight style:fontStyle
+                    scaleMultiplier:(_allowFontScaling && _fontSizeMultiplier > 0.0 ? _fontSizeMultiplier : 1.0)];
   [self _addAttribute:NSFontAttributeName withValue:font toAttributedString:attributedString];
   [self _addAttribute:NSKernAttributeName withValue:letterSpacing toAttributedString:attributedString];
   [self _addAttribute:RCTReactTagAttributeName withValue:self.reactTag toAttributedString:attributedString];
@@ -232,8 +252,9 @@ - (void)_setParagraphStyleOnAttributedString:(NSMutableAttributedString *)attrib
   [attributedString enumerateAttribute:NSParagraphStyleAttributeName inRange:NSMakeRange(0, [attributedString length]) options:0 usingBlock:^(id value, NSRange range, BOOL *stop) {
     if (value) {
       NSParagraphStyle *paragraphStyle = (NSParagraphStyle *)value;
-      if ([paragraphStyle maximumLineHeight] > _lineHeight) {
-        self.lineHeight = [paragraphStyle maximumLineHeight];
+      CGFloat maximumLineHeight = round([paragraphStyle maximumLineHeight] / self.fontSizeMultiplier);
+      if (maximumLineHeight > self.lineHeight) {
+        self.lineHeight = maximumLineHeight;
       }
       hasParagraphStyle = YES;
     }
@@ -247,8 +268,9 @@ - (void)_setParagraphStyleOnAttributedString:(NSMutableAttributedString *)attrib
     NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
     paragraphStyle.alignment = _textAlign;
     paragraphStyle.baseWritingDirection = _writingDirection;
-    paragraphStyle.minimumLineHeight = _lineHeight;
-    paragraphStyle.maximumLineHeight = _lineHeight;
+    CGFloat lineHeight = round(_lineHeight * self.fontSizeMultiplier);
+    paragraphStyle.minimumLineHeight = lineHeight;
+    paragraphStyle.maximumLineHeight = lineHeight;
     [attributedString addAttribute:NSParagraphStyleAttributeName
                              value:paragraphStyle
                              range:(NSRange){0, attributedString.length}];
@@ -321,4 +343,26 @@ - (void)set##setProp:(type)value;              \
 RCT_TEXT_PROPERTY(TextDecorationStyle, _textDecorationStyle, NSUnderlineStyle);
 RCT_TEXT_PROPERTY(WritingDirection, _writingDirection, NSWritingDirection)
 
+- (void)setAllowFontScaling:(BOOL)allowFontScaling
+{
+  _allowFontScaling = allowFontScaling;
+  for (RCTShadowView *child in [self reactSubviews]) {
+    if ([child isKindOfClass:[RCTShadowText class]]) {
+      [(RCTShadowText *)child setAllowFontScaling:allowFontScaling];
+    }
+  }
+  [self dirtyText];
+}
+
+- (void)setFontSizeMultiplier:(CGFloat)fontSizeMultiplier
+{
+  _fontSizeMultiplier = fontSizeMultiplier;
+  for (RCTShadowView *child in [self reactSubviews]) {
+    if ([child isKindOfClass:[RCTShadowText class]]) {
+      [(RCTShadowText *)child setFontSizeMultiplier:fontSizeMultiplier];
+    }
+  }
+  [self dirtyText];
+}
+
 @end

Libraries/Text/RCTTextManager.m

@@ -9,6 +9,7 @@
 
 #import "RCTTextManager.h"
 
+#import "RCTAccessibilityManager.h"
 #import "RCTAssert.h"
 #import "RCTConvert.h"
 #import "RCTLog.h"
@@ -49,6 +50,7 @@ - (RCTShadowView *)shadowView
 RCT_EXPORT_SHADOW_PROPERTY(textDecorationColor, UIColor)
 RCT_EXPORT_SHADOW_PROPERTY(textDecorationLine, RCTTextDecorationLineType)
 RCT_EXPORT_SHADOW_PROPERTY(writingDirection, NSWritingDirection)
+RCT_EXPORT_SHADOW_PROPERTY(allowFontScaling, BOOL)
 
 - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(RCTSparseArray *)shadowViewRegistry
 {
@@ -69,6 +71,7 @@ - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(RCTSparseArray *)
       RCTAssert([shadowView isTextDirty], @"Don't process any nodes that don't have dirty text");
 
       if ([shadowView isKindOfClass:[RCTShadowText class]]) {
+        [(RCTShadowText *)shadowView setFontSizeMultiplier:self.bridge.accessibilityManager.multiplier];
         [(RCTShadowText *)shadowView recomputeText];
       } else if ([shadowView isKindOfClass:[RCTShadowRawText class]]) {
         RCTLogError(@"Raw text cannot be used outside of a <Text> tag. Not rendering string: '%@'",

Libraries/Text/Text.js

@@ -30,6 +30,7 @@ var viewConfig = {
   validAttributes: merge(ReactNativeViewAttributes.UIView, {
     isHighlighted: true,
     numberOfLines: true,
+    allowFontScaling: true,
   }),
   uiViewClassName: 'RCTText',
 };
@@ -99,15 +100,25 @@ var Text = React.createClass({
      * Used to locate this view in end-to-end tests.
      */
     testID: React.PropTypes.string,
+    /**
+     * Specifies should fonts scale to respect Text Size accessibility setting on iOS.
+     */
+    allowFontScaling: React.PropTypes.bool,
   },
 
   viewConfig: viewConfig,
 
-  getInitialState: function() {
+  getInitialState: function(): Object {
     return merge(this.touchableGetInitialState(), {
       isHighlighted: false,
     });
   },
+  
+  getDefaultProps: function(): Object {
+    return {
+      allowFontScaling: true,
+    };
+  },
 
   onStartShouldSetResponder: function(): bool {
     var shouldSetFromProps = this.props.onStartShouldSetResponder &&

React/Base/RCTConvert.h

@@ -91,7 +91,8 @@ typedef NSURL RCTFileURL;
 + (UIFont *)UIFont:(UIFont *)font withStyle:(id)json;
 + (UIFont *)UIFont:(UIFont *)font withFamily:(id)json;
 + (UIFont *)UIFont:(UIFont *)font withFamily:(id)family
-              size:(id)size weight:(id)weight style:(id)style;
+              size:(id)size weight:(id)weight style:(id)style
+   scaleMultiplier:(CGFloat)scaleMultiplier;
 
 typedef NSArray NSStringArray;
 + (NSStringArray *)NSStringArray:(id)json;

React/Base/RCTConvert.m

@@ -779,31 +779,33 @@ + (UIFont *)UIFont:(id)json
            withFamily:json[@"fontFamily"]
                  size:json[@"fontSize"]
                weight:json[@"fontWeight"]
-                style:json[@"fontStyle"]];
+                style:json[@"fontStyle"]
+          scaleMultiplier:1.0f];
 }
 
 + (UIFont *)UIFont:(UIFont *)font withSize:(id)json
 {
-  return [self UIFont:font withFamily:nil size:json weight:nil style:nil];
+  return [self UIFont:font withFamily:nil size:json weight:nil style:nil scaleMultiplier:1.0];
 }
 
 + (UIFont *)UIFont:(UIFont *)font withWeight:(id)json
 {
-  return [self UIFont:font withFamily:nil size:nil weight:json style:nil];
+  return [self UIFont:font withFamily:nil size:nil weight:json style:nil scaleMultiplier:1.0];
 }
 
 + (UIFont *)UIFont:(UIFont *)font withStyle:(id)json
 {
-  return [self UIFont:font withFamily:nil size:nil weight:nil style:json];
+  return [self UIFont:font withFamily:nil size:nil weight:nil style:json scaleMultiplier:1.0];
 }
 
 + (UIFont *)UIFont:(UIFont *)font withFamily:(id)json
 {
-  return [self UIFont:font withFamily:json size:nil weight:nil style:nil];
+  return [self UIFont:font withFamily:json size:nil weight:nil style:nil scaleMultiplier:1.0];
 }
 
 + (UIFont *)UIFont:(UIFont *)font withFamily:(id)family
               size:(id)size weight:(id)weight style:(id)style
+   scaleMultiplier:(CGFloat)scaleMultiplier
 {
   // Defaults
   NSString *const RCTDefaultFontFamily = @"System";
@@ -828,6 +830,9 @@ + (UIFont *)UIFont:(UIFont *)font withFamily:(id)family
 
   // Get font attributes
   fontSize = [self CGFloat:size] ?: fontSize;
+  if (scaleMultiplier > 0.0 && scaleMultiplier != 1.0) {
+    fontSize = round(fontSize * scaleMultiplier);
+  }
   familyName = [self NSString:family] ?: familyName;
   isItalic = style ? [self RCTFontStyle:style] : isItalic;
   fontWeight = weight ? [self RCTFontWeight:weight] : fontWeight;

React/Modules/RCTAccessibilityManager.h

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <Foundation/Foundation.h>
+
+#import "RCTBridgeModule.h"
+#import "RCTBridge.h"
+
+extern NSString *const RCTAccessibilityManagerDidUpdateMultiplierNotification; // posted when multiplier is changed
+
+@interface RCTAccessibilityManager : NSObject <RCTBridgeModule>
+
+@property (nonatomic, readonly) CGFloat multiplier;
+
+@end
+
+@interface RCTBridge (RCTAccessibilityManager)
+
+@property (nonatomic, readonly) RCTAccessibilityManager *accessibilityManager;
+
+@end