Fabric/Text: RCTParagraphComponentView

Summary: RCTParagraphComponentView is a UIView which can render text using TextLayoutManager.

Reviewed By: mdvacca

Differential Revision: D7751853

fbshipit-source-id: e6ee9a0f989cdf6e878390d37dbcf8a11ef90bf4

React/Fabric/Mounting/RCTParagraphComponentView.h

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <UIKit/UIKit.h>
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/**
+ * UIView class for <Paragraph> component.
+ */
+@interface RCTParagraphComponentView : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END

React/Fabric/Mounting/RCTParagraphComponentView.mm

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RCTParagraphComponentView.h"
+
+#import <fabric/core/LocalData.h>
+#import <fabric/graphics/Geometry.h>
+#import <fabric/text/ParagraphLocalData.h>
+#import <fabric/text/ParagraphProps.h>
+#import <fabric/textlayoutmanager/TextLayoutManager.h>
+#import <fabric/textlayoutmanager/RCTTextLayoutManager.h>
+
+using namespace facebook::react;
+
+@implementation RCTParagraphComponentView {
+  SharedParagraphLocalData _paragraphLocalData;
+  ParagraphAttributes _paragraphAttributes;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    self.isAccessibilityElement = YES;
+    self.accessibilityTraits |= UIAccessibilityTraitStaticText;
+    self.opaque = NO;
+    self.contentMode = UIViewContentModeRedraw;
+  }
+
+  return self;
+}
+
+- (void)updateProps:(SharedProps)props oldProps:(SharedProps)oldProps
+{
+  [super updateProps:props oldProps:oldProps];
+  auto paragraphProps = std::static_pointer_cast<const ParagraphProps>(props);
+  assert(paragraphProps);
+  _paragraphAttributes = paragraphProps->getParagraphAttributes();
+}
+
+- (void)updateLocalData:(SharedLocalData)localData
+           oldLocalData:(SharedLocalData)oldLocalData
+{
+  _paragraphLocalData = std::static_pointer_cast<const ParagraphLocalData>(localData);
+  assert(_paragraphLocalData);
+  [self setNeedsDisplay];
+}
+
+- (void)drawRect:(CGRect)rect
+{
+  if (!_paragraphLocalData) {
+    return;
+  }
+
+  SharedTextLayoutManager textLayoutManager =
+    _paragraphLocalData->getTextLayoutManager();
+  RCTTextLayoutManager *nativeTextLayoutManager =
+    (__bridge RCTTextLayoutManager *)textLayoutManager->getNativeTextLayoutManager();
+
+  auto contentFrame = _layoutMetrics.getContentFrame();
+  CGRect frame = {
+    .origin = {
+      .x = contentFrame.origin.x,
+      .y = contentFrame.origin.y
+    },
+    .size = {
+      .width = contentFrame.size.width,
+      .height = contentFrame.size.height
+    }
+  };
+
+  [nativeTextLayoutManager drawAttributedString:_paragraphLocalData->getAttributedString()
+                            paragraphAttributes:_paragraphAttributes
+                                          frame:frame];
+}
+
+@end

ReactCommon/fabric/core/layout/LayoutMetrics.h

@@ -23,6 +23,13 @@ struct LayoutMetrics {
   DisplayType displayType {DisplayType::Flex};
   LayoutDirection layoutDirection {LayoutDirection::Undefined};
 
+  Rect getContentFrame() const {
+    return Rect {
+      Point {contentInsets.left, contentInsets.top},
+      Size {frame.size.width - contentInsets.left - contentInsets.right, frame.size.height - contentInsets.top - contentInsets.bottom}
+    };
+  }
+
   bool operator ==(const LayoutMetrics& rhs) const {
     return
       std::tie(this->frame, this->contentInsets, this->borderWidth, this->displayType, this->layoutDirection) ==