iOS: Forward RN start/end styles to Yoga

Reviewed By: mmmulani

Differential Revision: D5853589

fbshipit-source-id: 9acee0993a25dce5f4b1ce506746b789b1c4c763

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.
    *

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;

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 @@ RCT_MIN_MAX_DIMENSION_PROPERTY(MaxHeight, maxHeight, MaxHeight)
   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
 

React/Views/RCTViewManager.m

@@ -269,8 +269,10 @@ RCT_EXPORT_SHADOW_PROPERTY(backgroundColor, UIColor)
 
 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)