From 38b5506599b12d5c6ac3a2dd3f047ccf067cfc71 Mon Sep 17 00:00:00 2001
From: Ramanpreet Nara <ramanpreet@fb.com>
Date: Wed, 18 Oct 2017 19:29:40 -0700
Subject: [PATCH] iOS: Forward RN start/end styles to Yoga

Reviewed By: mmmulani

Differential Revision: D5853589

fbshipit-source-id: 9acee0993a25dce5f4b1ce506746b789b1c4c763
---
 Libraries/StyleSheet/LayoutPropTypes.js | 22 ++++++++++++++++++
 React/Views/RCTShadowView.h             |  2 ++
 React/Views/RCTShadowView.m             | 30 +++++++++++++++++++++++--
 React/Views/RCTViewManager.m            |  4 +++-
 4 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/Libraries/StyleSheet/LayoutPropTypes.js b/Libraries/StyleSheet/LayoutPropTypes.js
index 69d7310946d087..f448965987d16f 100644
--- a/Libraries/StyleSheet/LayoutPropTypes.js
+++ b/Libraries/StyleSheet/LayoutPropTypes.js
@@ -59,6 +59,28 @@ var LayoutPropTypes = {
     ReactPropTypes.string,
   ]),
 
+  /**
+   * When the direction is `ltr`, `start` is equivalent to `left`.
+   * When the direction is `rtl`, `start` is equivalent to `right`.
+   *
+   * This style takes precedence over the `left`, `right`, and `end` styles.
+   */
+  start: ReactPropTypes.oneOfType([
+    ReactPropTypes.number,
+    ReactPropTypes.string,
+  ]),
+
+  /**
+   * When the direction is `ltr`, `end` is equivalent to `right`.
+   * When the direction is `rtl`, `end` is equivalent to `left`.
+   *
+   * This style takes precedence over the `left` and `right` styles.
+   */
+  end: ReactPropTypes.oneOfType([
+    ReactPropTypes.number,
+    ReactPropTypes.string,
+  ]),
+
   /** `top` is the number of logical pixels to offset the top edge of
    *  this component.
    *
diff --git a/React/Views/RCTShadowView.h b/React/Views/RCTShadowView.h
index 17f1638282624a..ca9ac1665bdb48 100644
--- a/React/Views/RCTShadowView.h
+++ b/React/Views/RCTShadowView.h
@@ -97,6 +97,8 @@ typedef void (^RCTApplierBlock)(NSDictionary<NSNumber *, UIView *> *viewRegistry
 @property (nonatomic, assign) YGValue left;
 @property (nonatomic, assign) YGValue bottom;
 @property (nonatomic, assign) YGValue right;
+@property (nonatomic, assign) YGValue start;
+@property (nonatomic, assign) YGValue end;
 
 @property (nonatomic, assign) YGValue width;
 @property (nonatomic, assign) YGValue height;
diff --git a/React/Views/RCTShadowView.m b/React/Views/RCTShadowView.m
index a09705d8471fe3..602b815dbe9c41 100644
--- a/React/Views/RCTShadowView.m
+++ b/React/Views/RCTShadowView.m
@@ -14,6 +14,7 @@
 #import "RCTUtils.h"
 #import "UIView+Private.h"
 #import "UIView+React.h"
+#import "RCTI18nUtil.h"
 
 typedef void (^RCTActionBlock)(RCTShadowView *shadowViewSelf, id value);
 typedef void (^RCTResetActionBlock)(RCTShadowView *shadowViewSelf);
@@ -600,10 +601,35 @@ - (YGValue)getProp                                                  \
   return YGNodeStyleGetPosition(_yogaNode, edge);                   \
 }
 
+
 RCT_POSITION_PROPERTY(Top, top, YGEdgeTop)
-RCT_POSITION_PROPERTY(Right, right, YGEdgeEnd)
 RCT_POSITION_PROPERTY(Bottom, bottom, YGEdgeBottom)
-RCT_POSITION_PROPERTY(Left, left, YGEdgeStart)
+RCT_POSITION_PROPERTY(Start, start, YGEdgeStart)
+RCT_POSITION_PROPERTY(End, end, YGEdgeEnd)
+
+- (void)setLeft:(YGValue)value
+{
+  YGEdge edge = [[RCTI18nUtil sharedInstance] doesRTLFlipLeftAndRightStyles] ? YGEdgeStart : YGEdgeLeft;
+  RCT_SET_YGVALUE(value, YGNodeStyleSetPosition, _yogaNode, edge);
+  [self dirtyText];
+}
+- (YGValue)left
+{
+  YGEdge edge = [[RCTI18nUtil sharedInstance] doesRTLFlipLeftAndRightStyles] ? YGEdgeStart : YGEdgeLeft;
+  return YGNodeStyleGetPosition(_yogaNode, edge);
+}
+
+- (void)setRight:(YGValue)value
+{
+  YGEdge edge = [[RCTI18nUtil sharedInstance] doesRTLFlipLeftAndRightStyles] ? YGEdgeEnd : YGEdgeRight;
+  RCT_SET_YGVALUE(value, YGNodeStyleSetPosition, _yogaNode, edge);
+  [self dirtyText];
+}
+- (YGValue)right
+{
+  YGEdge edge = [[RCTI18nUtil sharedInstance] doesRTLFlipLeftAndRightStyles] ? YGEdgeEnd : YGEdgeRight;
+  return YGNodeStyleGetPosition(_yogaNode, edge);
+}
 
 // Size
 
diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m
index fd936ec3ac1cc3..72de246dba539b 100644
--- a/React/Views/RCTViewManager.m
+++ b/React/Views/RCTViewManager.m
@@ -269,8 +269,10 @@ - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(__unused NSDictio
 
 RCT_EXPORT_SHADOW_PROPERTY(top, YGValue)
 RCT_EXPORT_SHADOW_PROPERTY(right, YGValue)
+RCT_EXPORT_SHADOW_PROPERTY(start, YGValue)
+RCT_EXPORT_SHADOW_PROPERTY(end, YGValue)
 RCT_EXPORT_SHADOW_PROPERTY(bottom, YGValue)
-RCT_EXPORT_SHADOW_PROPERTY(left, YGValue);
+RCT_EXPORT_SHADOW_PROPERTY(left, YGValue)
 
 RCT_EXPORT_SHADOW_PROPERTY(width, YGValue)
 RCT_EXPORT_SHADOW_PROPERTY(height, YGValue)