diff --git a/android/src/main/java/com/horcrux/svg/ClipPathView.java b/android/src/main/java/com/horcrux/svg/ClipPathView.java
index cba5fb20..1e9363d8 100644
--- a/android/src/main/java/com/horcrux/svg/ClipPathView.java
+++ b/android/src/main/java/com/horcrux/svg/ClipPathView.java
@@ -22,6 +22,7 @@ class ClipPathView extends GroupView {
 
     public ClipPathView(ReactContext reactContext) {
         super(reactContext);
+        mClipRule = CLIP_RULE_NONZERO;
     }
 
     @Override
diff --git a/android/src/main/java/com/horcrux/svg/VirtualView.java b/android/src/main/java/com/horcrux/svg/VirtualView.java
index 76966607..3d466d42 100644
--- a/android/src/main/java/com/horcrux/svg/VirtualView.java
+++ b/android/src/main/java/com/horcrux/svg/VirtualView.java
@@ -63,12 +63,12 @@ abstract public class VirtualView extends ReactViewGroup {
     boolean mTransformInvertible = true;
     private RectF mClientRect;
 
-    private int mClipRule;
+    int mClipRule;
     private @Nullable String mClipPath;
     @Nullable String mMask;
 
     private static final int CLIP_RULE_EVENODD = 0;
-    private static final int CLIP_RULE_NONZERO = 1;
+    static final int CLIP_RULE_NONZERO = 1;
 
     final float mScale;
     private boolean mResponsible;
@@ -271,8 +271,9 @@ abstract public class VirtualView extends ReactViewGroup {
             ClipPathView mClipNode = (ClipPathView) getSvgView().getDefinedClipPath(mClipPath);
 
             if (mClipNode != null) {
-                Path clipPath = mClipNode.getPath(canvas, paint, Region.Op.UNION);
-                switch (mClipRule) {
+                Path clipPath = mClipNode.mClipRule == CLIP_RULE_EVENODD ? mClipNode.getPath(canvas, paint) :
+                        mClipNode.getPath(canvas, paint, Region.Op.UNION);
+                switch (mClipNode.mClipRule) {
                     case CLIP_RULE_EVENODD:
                         clipPath.setFillType(Path.FillType.EVEN_ODD);
                         break;
diff --git a/elements/ClipPath.js b/elements/ClipPath.js
index 8349492d..b975c8e9 100644
--- a/elements/ClipPath.js
+++ b/elements/ClipPath.js
@@ -1,12 +1,17 @@
 import React, { Component } from "react";
 import { requireNativeComponent } from "react-native";
+import extractClipPath from "../lib/extract/extractClipPath";
 
 export default class extends Component {
     static displayName = "ClipPath";
 
     render() {
         const { id, children } = this.props;
-        return <RNSVGClipPath name={id}>{children}</RNSVGClipPath>;
+        return (
+            <RNSVGClipPath name={id} {...extractClipPath(this.props)}>
+                {children}
+            </RNSVGClipPath>
+        );
     }
 }
 
diff --git a/ios/Elements/RNSVGGroup.m b/ios/Elements/RNSVGGroup.m
index 57b25463..72944021 100644
--- a/ios/Elements/RNSVGGroup.m
+++ b/ios/Elements/RNSVGGroup.m
@@ -133,7 +133,7 @@
         RNSVGClipPath *clipNode = (RNSVGClipPath*)[self.svgView getDefinedClipPath:self.clipPath];
         if ([clipNode isSimpleClipPath]) {
             CGPathRef clipPath = [self getClipPath];
-            if (clipPath && !CGPathContainsPoint(clipPath, nil, transformed, self.clipRule == kRNSVGCGFCRuleEvenodd)) {
+            if (clipPath && !CGPathContainsPoint(clipPath, nil, transformed, clipNode.clipRule == kRNSVGCGFCRuleEvenodd)) {
                 return nil;
             }
         } else {
diff --git a/ios/RNSVGNode.m b/ios/RNSVGNode.m
index b75335b0..f70ceae9 100644
--- a/ios/RNSVGNode.m
+++ b/ios/RNSVGNode.m
@@ -21,6 +21,7 @@
 {
     RNSVGGlyphContext *glyphContext;
     BOOL _transparent;
+    RNSVGClipPath *_clipNode;
     CGPathRef _cachedClipPath;
     CGImageRef _clipMask;
     CGFloat canvasWidth;
@@ -248,7 +249,7 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
 - (CGPathRef)getClipPath:(CGContextRef)context
 {
     if (self.clipPath) {
-        RNSVGClipPath *_clipNode = (RNSVGClipPath*)[self.svgView getDefinedClipPath:self.clipPath];
+        _clipNode = (RNSVGClipPath*)[self.svgView getDefinedClipPath:self.clipPath];
         _cachedClipPath = CGPathRetain([_clipNode getPath:context]);
         if (_clipMask) {
             CGImageRelease(_clipMask);
@@ -280,7 +281,7 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
     if (clipPath) {
         if (!_clipMask) {
             CGContextAddPath(context, clipPath);
-            if (self.clipRule == kRNSVGCGFCRuleEvenodd) {
+            if (_clipNode.clipRule == kRNSVGCGFCRuleEvenodd) {
                 CGContextEOClip(context);
             } else {
                 CGContextClip(context);
diff --git a/ios/RNSVGRenderable.m b/ios/RNSVGRenderable.m
index bf8a3c35..7425ade7 100644
--- a/ios/RNSVGRenderable.m
+++ b/ios/RNSVGRenderable.m
@@ -432,7 +432,7 @@ UInt32 saturate(CGFloat value) {
         RNSVGClipPath *clipNode = (RNSVGClipPath*)[self.svgView getDefinedClipPath:self.clipPath];
         if ([clipNode isSimpleClipPath]) {
             CGPathRef clipPath = [self getClipPath];
-            if (clipPath && !CGPathContainsPoint(clipPath, nil, transformed, self.clipRule == kRNSVGCGFCRuleEvenodd)) {
+            if (clipPath && !CGPathContainsPoint(clipPath, nil, transformed, clipNode.clipRule == kRNSVGCGFCRuleEvenodd)) {
                 return nil;
             }
         } else {
diff --git a/lib/extract/extractClipPath.js b/lib/extract/extractClipPath.js
index a9539e3e..d2dc2904 100644
--- a/lib/extract/extractClipPath.js
+++ b/lib/extract/extractClipPath.js
@@ -9,9 +9,11 @@ export default function(props) {
     const { clipPath, clipRule } = props;
     const clipPathProps = {};
 
-    if (clipPath) {
+    if (clipRule) {
         clipPathProps.clipRule = clipRules[clipRule] === 0 ? 0 : 1;
+    }
 
+    if (clipPath) {
         const matched = clipPath.match(clipReg);
 
         if (matched) {