Permalink
Browse files

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
  • Loading branch information...
emilsjolander authored and facebook-github-bot committed Mar 1, 2017
1 parent 31f848a commit 4d69f4b2d1cf4f2e8265fe5758f28086f1b67500
@@ -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
View
@@ -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;
View
@@ -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),
@@ -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;
@@ -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)
@@ -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)
@@ -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,
@@ -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);
}
@@ -27,6 +27,7 @@
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 @@
JUSTIFY_CONTENT,
OVERFLOW,
ALIGN_CONTENT,
DISPLAY,
/* position */
POSITION,

1 comment on commit 4d69f4b

@grundmanise

This comment has been minimized.

Show comment
Hide comment
@grundmanise

grundmanise Nov 28, 2017

@emilsjolander could you please elaborate a bit on this, does a component still consumes memory with "display: none"?

grundmanise commented on 4d69f4b Nov 28, 2017

@emilsjolander could you please elaborate a bit on this, does a component still consumes memory with "display: none"?

Please sign in to comment.