diff --git a/Libraries/StyleSheet/LayoutPropTypes.js b/Libraries/StyleSheet/LayoutPropTypes.js index 69d731094..f44896598 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 17f163828..ca9ac1665 100644 --- a/React/Views/RCTShadowView.h +++ b/React/Views/RCTShadowView.h @@ -97,6 +97,8 @@ typedef void (^RCTApplierBlock)(NSDictionary *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 a09705d84..602b815db 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 @@ 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 diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index fd936ec3a..72de246db 100644 --- a/React/Views/RCTViewManager.m +++ b/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)