Add display:none support to react native

Summary:
This diff adds display:none support to React Native. This enables hiding components which still calling their render method and keeping them within the state of your application. This enables preserving state in a component even though the component is not visible. Previously this was often implemented by rendering a component off screen as a work around. See below playground for usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white'}}>
        <View style={{width: 100, height: 100, display: 'none', backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, backgroundColor: 'blue'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611771

fbshipit-source-id: 0dbe0494d989df42994ab9ad5125d47f3233cc5a

Author: Emil Sjolander

Libraries/StyleSheet/LayoutPropTypes.js

@@ -27,6 +27,13 @@ var ReactPropTypes = require('React').PropTypes;
  * algorithm and affect the positioning and sizing of views.
  */
 var LayoutPropTypes = {
+  /** `display` sets the display type of this component.
+   *
+   *  It works similarly to `display` in CSS, but only support 'flex' and 'none'.
+   *  'flex' is the default.
+   */
+  display: ReactPropTypes.string,
+
   /** `width` sets the width of this component.
    *
    *  It works similarly to `width` in CSS, but in React Native you

React/Base/RCTConvert.h

@@ -112,6 +112,7 @@ typedef id NSPropertyList;
 
 typedef BOOL css_backface_visibility_t;
 + (YGOverflow)YGOverflow:(id)json;
++ (YGDisplay)YGDisplay:(id)json;
 + (css_backface_visibility_t)css_backface_visibility_t:(id)json;
 + (YGFlexDirection)YGFlexDirection:(id)json;
 + (YGJustify)YGJustify:(id)json;

React/Base/RCTConvert.m

@@ -645,6 +645,11 @@ + (NSPropertyList)NSPropertyList:(id)json
   @"scroll": @(YGOverflowScroll),
 }), YGOverflowVisible, intValue)
 
+RCT_ENUM_CONVERTER(YGDisplay, (@{
+  @"flex": @(YGDisplayFlex),
+  @"none": @(YGDisplayNone),
+}), YGDisplayFlex, intValue)
+
 RCT_ENUM_CONVERTER(YGFlexDirection, (@{
   @"row": @(YGFlexDirectionRow),
   @"row-reverse": @(YGFlexDirectionRowReverse),

React/Views/RCTShadowView.h

@@ -133,6 +133,7 @@ typedef void (^RCTApplierBlock)(NSDictionary<NSNumber *, UIView *> *viewRegistry
 @property (nonatomic, assign) YGAlign alignContent;
 @property (nonatomic, assign) YGPositionType position;
 @property (nonatomic, assign) YGWrap flexWrap;
+@property (nonatomic, assign) YGDisplay display;
 
 @property (nonatomic, assign) float flexGrow;
 @property (nonatomic, assign) float flexShrink;

React/Views/RCTShadowView.m

@@ -704,6 +704,7 @@ - (type)getProp                                             \
 RCT_STYLE_PROPERTY(Position, position, PositionType, YGPositionType)
 RCT_STYLE_PROPERTY(FlexWrap, flexWrap, FlexWrap, YGWrap)
 RCT_STYLE_PROPERTY(Overflow, overflow, Overflow, YGOverflow)
+RCT_STYLE_PROPERTY(Display, display, Display, YGDisplay)
 RCT_STYLE_PROPERTY(Direction, direction, Direction, YGDirection)
 RCT_STYLE_PROPERTY(AspectRatio, aspectRatio, AspectRatio, float)
 

React/Views/RCTViewManager.m

@@ -310,6 +310,7 @@ - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(__unused NSDictio
 RCT_EXPORT_SHADOW_PROPERTY(aspectRatio, float)
 
 RCT_EXPORT_SHADOW_PROPERTY(overflow, YGOverflow)
+RCT_EXPORT_SHADOW_PROPERTY(display, YGDisplay)
 
 RCT_EXPORT_SHADOW_PROPERTY(onLayout, RCTDirectEventBlock)
 

ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java

@@ -11,6 +11,7 @@
 
 import com.facebook.yoga.YogaAlign;
 import com.facebook.yoga.YogaConstants;
+import com.facebook.yoga.YogaDisplay;
 import com.facebook.yoga.YogaFlexDirection;
 import com.facebook.yoga.YogaJustify;
 import com.facebook.yoga.YogaOverflow;
@@ -311,6 +312,15 @@ public void setOverflow(@Nullable String overflow) {
             overflow.toUpperCase(Locale.US).replace("-", "_")));
   }
 
+  @ReactProp(name = ViewProps.DISPLAY)
+  public void setDisplay(@Nullable String display) {
+    if (isVirtual()) {
+      return;
+    }
+    setDisplay(display == null ? YogaDisplay.FLEX : YogaDisplay.valueOf(
+            display.toUpperCase(Locale.US).replace("-", "_")));
+  }
+
   @ReactPropGroup(names = {
       ViewProps.MARGIN,
       ViewProps.MARGIN_VERTICAL,

ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java

@@ -15,6 +15,7 @@
 import java.util.ArrayList;
 
 import com.facebook.yoga.YogaAlign;
+import com.facebook.yoga.YogaDisplay;
 import com.facebook.yoga.YogaEdge;
 import com.facebook.yoga.YogaConstants;
 import com.facebook.yoga.YogaDirection;
@@ -662,6 +663,10 @@ public void setOverflow(YogaOverflow overflow) {
     mYogaNode.setOverflow(overflow);
   }
 
+  public void setDisplay(YogaDisplay display) {
+    mYogaNode.setDisplay(display);
+  }
+
   public void setMargin(int spacingType, float margin) {
     mYogaNode.setMargin(YogaEdge.fromInt(spacingType), margin);
   }

ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java

@@ -27,6 +27,7 @@ public class ViewProps {
   public static final String ALIGN_SELF = "alignSelf";
   public static final String ALIGN_CONTENT = "alignContent";
   public static final String OVERFLOW = "overflow";
+  public static final String DISPLAY = "display";
   public static final String BOTTOM = "bottom";
   public static final String COLLAPSABLE = "collapsable";
   public static final String FLEX = "flex";
@@ -124,6 +125,7 @@ public class ViewProps {
             JUSTIFY_CONTENT,
             OVERFLOW,
             ALIGN_CONTENT,
+            DISPLAY,
 
             /* position */
             POSITION,