From 0a70c026cba183ba7cd4ca894c490fdede1358d3 Mon Sep 17 00:00:00 2001
From: Ramanpreet Nara <ramanpreet@fb.com>
Date: Wed, 18 Oct 2017 19:29:44 -0700
Subject: [PATCH] iOS: Implement padding(Start|End) styles for RN

Reviewed By: mmmulani

Differential Revision: D5876934

fbshipit-source-id: 55fc49e0fddeaf0e6541d3159f35783e02bd6260
---
 Libraries/StyleSheet/LayoutPropTypes.js | 18 ++++++++++++++++++
 React/Views/RCTShadowView.h             |  2 ++
 React/Views/RCTShadowView.m             | 15 +++++++++++++--
 React/Views/RCTViewManager.m            |  2 ++
 4 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/Libraries/StyleSheet/LayoutPropTypes.js b/Libraries/StyleSheet/LayoutPropTypes.js
index d6c4c9964..fb2359b31 100644
--- a/Libraries/StyleSheet/LayoutPropTypes.js
+++ b/Libraries/StyleSheet/LayoutPropTypes.js
@@ -313,6 +313,24 @@ var LayoutPropTypes = {
     ReactPropTypes.string,
   ]),
 
+  /**
+   * When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`.
+   * When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
+   */
+  paddingStart: ReactPropTypes.oneOfType([
+    ReactPropTypes.number,
+    ReactPropTypes.string,
+  ]),
+
+  /**
+   * When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`.
+   * When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
+   */
+  paddingEnd: ReactPropTypes.oneOfType([
+    ReactPropTypes.number,
+    ReactPropTypes.string,
+  ]),
+
   /** `borderWidth` works like `border-width` in CSS.
    * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
    * for more details.
diff --git a/React/Views/RCTShadowView.h b/React/Views/RCTShadowView.h
index 884cb3f58..041efdf9e 100644
--- a/React/Views/RCTShadowView.h
+++ b/React/Views/RCTShadowView.h
@@ -146,6 +146,8 @@ typedef void (^RCTApplierBlock)(NSDictionary<NSNumber *, UIView *> *viewRegistry
 @property (nonatomic, assign) YGValue paddingLeft;
 @property (nonatomic, assign) YGValue paddingBottom;
 @property (nonatomic, assign) YGValue paddingRight;
+@property (nonatomic, assign) YGValue paddingStart;
+@property (nonatomic, assign) YGValue paddingEnd;
 
 /**
  * Flexbox properties. All zero/disabled by default
diff --git a/React/Views/RCTShadowView.m b/React/Views/RCTShadowView.m
index 5879e8b05..57e3bd2a8 100644
--- a/React/Views/RCTShadowView.m
+++ b/React/Views/RCTShadowView.m
@@ -103,8 +103,17 @@ switch (ygvalue.unit) {                            \
 }
 
 static void RCTProcessMetaPropsPadding(const YGValue metaProps[META_PROP_COUNT], YGNodeRef node) {
-  RCT_SET_YGVALUE(metaProps[META_PROP_LEFT], YGNodeStyleSetPadding, node, YGEdgeStart);
-  RCT_SET_YGVALUE(metaProps[META_PROP_RIGHT], YGNodeStyleSetPadding, node, YGEdgeEnd);
+  if (![[RCTI18nUtil sharedInstance] doesRTLFlipLeftAndRightStyles]) {
+    RCT_SET_YGVALUE(metaProps[META_PROP_START], YGNodeStyleSetPadding, node, YGEdgeStart);
+    RCT_SET_YGVALUE(metaProps[META_PROP_END], YGNodeStyleSetPadding, node, YGEdgeEnd);
+    RCT_SET_YGVALUE(metaProps[META_PROP_LEFT], YGNodeStyleSetPadding, node, YGEdgeLeft);
+    RCT_SET_YGVALUE(metaProps[META_PROP_RIGHT], YGNodeStyleSetPadding, node, YGEdgeRight);
+  } else {
+    YGValue start = metaProps[META_PROP_START].unit == YGUnitUndefined ? metaProps[META_PROP_LEFT] : metaProps[META_PROP_START];
+    YGValue end = metaProps[META_PROP_END].unit == YGUnitUndefined ? metaProps[META_PROP_RIGHT] : metaProps[META_PROP_END];
+    RCT_SET_YGVALUE(start, YGNodeStyleSetPadding, node, YGEdgeStart);
+    RCT_SET_YGVALUE(end, YGNodeStyleSetPadding, node, YGEdgeEnd);
+  }
   RCT_SET_YGVALUE(metaProps[META_PROP_TOP], YGNodeStyleSetPadding, node, YGEdgeTop);
   RCT_SET_YGVALUE(metaProps[META_PROP_BOTTOM], YGNodeStyleSetPadding, node, YGEdgeBottom);
   RCT_SET_YGVALUE(metaProps[META_PROP_HORIZONTAL], YGNodeStyleSetPadding, node, YGEdgeHorizontal);
@@ -549,6 +558,8 @@ RCT_PADDING_PROPERTY(Top, TOP)
 RCT_PADDING_PROPERTY(Left, LEFT)
 RCT_PADDING_PROPERTY(Bottom, BOTTOM)
 RCT_PADDING_PROPERTY(Right, RIGHT)
+RCT_PADDING_PROPERTY(Start, START)
+RCT_PADDING_PROPERTY(End, END)
 
 // Border
 
diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m
index f4e1b8309..0a9ecdce1 100644
--- a/React/Views/RCTViewManager.m
+++ b/React/Views/RCTViewManager.m
@@ -308,6 +308,8 @@ RCT_EXPORT_SHADOW_PROPERTY(paddingTop, YGValue)
 RCT_EXPORT_SHADOW_PROPERTY(paddingRight, YGValue)
 RCT_EXPORT_SHADOW_PROPERTY(paddingBottom, YGValue)
 RCT_EXPORT_SHADOW_PROPERTY(paddingLeft, YGValue)
+RCT_EXPORT_SHADOW_PROPERTY(paddingStart, YGValue)
+RCT_EXPORT_SHADOW_PROPERTY(paddingEnd, YGValue)
 RCT_EXPORT_SHADOW_PROPERTY(paddingVertical, YGValue)
 RCT_EXPORT_SHADOW_PROPERTY(paddingHorizontal, YGValue)
 RCT_EXPORT_SHADOW_PROPERTY(padding, YGValue)