Support display: none; style (iOS)

Summary:
Yes, `display: none;` did not work on iOS before this commit.
Now it "just works". It can be useful when some view needs to be hidden temporary and efficiently.

Reviewed By: javache

Differential Revision: D5173936

fbshipit-source-id: 83a03fff04dd3a872d7dd6bf673189f932906776

React/Views/RCTViewManager.m

@@ -257,6 +257,7 @@ - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(__unused NSDictio
 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

React/Views/UIView+React.h

@@ -10,6 +10,7 @@
 #import <UIKit/UIKit.h>
 
 #import <React/RCTComponent.h>
+#import <yoga/YGEnums.h>
 
 @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.
  */

React/Views/UIView+React.m

@@ -87,6 +87,20 @@ - (void)removeReactSubview:(UIView *)subview
   [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 @@ - (void)setReactLayoutDirection:(UIUserInterfaceLayoutDirection)layoutDirection
   }
 }
 
+#pragma mark - zIndex
+
 - (NSInteger)reactZIndex
 {
   return self.layer.zPosition;