diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index 2314bef0b..b3f259fee 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -257,6 +257,7 @@ RCT_VIEW_BORDER_RADIUS_PROPERTY(TopRight) RCT_VIEW_BORDER_RADIUS_PROPERTY(BottomLeft) RCT_VIEW_BORDER_RADIUS_PROPERTY(BottomRight) +RCT_REMAP_VIEW_PROPERTY(display, reactDisplay, YGDisplay) RCT_REMAP_VIEW_PROPERTY(zIndex, reactZIndex, NSInteger) #pragma mark - ShadowView properties diff --git a/React/Views/UIView+React.h b/React/Views/UIView+React.h index ce571f12b..e9103d016 100644 --- a/React/Views/UIView+React.h +++ b/React/Views/UIView+React.h @@ -10,6 +10,7 @@ #import #import +#import @class RCTShadowView; @@ -30,6 +31,13 @@ */ @property (nonatomic, assign) UIUserInterfaceLayoutDirection reactLayoutDirection; +/** + * Yoga `display` style property. Can be `flex` or `none`. + * Defaults to `flex`. + * May be used to temporary hide the view in a very efficient way. + */ +@property (nonatomic, assign) YGDisplay reactDisplay; + /** * The z-index of the view. */ diff --git a/React/Views/UIView+React.m b/React/Views/UIView+React.m index 89fedb24f..0f6707077 100644 --- a/React/Views/UIView+React.m +++ b/React/Views/UIView+React.m @@ -87,6 +87,20 @@ [subview removeFromSuperview]; } +#pragma mark - Display + +- (YGDisplay)reactDisplay +{ + return self.isHidden ? YGDisplayNone : YGDisplayFlex; +} + +- (void)setReactDisplay:(YGDisplay)display +{ + self.hidden = display == YGDisplayNone; +} + +#pragma mark - Layout Direction + - (UIUserInterfaceLayoutDirection)reactLayoutDirection { if ([self respondsToSelector:@selector(semanticContentAttribute)]) { @@ -108,6 +122,8 @@ } } +#pragma mark - zIndex + - (NSInteger)reactZIndex { return self.layer.zPosition;