Add RTL support

Summary: Changelog: [internal] layoutDirectionPass down layoutDirection from `RCTSurfacePresenter` down to `YogaLayutableShadowNode`. In `ParagraphShadowNode`, we propagate layoutDirection from yoga node to `TextAttributes.layoutDirection`. Reviewed By: shergin Differential Revision: D20420041 fbshipit-source-id: 86e01d31ea9415acb8579c44c470cac870ec1b8f
facebook · Mar 17, 2020 · 71c7e80 · 71c7e80
1 parent 678f1c4
commit 71c7e80
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/React/Fabric/RCTConversions.h b/React/Fabric/RCTConversions.h
@@ -9,6 +9,7 @@
 
 #import <react/components/view/AccessibilityPrimitives.h>
 #import <react/components/view/primitives.h>
+#import <react/core/LayoutPrimitives.h>
 #import <react/graphics/Color.h>
 #import <react/graphics/Geometry.h>
 #import <react/graphics/Transform.h>
@@ -166,4 +167,9 @@ inline facebook::react::EdgeInsets RCTEdgeInsetsFromUIEdgeInsets(const UIEdgeIns
   return {edgeInsets.left, edgeInsets.top, edgeInsets.right, edgeInsets.bottom};
 }
 
+inline facebook::react::LayoutDirection RCTLayoutDirection(BOOL isRTL)
+{
+  return isRTL ? facebook::react::LayoutDirection::RightToLeft : facebook::react::LayoutDirection::LeftToRight;
+}
+
 NS_ASSUME_NONNULL_END
diff --git a/React/Fabric/RCTSurfacePresenter.mm b/React/Fabric/RCTSurfacePresenter.mm
@@ -14,6 +14,7 @@
 #import <React/RCTComponentViewRegistry.h>
 #import <React/RCTFabricSurface.h>
 #import <React/RCTFollyConvert.h>
+#import <React/RCTI18nUtil.h>
 #import <React/RCTMountingManager.h>
 #import <React/RCTMountingManagerDelegate.h>
 #import <React/RCTScheduler.h>
@@ -137,7 +138,8 @@ - (CGSize)sizeThatFitsMinimumSize:(CGSize)minimumSize
   std::shared_lock<better::shared_mutex> lock(_schedulerMutex);
   LayoutContext layoutContext = {.pointScaleFactor = RCTScreenScale()};
   LayoutConstraints layoutConstraints = {.minimumSize = RCTSizeFromCGSize(minimumSize),
-                                         .maximumSize = RCTSizeFromCGSize(maximumSize)};
+                                         .maximumSize = RCTSizeFromCGSize(maximumSize),
+                                         .layoutDirection = RCTLayoutDirection([[RCTI18nUtil sharedInstance] isRTL])};
   return [_scheduler measureSurfaceWithLayoutConstraints:layoutConstraints
                                            layoutContext:layoutContext
                                                surfaceId:surface.rootTag];
@@ -148,7 +150,8 @@ - (void)setMinimumSize:(CGSize)minimumSize maximumSize:(CGSize)maximumSize surfa
   std::shared_lock<better::shared_mutex> lock(_schedulerMutex);
   LayoutContext layoutContext = {.pointScaleFactor = RCTScreenScale()};
   LayoutConstraints layoutConstraints = {.minimumSize = RCTSizeFromCGSize(minimumSize),
-                                         .maximumSize = RCTSizeFromCGSize(maximumSize)};
+                                         .maximumSize = RCTSizeFromCGSize(maximumSize),
+                                         .layoutDirection = RCTLayoutDirection([[RCTI18nUtil sharedInstance] isRTL])};
   [_scheduler constraintSurfaceLayoutWithLayoutConstraints:layoutConstraints
                                              layoutContext:layoutContext
                                                  surfaceId:surface.rootTag];
@@ -258,7 +261,8 @@ - (void)_startSurface:(RCTFabricSurface *)surface
   LayoutContext layoutContext = {.pointScaleFactor = RCTScreenScale()};
 
   LayoutConstraints layoutConstraints = {.minimumSize = RCTSizeFromCGSize(surface.minimumSize),
-                                         .maximumSize = RCTSizeFromCGSize(surface.maximumSize)};
+                                         .maximumSize = RCTSizeFromCGSize(surface.maximumSize),
+                                         .layoutDirection = RCTLayoutDirection([[RCTI18nUtil sharedInstance] isRTL])};
 
   [_scheduler startSurfaceWithSurfaceId:surface.rootTag
                              moduleName:surface.moduleName

diff --git a/ReactCommon/fabric/components/text/paragraph/ParagraphShadowNode.cpp b/ReactCommon/fabric/components/text/paragraph/ParagraphShadowNode.cpp
@@ -32,7 +32,10 @@ Content const &ParagraphShadowNode::getContent() const {
 
   auto textAttributes = TextAttributes::defaultTextAttributes();
   textAttributes.apply(getConcreteProps().textAttributes);
-
+  textAttributes.layoutDirection =
+      YGNodeLayoutGetDirection(&yogaNode_) == YGDirectionRTL
+      ? LayoutDirection::RightToLeft
+      : LayoutDirection::LeftToRight;
   auto attributedString = AttributedString{};
   auto attachments = Attachments{};
   buildAttributedString(textAttributes, *this, attributedString, attachments);