feat: Implement display="none"

fixes: Enable display svg prop #1220

android/src/main/java/com/horcrux/svg/GroupView.java

@@ -94,6 +94,9 @@ class GroupView extends RenderableView {
             }
             if (child instanceof VirtualView) {
                 VirtualView node = ((VirtualView)child);
+                if ("none".equals(node.mDisplay)) {
+                    continue;
+                }
                 if (node instanceof RenderableView) {
                     ((RenderableView)node).mergeProperties(self);
                 }

android/src/main/java/com/horcrux/svg/RenderableViewManager.java

@@ -1213,6 +1213,11 @@ class RenderableViewManager extends ViewGroupManager<VirtualView> {
         node.setName(name);
     }
 
+    @ReactProp(name = "display")
+    public void setDisplay(VirtualView node, String display) {
+        node.setDisplay(display);
+    }
+
     private void invalidateSvgView(VirtualView node) {
         SvgView view = node.getSvgView();
         if (view!= null) {

android/src/main/java/com/horcrux/svg/VirtualView.java

@@ -77,6 +77,7 @@ abstract public class VirtualView extends ReactViewGroup {
     final float mScale;
     private boolean mResponsible;
     private boolean mOnLayout;
+    String mDisplay;
     String mName;
 
     private SvgView svgView;
@@ -242,6 +243,12 @@ abstract public class VirtualView extends ReactViewGroup {
         invalidate();
     }
 
+    @ReactProp(name = "display")
+    public void setDisplay(String display) {
+        mDisplay = display;
+        invalidate();
+    }
+
     @ReactProp(name = "onLayout")
     public void setOnLayout(boolean onLayout) {
         mOnLayout = onLayout;

ios/Elements/RNSVGGroup.m

@@ -43,6 +43,9 @@
             // no-op
         } else if ([node isKindOfClass:[RNSVGNode class]]) {
             RNSVGNode* svgNode = (RNSVGNode*)node;
+            if (svgNode.display && [@"none" isEqualToString:svgNode.display]) {
+                return YES;
+            }
             if (svgNode.responsible && !self.svgView.responsible) {
                 self.svgView.responsible = YES;
             }

ios/RNSVGNode.h

@@ -27,6 +27,7 @@ extern CGFloat const RNSVG_M_SQRT1_2l;
 extern CGFloat const RNSVG_DEFAULT_FONT_SIZE;
 
 @property (nonatomic, strong) NSString *name;
+@property (nonatomic, strong) NSString *display;
 @property (nonatomic, assign) CGFloat opacity;
 @property (nonatomic, assign) RNSVGCGFCRule clipRule;
 @property (nonatomic, strong) NSString *clipPath;

ios/RNSVGNode.m

@@ -174,6 +174,16 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
     _name = name;
 }
 
+- (void)setDisplay:(NSString *)display
+{
+    if ([display isEqualToString:_display]) {
+        return;
+    }
+
+    [self invalidate];
+    _display = display;
+}
+
 - (void)setOpacity:(CGFloat)opacity
 {
     if (opacity == _opacity) {

ios/ViewManagers/RNSVGNodeManager.m

@@ -229,6 +229,10 @@ RCT_CUSTOM_SHADOW_PROPERTY(aspectRatio, id, RNSVGNode) {}
 
 RCT_CUSTOM_SHADOW_PROPERTY(overflow, id, RNSVGNode) {}
 RCT_CUSTOM_SHADOW_PROPERTY(display, id, RNSVGNode) {}
+RCT_CUSTOM_VIEW_PROPERTY(display, id, RNSVGNode)
+{
+    view.display = json;
+}
 
 RCT_CUSTOM_SHADOW_PROPERTY(direction, id, RNSVGNode) {}
 

src/lib/extract/extractProps.ts

@@ -46,6 +46,7 @@ export default function extractProps(
     markerMid?: string;
     markerEnd?: string;
     clipPath?: string;
+    display?: string;
     opacity?: NumberProp;
     onLayout?: () => void;
     transform?: number[] | string | TransformProps;
@@ -57,11 +58,12 @@ export default function extractProps(
   ref: Object,
 ) {
   const {
+    id,
     opacity,
     onLayout,
-    id,
     clipPath,
     clipRule,
+    display,
     mask,
     marker,
     markerStart = marker,
@@ -85,6 +87,7 @@ export default function extractProps(
     markerEnd?: string;
     clipPath?: string;
     clipRule?: number;
+    display?: string;
   } = {
     matrix,
     ...transformProps,
@@ -93,6 +96,7 @@ export default function extractProps(
     ...extractResponder(props, ref),
     ...extractFill(props, styleProperties),
     ...extractStroke(props, styleProperties),
+    display: display === 'none' ? 'none' : undefined,
   };
 
   if (onLayout) {