From a04322fa1b79b6150fc3531cda8377e819a6baa9 Mon Sep 17 00:00:00 2001
From: Valentin Shergin <shergin@fb.com>
Date: Tue, 20 Jun 2017 17:12:52 -0700
Subject: [PATCH] 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 |  1 +
 React/Views/UIView+React.h   |  8 ++++++++
 React/Views/UIView+React.m   | 16 ++++++++++++++++
 3 files changed, 25 insertions(+)

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