Font size in Text now respects preferredContentSizeCategory

Summary:
Changelog: [Internal]

Use LayoutContext to pass `fontSizeMultiplier` down to ParagrapShadowNode.

Reviewed By: shergin

Differential Revision: D20184596

fbshipit-source-id: 3965a127069a21328ed19cb3f9732f0a2d1c4d58

React/Base/RCTUtils.h

@@ -44,6 +44,8 @@ RCT_EXTERN void RCTUnsafeExecuteOnMainQueueSync(dispatch_block_t block);
 RCT_EXTERN CGFloat RCTScreenScale(void);
 RCT_EXTERN CGSize RCTScreenSize(void);
 
+RCT_EXTERN CGFloat RCTFontSizeMultiplier(void);
+
 // Round float coordinates to nearest whole screen pixel (not point)
 RCT_EXTERN CGFloat RCTRoundPixelValue(CGFloat value);
 RCT_EXTERN CGFloat RCTCeilPixelValue(CGFloat value);

React/Base/RCTUtils.m

@@ -301,6 +301,30 @@ CGFloat RCTScreenScale()
   return scale;
 }
 
+CGFloat RCTFontSizeMultiplier()
+{
+  static NSDictionary<NSString *, NSNumber *> *mapping;
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    mapping = @{
+       UIContentSizeCategoryExtraSmall: @0.823,
+       UIContentSizeCategorySmall: @0.882,
+       UIContentSizeCategoryMedium: @0.941,
+       UIContentSizeCategoryLarge: @1.0,
+       UIContentSizeCategoryExtraLarge: @1.118,
+       UIContentSizeCategoryExtraExtraLarge: @1.235,
+       UIContentSizeCategoryExtraExtraExtraLarge: @1.353,
+       UIContentSizeCategoryAccessibilityMedium: @1.786,
+       UIContentSizeCategoryAccessibilityLarge: @2.143,
+       UIContentSizeCategoryAccessibilityExtraLarge: @2.643,
+       UIContentSizeCategoryAccessibilityExtraExtraLarge: @3.143,
+       UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: @3.571
+     };
+  });
+
+  return mapping[RCTSharedApplication().preferredContentSizeCategory].floatValue;
+}
+
 CGSize RCTScreenSize()
 {
   // FIXME: this caches the bounds at app start, whatever those were, and then

React/Fabric/RCTSurfacePresenter.mm

@@ -39,6 +39,7 @@ using namespace facebook::react;
 static LayoutContext RCTCurrentLayoutContext() {
   return {
     .pointScaleFactor = RCTScreenScale(),
+    .fontSizeMultiplier = RCTFontSizeMultiplier()
   };
 }
 

ReactCommon/fabric/components/text/paragraph/ParagraphShadowNode.cpp

@@ -15,9 +15,10 @@ namespace react {
 
 char const ParagraphComponentName[] = "Paragraph";
 
-AttributedString ParagraphShadowNode::getAttributedString() const {
+AttributedString ParagraphShadowNode::getAttributedString(Float fontSizeMultiplier) const {
   if (!cachedAttributedString_.has_value()) {
     auto textAttributes = TextAttributes::defaultTextAttributes();
+    textAttributes.fontSizeMultiplier = fontSizeMultiplier;
     textAttributes.apply(getConcreteProps().textAttributes);
 
     cachedAttributedString_ =
@@ -33,10 +34,10 @@ void ParagraphShadowNode::setTextLayoutManager(
   textLayoutManager_ = textLayoutManager;
 }
 
-void ParagraphShadowNode::updateStateIfNeeded() {
+void ParagraphShadowNode::updateStateIfNeeded(LayoutContext layoutContext) {
   ensureUnsealed();
 
-  auto attributedString = getAttributedString();
+  auto attributedString = getAttributedString(layoutContext.fontSizeMultiplier);
   auto const &state = getStateData();
 
   assert(textLayoutManager_);
@@ -57,7 +58,8 @@ void ParagraphShadowNode::updateStateIfNeeded() {
 #pragma mark - LayoutableShadowNode
 
 Size ParagraphShadowNode::measureContent(LayoutConstraints layoutConstraints, LayoutContext layoutContext) const {
-  AttributedString attributedString = getAttributedString();
+  AttributedString attributedString = getAttributedString(layoutContext.fontSizeMultiplier);
+
   if (attributedString.isEmpty()) {
     return layoutConstraints.clamp({0, 0});
   }
@@ -69,7 +71,7 @@ Size ParagraphShadowNode::measureContent(LayoutConstraints layoutConstraints, La
 }
 
 void ParagraphShadowNode::layout(LayoutContext layoutContext) {
-  updateStateIfNeeded();
+  updateStateIfNeeded(layoutContext);
   ConcreteViewShadowNode::layout(layoutContext);
 }
 

ReactCommon/fabric/components/text/paragraph/ParagraphShadowNode.h

@@ -47,7 +47,7 @@ class ParagraphShadowNode : public ConcreteViewShadowNode<
   /*
    * Returns a `AttributedString` which represents text content of the node.
    */
-  AttributedString getAttributedString() const;
+  AttributedString getAttributedString(Float fontSizeMultiplier) const;
 
   /*
    * Associates a shared TextLayoutManager with the node.
@@ -66,7 +66,7 @@ class ParagraphShadowNode : public ConcreteViewShadowNode<
    * Creates a `State` object (with `AttributedText` and
    * `TextLayoutManager`) if needed.
    */
-  void updateStateIfNeeded();
+  void updateStateIfNeeded(LayoutContext layoutContext);
 
   SharedTextLayoutManager textLayoutManager_;
 

ReactCommon/fabric/core/layout/LayoutContext.h

@@ -33,6 +33,11 @@ struct LayoutContext {
    */
   Float pointScaleFactor{1.0};
 
+  /*
+   * Multiplier used to change size of the font in surface.
+   */
+  Float fontSizeMultiplier{1.0};
+
   /*
    * A raw pointer to list of raw pointers to `LayoutableShadowNode`s that were
    * affected by the re-layout pass. If the field is not `nullptr`, a particular