save clipPath into svg instance

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

@@ -35,28 +35,29 @@ public class RNSVGGroupShadowNode extends RNSVGVirtualNode {
 
     public void draw(Canvas canvas, Paint paint, float opacity) {
         opacity *= mOpacity;
-        if (opacity > MIN_OPACITY_FOR_DRAW) {
-            int count = saveAndSetupCanvas(canvas);
-            clip(canvas, paint);
         RNSVGSvgViewShadowNode svg = getSvgShadowNode();
 
         if (mAsClipPath == null) {
+            if (opacity > MIN_OPACITY_FOR_DRAW) {
+                int count = saveAndSetupCanvas(canvas);
+                clip(canvas, paint);
+
                 for (int i = 0; i < getChildCount(); i++) {
                     RNSVGVirtualNode child = (RNSVGVirtualNode) getChildAt(i);
                     child.setupDimensions(canvas);
                     child.draw(canvas, paint, opacity);
-                    //child.markUpdateSeen();
 
                     if (child.isTouchable()) {
                         svg.enableTouchEvents();
                     }
                 }
-            } else {
-                defineClipPath(getPath(canvas, paint), mAsClipPath);
-            }
 
                 restoreCanvas(canvas, count);
             }
+
+        } else {
+            svg.defineClipPath(getPath(canvas, paint), mAsClipPath);
+        }
     }
 
     @Override

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

@@ -13,6 +13,7 @@ import android.graphics.Bitmap;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
+import android.graphics.Path;
 import android.graphics.Point;
 import android.util.Log;
 import android.view.ViewGroup;
@@ -20,6 +21,9 @@ import android.view.ViewGroup;
 import com.facebook.react.uimanager.LayoutShadowNode;
 import com.facebook.react.uimanager.UIViewOperationQueue;
 
+import java.util.HashMap;
+import java.util.Map;
+
 /**
  * Shadow node for RNSVG virtual tree root - RNSVGSvgView
  */
@@ -29,6 +33,8 @@ public class RNSVGSvgViewShadowNode extends LayoutShadowNode {
 
     private boolean mTouchable = false;
 
+    private static final Map<String, Path> mDefinedClipPaths = new HashMap<>();
+
     @Override
     public void onCollectExtraUpdates(UIViewOperationQueue uiUpdater) {
         super.onCollectExtraUpdates(uiUpdater);
@@ -53,7 +59,6 @@ public class RNSVGSvgViewShadowNode extends LayoutShadowNode {
             RNSVGVirtualNode child = (RNSVGVirtualNode) getChildAt(i);
             child.setupDimensions(canvas);
             child.draw(canvas, paint, 1f);
-            //child.markUpdateSeen();
 
             if (child.isTouchable() && !mTouchable) {
                 mTouchable = true;
@@ -84,6 +89,19 @@ public class RNSVGSvgViewShadowNode extends LayoutShadowNode {
         return viewTag;
     }
 
+    public void defineClipPath(Path clipPath, String clipPathId) {
+        mDefinedClipPaths.put(clipPathId, clipPath);
+    }
+
+    // TODO: remove unmounted clipPath
+    public void removeClipPath(String clipPathId) {
+        mDefinedClipPaths.remove(clipPathId);
+    }
+
+    public Path getDefinedClipPath(String clipPathId) {
+        return mDefinedClipPaths.get(clipPathId);
+    }
+
     public void increaseCounter() {
         mCounter++;
     }

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

@@ -39,7 +39,6 @@ import java.util.Map;
  * indirectly for {@link RNSVGTextShadowNode}.
  */
 public abstract class RNSVGVirtualNode extends LayoutShadowNode {
-    private static final Map<String, Path> CLIP_PATHS = new HashMap<>();
 
     protected static final float MIN_OPACITY_FOR_DRAW = 0.01f;
 
@@ -48,7 +47,6 @@ public abstract class RNSVGVirtualNode extends LayoutShadowNode {
     protected float mOpacity = 1f;
     protected  @Nullable Matrix mMatrix = new Matrix();
 
-    private @Nullable String mDefinedClipPathId;
     protected @Nullable Path mClipPath;
     protected @Nullable String mClipPathId;
     private static final int PATH_TYPE_ARC = 4;
@@ -68,6 +66,8 @@ public abstract class RNSVGVirtualNode extends LayoutShadowNode {
     protected int mWidth;
     protected int mHeight;
 
+    private RNSVGSvgViewShadowNode mSvgShadowNode;
+
     public RNSVGVirtualNode() {
         mScale = DisplayMetricsHolder.getWindowDisplayMetrics().density;
     }
@@ -267,7 +267,7 @@ public abstract class RNSVGVirtualNode extends LayoutShadowNode {
     protected void clip(Canvas canvas, Paint paint) {
         Path clip = mClipPath;
         if (clip == null && mClipPathId != null) {
-            clip = CLIP_PATHS.get(mClipPathId);
+            clip = getSvgShadowNode().getDefinedClipPath(mClipPathId);
         }
 
         if (clip != null) {
@@ -278,11 +278,6 @@ public abstract class RNSVGVirtualNode extends LayoutShadowNode {
 
     abstract public int hitTest(Point point, View view);
 
-    protected void defineClipPath(Path clipPath, String clipPathId) {
-        CLIP_PATHS.put(clipPathId, clipPath);
-        mDefinedClipPathId = clipPathId;
-    }
-
     public boolean isTouchable() {
         return mTouchable;
     }
@@ -290,6 +285,10 @@ public abstract class RNSVGVirtualNode extends LayoutShadowNode {
     abstract protected Path getPath(Canvas canvas, Paint paint);
 
     protected RNSVGSvgViewShadowNode getSvgShadowNode() {
+        if (mSvgShadowNode != null) {
+            return mSvgShadowNode;
+        }
+
         ReactShadowNode parent = getParent();
 
         while (!(parent instanceof RNSVGSvgViewShadowNode)) {
@@ -299,18 +298,12 @@ public abstract class RNSVGVirtualNode extends LayoutShadowNode {
                 parent = parent.getParent();
             }
         }
-        return (RNSVGSvgViewShadowNode)parent;
+        mSvgShadowNode = (RNSVGSvgViewShadowNode) parent;
+        return mSvgShadowNode;
     }
 
     protected void setupDimensions(Canvas canvas) {
         mWidth = canvas.getWidth();
         mHeight = canvas.getHeight();
     }
-
-
-    protected void finalize() {
-        if (mDefinedClipPathId != null) {
-            CLIP_PATHS.remove(mDefinedClipPathId);
-        }
-    }
 }

elements/ClipPath.js

@@ -29,7 +29,6 @@ class ClipPath extends Component{
 
         return <NativeGroup
             asClipPath={this.id}
-            opacity={1}
         >{this.props.children}</NativeGroup>;
     }
 }