use createReactNativeComponentClass inside from react

due to the peerDependency of react-native is >=0.29.0.
so there is no need to consider compatibility with react-native@0.27.0
and below.

elements/Circle.js

@@ -1,7 +1,8 @@
 import React, {PropTypes} from 'react';
-import createNativeComponent from '../lib/createNativeComponent';
+import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';
 import Shape from './Shape';
 import mergeContext from '../lib/mergeContext';
+import {CircleAttributes} from '../lib/attributes';
 import {circleProps, pathProps, fillProps, strokeProps, numberProp} from '../lib/props';
 
 class Circle extends Shape {
@@ -30,6 +31,11 @@ class Circle extends Shape {
     }
 }
 
-const RNSVGCircle = createNativeComponent('RNSVGCircle');
+
+
+const RNSVGCircle = createReactNativeComponentClass({
+    validAttributes: CircleAttributes,
+    uiViewClassName: 'RNSVGCircle'
+});
 
 export default Circle;

elements/ClipPath.js

@@ -1,6 +1,7 @@
 import React, {Component, PropTypes} from 'react';
 import {set, remove} from '../lib/extract/extractClipping';
-import createNativeComponent from '../lib/createNativeComponent';
+import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';
+import {ClipPathAttributes} from '../lib/attributes';
 
 class ClipPath extends Component{
     static displayName = 'ClipPath';
@@ -32,7 +33,10 @@ class ClipPath extends Component{
     }
 }
 
-const RNSVGClipPath = createNativeComponent('RNSVGClipPath');
+const RNSVGClipPath = createReactNativeComponentClass({
+    validAttributes: ClipPathAttributes,
+    uiViewClassName: 'RNSVGClipPath'
+});
 
 export default ClipPath;
 

elements/Ellipse.js

@@ -1,9 +1,9 @@
 import React, {PropTypes} from 'react';
-import createNativeComponent from '../lib/createNativeComponent';
+import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';
 import mergeContext from '../lib/mergeContext';
 import Shape from './Shape';
 import {ellipseProps, pathProps, fillProps, strokeProps, numberProp} from '../lib/props';
-
+import {EllipseAttributes} from '../lib/attributes';
 
 class Ellipse extends Shape{
     static displayName = 'Ellipse';
@@ -32,6 +32,9 @@ class Ellipse extends Shape{
     }
 }
 
-const RNSVGEllipse = createNativeComponent('RNSVGEllipse');
+const RNSVGEllipse = createReactNativeComponentClass({
+    validAttributes: EllipseAttributes,
+    uiViewClassName: 'RNSVGEllipse'
+});
 
 export default Ellipse;

elements/G.js

@@ -1,9 +1,9 @@
 import React, {Component, PropTypes} from 'react';
 import Defs from './Defs';
 import _ from 'lodash';
-import createNativeComponent from '../lib/createNativeComponent';
+import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';
 import {numberProp, contextProps} from '../lib/props';
-
+import {GroupAttributes} from '../lib/attributes';
 import extractProps from '../lib/extract/extractProps';
 
 class G extends Component{
@@ -56,7 +56,10 @@ class G extends Component{
     }
 }
 
-const RNSVGGroup = createNativeComponent('RNSVGGroup');
+const RNSVGGroup = createReactNativeComponentClass({
+    validAttributes: GroupAttributes,
+    uiViewClassName: 'RNSVGGroup'
+});
 
 export default G;
 export {

elements/Image.js

@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react';
-import createNativeComponent from '../lib/createNativeComponent';
+import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';
+import {ImageAttributes} from '../lib/attributes';
 import {numberProp, touchableProps, responderProps} from '../lib/props';
 import Shape from './Shape';
 import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
@@ -32,6 +33,9 @@ class Image extends Shape {
     }
 }
 
-const RNSVGImage = createNativeComponent('RNSVGImage');
+const RNSVGImage = createReactNativeComponentClass({
+    validAttributes: ImageAttributes,
+    uiViewClassName: 'RNSVGImage'
+});
 
 export default Image;

elements/Line.js

@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react';
-import createNativeComponent from '../lib/createNativeComponent';
+import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';
+import {LineAttributes} from '../lib/attributes';
 import mergeContext from '../lib/mergeContext';
 import Shape from './Shape';
 import {lineProps, pathProps, fillProps, strokeProps, numberProp} from '../lib/props';
@@ -31,6 +32,9 @@ class Line extends Shape {
     }
 }
 
-const RNSVGLine = createNativeComponent('RNSVGLine');
+const RNSVGLine = createReactNativeComponentClass({
+    validAttributes: LineAttributes,
+    uiViewClassName: 'RNSVGLine'
+});
 
 export default Line;

elements/Path.js

@@ -1,7 +1,8 @@
 import React, {PropTypes} from 'react';
 import Defs from './Defs';
 import SerializablePath from '../lib/SerializablePath';
-import createNativeComponent from '../lib/createNativeComponent';
+import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';
+import {PathAttributes} from '../lib/attributes';
 import mergeContext from '../lib/mergeContext';
 import Shape from './Shape';
 import {pathProps, numberProp} from '../lib/props';
@@ -52,6 +53,9 @@ class Path extends Shape {
     }
 }
 
-const RNSVGPath = createNativeComponent('RNSVGPath');
+const RNSVGPath = createReactNativeComponentClass({
+    validAttributes: PathAttributes,
+    uiViewClassName: 'RNSVGPath'
+});
 
 export default Path;

elements/Rect.js

@@ -1,8 +1,9 @@
 import React, {PropTypes} from 'react';
 import './Path'; // must import Path first, don`t know why. without this will throw an `Super expression must either be null or a function, not undefined`
-import createNativeComponent from '../lib/createNativeComponent';
+import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';
 import mergeContext from '../lib/mergeContext';
 import {rectProps, pathProps, fillProps, strokeProps, numberProp} from '../lib/props';
+import {RectAttributes} from '../lib/attributes';
 import Shape from './Shape';
 
 class Rect extends Shape {
@@ -39,6 +40,9 @@ class Rect extends Shape {
     }
 }
 
-const RNSVGRect = createNativeComponent('RNSVGRect');
+const RNSVGRect = createReactNativeComponentClass({
+    validAttributes: RectAttributes,
+    uiViewClassName: 'RNSVGRect'
+});
 
 export default Rect;

elements/Text.js

@@ -1,10 +1,11 @@
 import React, {PropTypes} from 'react';
-import createNativeComponent from '../lib/createNativeComponent';
+import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';
 import Defs from './Defs';
 import extractProps from '../lib/extract/extractProps';
 import extractText from '../lib/extract/extractText';
 import mergeContext from '../lib/mergeContext';
 import {numberProp, textProps, fillProps, strokeProps, pathProps} from '../lib/props';
+import {TextAttributes} from '../lib/attributes';
 import Shape from './Shape';
 
 class Text extends Shape {
@@ -56,6 +57,9 @@ class Text extends Shape {
     }
 }
 
-const RNSVGText = createNativeComponent('RNSVGText');
+const RNSVGText = createReactNativeComponentClass({
+    validAttributes: TextAttributes,
+    uiViewClassName: 'RNSVGText'
+});
 
 export default Text;

lib/attributes.js

@@ -0,0 +1,150 @@
+import _ from 'lodash';
+
+const merge = _.assign;
+
+function arrayDiffer(a, b) {
+    if (a == null || b == null) {
+        return true;
+    }
+    if (a.length !== b.length) {
+        return true;
+    }
+    for (var i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function fontAndLinesDiffer(a, b) {
+    if (a === b) {
+        return false;
+    }
+    if (a.font !== b.font) {
+        if (a.font === null) {
+            return true;
+        }
+        if (b.font === null) {
+            return true;
+        }
+
+        if (
+            a.font.fontFamily !== b.font.fontFamily ||
+            a.font.fontSize !== b.font.fontSize ||
+            a.font.fontWeight !== b.font.fontWeight ||
+            a.font.fontStyle !== b.font.fontStyle
+        ) {
+            return true;
+        }
+    }
+    return arrayDiffer(a.lines, b.lines);
+}
+
+const NodeAttributes = {
+    trans: {
+        diff: arrayDiffer
+    },
+    opacity: true,
+    clipPathId: true,
+    responsible: true
+};
+
+const RenderableAttributes = merge(NodeAttributes, {
+    fill: {
+        diff: arrayDiffer
+    },
+    stroke: {
+        diff: arrayDiffer
+    },
+    fillRule: true,
+    strokeWidth: true,
+    strokeLinecap: true,
+    strokeLinejoin: true,
+    clipPath: {
+        diff: arrayDiffer
+    },
+    clipRule: true,
+    strokeDasharray: {
+        diff: arrayDiffer
+    },
+    strokeDashoffset: true,
+    strokeMiterlimit: true
+});
+
+const GroupAttributes = merge(NodeAttributes, {
+    clipPath: {
+        diff: arrayDiffer
+    },
+    clipRule: true
+});
+
+const PathAttributes = merge(RenderableAttributes, {
+    d: {
+        diff: arrayDiffer
+    }
+});
+
+const TextAttributes = merge(RenderableAttributes, {
+    alignment: true,
+    frame: {
+        diff: fontAndLinesDiffer
+    },
+    path: {
+        diff: arrayDiffer
+    }
+});
+
+const ClipPathAttributes = merge(RenderableAttributes, {
+    name: true
+});
+
+const CircleAttributes = merge(RenderableAttributes, {
+    cx: true,
+    cy: true,
+    r: true
+});
+
+const EllipseAttributes = merge(RenderableAttributes, {
+    cx: true,
+    cy: true,
+    rx: true,
+    ry: true
+});
+
+const ImageAttributes = merge(RenderableAttributes, {
+    x: true,
+    y: true,
+    width: true,
+    height: true,
+    src: true
+});
+
+const LineAttributes = merge(RenderableAttributes, {
+    x1: true,
+    y1: true,
+    x2: true,
+    y2: true
+});
+
+const RectAttributes = merge(RenderableAttributes, {
+    x: true,
+    y: true,
+    width: true,
+    height: true,
+    rx: true,
+    ry: true
+});
+
+
+export {
+    PathAttributes,
+    TextAttributes,
+    GroupAttributes,
+    ClipPathAttributes,
+    CircleAttributes,
+    EllipseAttributes,
+    ImageAttributes,
+    LineAttributes,
+    RectAttributes
+};

lib/createNativeComponent.android.js

@@ -1,22 +0,0 @@
-/**
- * This is a hack to to create a native component of RNSVG.
- * Because importing `createReactNativeComponentClass` is a pain in the ass after `0.25.1` is released
- * and changed lots of dependencies of many modules.
- * So this is just a work around to create a native component of RNSVG.
- * If there is a better way to do this,
- * PLEASE override this module.
- */
-import {requireNativeComponent, UIManager} from 'react-native';
-
-export default function (componentName) {
-    //let originNativeProps = UIManager[componentName].NativeProps;
-    let originViewProps = UIManager.RCTView.NativeProps;
-
-    // clear RCTView`s NativeProps
-    UIManager.RCTView.NativeProps = null;
-    const RNSVGNativeComponent = requireNativeComponent(componentName, null);
-
-    // reset RCTView`s NativeProps
-    UIManager.RCTView.NativeProps = originViewProps;
-    return RNSVGNativeComponent;
-}

lib/createNativeComponent.ios.js

@@ -1,36 +0,0 @@
-/**
- * This is a hack to to create a native component of RNSVG.
- * Because importing `createReactNativeComponentClass` is a pain in the ass after `0.25.1` is released
- * and changed lots of dependencies of many modules.
- * So this is just a work around to create a native component of RNSVG.
- * If there is a better way to do this,
- * PLEASE override this module.
- */
-import {requireNativeComponent, UIManager} from 'react-native';
-
-// inherited native props
-const RenderableNativeProps = {
-    ...UIManager.RNSVGRenderable.NativeProps,
-    ...UIManager.RNSVGNode.NativeProps
-};
-
-export default function (componentName) {
-    let originNativeProps = UIManager[componentName].NativeProps;
-    let originViewProps = UIManager.RCTView.NativeProps;
-
-    // override native component`s NativeProps
-    UIManager[componentName].NativeProps = {
-        ...RenderableNativeProps,
-        ...originNativeProps
-    };
-
-    // clear RCTView`s NativeProps
-    UIManager.RCTView.NativeProps = null;
-    const RNSVGNativeComponent = requireNativeComponent(componentName, null);
-
-    // reset all
-    UIManager.RCTView.NativeProps = originViewProps;
-    UIManager[componentName].NativeProps = originNativeProps;
-
-    return RNSVGNativeComponent;
-}

package.json

@@ -1,5 +1,5 @@
 {
-    "version": "3.0.0",
+    "version": "3.1.0",
     "name": "react-native-svg",
     "description": "react native svg library",
     "repository": {