complete ClipPath refactor

elements/Use.js

@@ -1,10 +1,11 @@
 import {PropTypes} from 'react';
 import {pathProps} from '../lib/props';
-import {UseAttributes} from '../lib/attributes';
+import {UseAttributes, RenderableOnlyAttributes} from '../lib/attributes';
 import Shape from './Shape';
 import React from 'react';
 import patternReg from '../lib/extract/patternReg';
 import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';
+import _ from 'lodash';
 
 class Defs extends Shape {
     static displayName = 'Use';
@@ -32,14 +33,35 @@ class Defs extends Shape {
             console.warn('Invalid `href` prop for `Use` element, expected a href like `"url(#id)"`, but got: "' + props.href + '"');
         }
 
+        let mergeList = [];
+
+        let extractedProps = this.extractProps(props, {
+            stroke: true,
+            fill: true,
+            responder: true,
+            transform: true
+        });
+
+        Object.keys(RenderableOnlyAttributes).forEach(name => {
+
+            if (!_.isNil(props[name])) {
+                // clipPath prop may provide `clipPathRef` as native prop
+                if (name === 'clipPath') {
+                    if (extractedProps[name]) {
+                        mergeList.push(name);
+                    } else if (extractedProps.clipPathRef) {
+                        mergeList.push('clipPathRef');
+                    }
+                } else {
+                    mergeList.push(name);
+                }
+            }
+        });
+
         return <RNSVGUse
             ref={ele => this.root = ele}
-            {...this.extractProps(props, {
-                stroke: true,
-                fill: true,
-                responder: true,
-                transform: true
-            })}
+            {...extractedProps}
+            mergeList={mergeList}
             href={href}
         >{props.children}</RNSVGUse>;
     }