fix create native component issue

fix create native component issue

elements/Circle.js

@@ -1,9 +1,8 @@
 import React, {PropTypes, Component} from 'react';
 import extractProps from '../lib/extract/extractProps';
-import {RenderableAttributes} from '../lib/attributes';
+import createNativeComponent from '../lib/createNativeComponent';
-import {requireNativeComponent} from 'react-native';
 import mergeContext from '../lib/mergeContext';
-import {circleProps, pathProps, fillProps, strokeProps} from '../lib/props';
+import {circleProps, pathProps, fillProps, strokeProps, numberProp} from '../lib/props';
 import SvgTouchableMixin from '../lib/SvgTouchableMixin';
 import _ from 'lodash';
 
@@ -18,7 +17,8 @@ class Circle extends Component{
         ...fillProps,
         ...strokeProps,
         ...circleProps,
-        isInGroup: PropTypes.bool
+        isInGroup: PropTypes.bool,
+        svgId: numberProp
     };
 
     //constructor() {
@@ -47,8 +47,6 @@ class Circle extends Component{
     }
 }
 
-
+const RNSVGCircle = createNativeComponent('RNSVGCircle');
-
-const RNSVGCircle = requireNativeComponent('RNSVGCircle', null);
 
 export default Circle;

elements/Ellipse.js

@@ -1,9 +1,8 @@
 import React, {PropTypes, Component} from 'react';
 import extractProps from '../lib/extract/extractProps';
-import {RenderableAttributes} from '../lib/attributes';
+import createNativeComponent from '../lib/createNativeComponent';
-import {requireNativeComponent} from 'react-native';
 import mergeContext from '../lib/mergeContext';
-import {ellipseProps, pathProps, fillProps, strokeProps} from '../lib/props';
+import {ellipseProps, pathProps, fillProps, strokeProps, numberProp} from '../lib/props';
 
 
 class Ellipse extends Component{
@@ -17,11 +16,13 @@ class Ellipse extends Component{
         ...fillProps,
         ...strokeProps,
         ...ellipseProps,
-        isInGroup: PropTypes.bool
+        isInGroup: PropTypes.bool,
+        svgId: numberProp
     };
 
     render() {
         let props = mergeContext(this.props, this.context);
+        console.log(props);
         return <RNSVGEllipse
             {...extractProps(props)}
             cx={props.cx.toString()}
@@ -32,5 +33,6 @@ class Ellipse extends Component{
     }
 }
 
-const RNSVGEllipse = requireNativeComponent('RNSVGEllipse', null);
+const RNSVGEllipse = createNativeComponent('RNSVGEllipse');
+
 export default Ellipse;

elements/G.js

@@ -1,8 +1,7 @@
 import React, {Component, PropTypes} from 'react';
-import createReactNativeComponentClass from 'react-native/Libraries/ReactNative/createReactNativeComponentClass';
 import Defs from './Defs';
 import _ from 'lodash';
-import {GroupAttributes} from '../lib/attributes';
+import createNativeComponent from '../lib/createNativeComponent';
 import {numberProp, contextProps} from '../lib/props';
 
 import extractProps from '../lib/extract/extractProps';
@@ -47,22 +46,19 @@ class G extends Component{
                 />
             </Defs.Item>;
         } else {
-            return <NativeGroup
+            return <RNSVGGroup
                 {...extractProps(this.props, {transform: true})}
                 asClipPath={this.props.asClipPath}
             >
                 {this.props.children}
-            </NativeGroup>;
+            </RNSVGGroup>;
         }
     }
 }
 
-var NativeGroup = createReactNativeComponentClass({
+const RNSVGGroup = createNativeComponent('RNSVGGroup');
-    validAttributes: GroupAttributes,
-    uiViewClassName: 'RNSVGGroup'
-});
 
 export default G;
 export {
-    NativeGroup
+    RNSVGGroup as NativeGroup
 };

elements/Image.js

@@ -1,7 +1,6 @@
 import React, {Component, PropTypes} from 'react';
-import {requireNativeComponent} from 'react-native';
 import extractProps from '../lib/extract/extractProps';
-import {ImageAttributes} from '../lib/attributes';
+import createNativeComponent from '../lib/createNativeComponent';
 import {numberProp} from '../lib/props';
 import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
 
@@ -31,6 +30,6 @@ class Image extends Component{
     }
 }
 
-const RNSVGImage = requireNativeComponent('RNSVGImage', null);
+const RNSVGImage = createNativeComponent('RNSVGImage');
 
 export default Image;

elements/Line.js

@@ -1,9 +1,8 @@
 import React, {PropTypes, Component} from 'react';
 import extractProps from '../lib/extract/extractProps';
-import {RenderableAttributes} from '../lib/attributes';
+import createNativeComponent from '../lib/createNativeComponent';
-import {requireNativeComponent} from 'react-native';
 import mergeContext from '../lib/mergeContext';
-import {lineProps, pathProps, fillProps, strokeProps} from '../lib/props';
+import {lineProps, pathProps, fillProps, strokeProps, numberProp} from '../lib/props';
 
 class Line extends Component{
     static displayName = 'Line';
@@ -16,7 +15,8 @@ class Line extends Component{
         ...fillProps,
         ...strokeProps,
         ...lineProps,
-        isInGroup: PropTypes.bool
+        isInGroup: PropTypes.bool,
+        svgId: numberProp
     };
 
     render() {
@@ -31,5 +31,6 @@ class Line extends Component{
     }
 }
 
-const RNSVGLine = requireNativeComponent('RNSVGLine', null);
+const RNSVGLine = createNativeComponent('RNSVGLine');
+
 export default Line;

elements/Path.js

@@ -1,11 +1,10 @@
 import React, {Component, PropTypes} from 'react';
 import _ from 'lodash';
 import Defs from './Defs';
-import createReactNativeComponentClass from 'react-native/Libraries/ReactNative/createReactNativeComponentClass';
 import extractProps from '../lib/extract/extractProps';
 import SerializablePath from '../lib/SerializablePath';
-import {PathAttributes} from '../lib/attributes';
+import createNativeComponent from '../lib/createNativeComponent';
-import {pathProps} from '../lib/props';
+import {pathProps, numberProp} from '../lib/props';
 
 class Path extends Component{
     static displayName = 'Path';
@@ -17,7 +16,8 @@ class Path extends Component{
 
     static contextTypes = {
         ...pathProps,
-        isInGroup: PropTypes.bool
+        isInGroup: PropTypes.bool,
+        svgId: numberProp
     };
 
 
@@ -51,7 +51,7 @@ class Path extends Component{
         let d = new SerializablePath(props.d).toJSON();
 
         return (
-            <NativePath
+            <RNSVGPath
                 {...extractProps(props)}
                 d={d}
             />
@@ -59,9 +59,6 @@ class Path extends Component{
     }
 }
 
-let NativePath = createReactNativeComponentClass({
+const RNSVGPath = createNativeComponent('RNSVGPath');
-    validAttributes: PathAttributes,
-    uiViewClassName: 'RNSVGPath'
-});
 
 export default Path;

elements/Rect.js

@@ -1,10 +1,9 @@
 import React, {PropTypes, Component} 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 extractProps from '../lib/extract/extractProps';
-import {RenderableAttributes} from '../lib/attributes';
+import createNativeComponent from '../lib/createNativeComponent';
-import {requireNativeComponent} from 'react-native';
 import mergeContext from '../lib/mergeContext';
-import {rectProps, pathProps, fillProps, strokeProps} from '../lib/props';
+import {rectProps, pathProps, fillProps, strokeProps, numberProp} from '../lib/props';
 
 class Rect extends Component{
     static displayName = 'Rect';
@@ -17,7 +16,8 @@ class Rect extends Component{
         ...fillProps,
         ...strokeProps,
         ...rectProps,
-        isInGroup: PropTypes.bool
+        isInGroup: PropTypes.bool,
+        svgId: numberProp
     };
 
     render() {
@@ -39,6 +39,6 @@ class Rect extends Component{
     }
 }
 
-const RNSVGRect = requireNativeComponent('RNSVGRect', null);
+const RNSVGRect = createNativeComponent('RNSVGRect');
 
 export default Rect;

elements/Text.js

@@ -1,12 +1,12 @@
 import React, {Component, PropTypes} from 'react';
-import {requireNativeComponent} from 'react-native';
+import createNativeComponent from '../lib/createNativeComponent';
 import Defs from './Defs';
 import _ from 'lodash';
 import extractProps from '../lib/extract/extractProps';
 import extractText from '../lib/extract/extractText';
-import {TextAttributes} from '../lib/attributes';
 import {numberProp, textProps, fillProps, strokeProps, pathProps} from '../lib/props';
 
+
 class Text extends Component{
     static displayName = 'Text';
     static propTypes = {
@@ -22,7 +22,8 @@ class Text extends Component{
         ...textProps,
         ...fillProps,
         ...strokeProps,
-        isInGroup: PropTypes.bool
+        isInGroup: PropTypes.bool,
+        svgId: numberProp
     };
 
     render() {
@@ -63,8 +64,6 @@ class Text extends Component{
     }
 }
 
-const RNSVGText = requireNativeComponent('RNSVGText', null, {
+const RNSVGText = createNativeComponent('RNSVGText');
-    nativeOnly: TextAttributes
-});
 
 export default Text;

ios/ViewManagers/RNSVGCircleManager.m

@@ -24,16 +24,4 @@ RCT_EXPORT_VIEW_PROPERTY(cx, NSString)
 RCT_EXPORT_VIEW_PROPERTY(cy, NSString)
 RCT_EXPORT_VIEW_PROPERTY(r, NSString)
 
-// fix me: these should inherited from renderable
-RCT_EXPORT_VIEW_PROPERTY(fill, RNSVGBrush)
-RCT_EXPORT_VIEW_PROPERTY(fillRule, RNSVGCGFCRule)
-RCT_EXPORT_VIEW_PROPERTY(stroke, RNSVGBrush)
-RCT_EXPORT_VIEW_PROPERTY(strokeWidth, CGFloat)
-RCT_EXPORT_VIEW_PROPERTY(strokeLinecap, CGLineCap)
-RCT_EXPORT_VIEW_PROPERTY(strokeLinejoin, CGLineJoin)
-RCT_EXPORT_VIEW_PROPERTY(clipPath, CGPath)
-RCT_EXPORT_VIEW_PROPERTY(clipRule, RNSVGCGFCRule)
-RCT_EXPORT_VIEW_PROPERTY(strokeDasharray, RNSVGCGFloatArray)
-RCT_EXPORT_VIEW_PROPERTY(strokeDashoffset, CGFloat)
-
 @end

ios/ViewManagers/RNSVGEllipseManager.m

@@ -25,16 +25,4 @@ RCT_EXPORT_VIEW_PROPERTY(cy, NSString)
 RCT_EXPORT_VIEW_PROPERTY(rx, NSString)
 RCT_EXPORT_VIEW_PROPERTY(ry, NSString)
 
-// fix me: these should inherited from renderable
-RCT_EXPORT_VIEW_PROPERTY(fill, RNSVGBrush)
-RCT_EXPORT_VIEW_PROPERTY(fillRule, RNSVGCGFCRule)
-RCT_EXPORT_VIEW_PROPERTY(stroke, RNSVGBrush)
-RCT_EXPORT_VIEW_PROPERTY(strokeWidth, CGFloat)
-RCT_EXPORT_VIEW_PROPERTY(strokeLinecap, CGLineCap)
-RCT_EXPORT_VIEW_PROPERTY(strokeLinejoin, CGLineJoin)
-RCT_EXPORT_VIEW_PROPERTY(clipPath, CGPath)
-RCT_EXPORT_VIEW_PROPERTY(clipRule, RNSVGCGFCRule)
-RCT_EXPORT_VIEW_PROPERTY(strokeDasharray, RNSVGCGFloatArray)
-RCT_EXPORT_VIEW_PROPERTY(strokeDashoffset, CGFloat)
-
 @end

ios/ViewManagers/RNSVGLineManager.m

@@ -25,16 +25,4 @@ RCT_EXPORT_VIEW_PROPERTY(y1, NSString)
 RCT_EXPORT_VIEW_PROPERTY(x2, NSString)
 RCT_EXPORT_VIEW_PROPERTY(y2, NSString)
 
-// fix me: these should inherited from renderable
-RCT_EXPORT_VIEW_PROPERTY(fill, RNSVGBrush)
-RCT_EXPORT_VIEW_PROPERTY(fillRule, RNSVGCGFCRule)
-RCT_EXPORT_VIEW_PROPERTY(stroke, RNSVGBrush)
-RCT_EXPORT_VIEW_PROPERTY(strokeWidth, CGFloat)
-RCT_EXPORT_VIEW_PROPERTY(strokeLinecap, CGLineCap)
-RCT_EXPORT_VIEW_PROPERTY(strokeLinejoin, CGLineJoin)
-RCT_EXPORT_VIEW_PROPERTY(clipPath, CGPath)
-RCT_EXPORT_VIEW_PROPERTY(clipRule, RNSVGCGFCRule)
-RCT_EXPORT_VIEW_PROPERTY(strokeDasharray, RNSVGCGFloatArray)
-RCT_EXPORT_VIEW_PROPERTY(strokeDashoffset, CGFloat)
-
 @end

ios/ViewManagers/RNSVGRectManager.m

@@ -27,16 +27,4 @@ RCT_EXPORT_VIEW_PROPERTY(height, NSString)
 RCT_EXPORT_VIEW_PROPERTY(rx, NSString)
 RCT_EXPORT_VIEW_PROPERTY(ry, NSString)
 
-// fix me: these should inherited from renderable
-RCT_EXPORT_VIEW_PROPERTY(fill, RNSVGBrush)
-RCT_EXPORT_VIEW_PROPERTY(fillRule, RNSVGCGFCRule)
-RCT_EXPORT_VIEW_PROPERTY(stroke, RNSVGBrush)
-RCT_EXPORT_VIEW_PROPERTY(strokeWidth, CGFloat)
-RCT_EXPORT_VIEW_PROPERTY(strokeLinecap, CGLineCap)
-RCT_EXPORT_VIEW_PROPERTY(strokeLinejoin, CGLineJoin)
-RCT_EXPORT_VIEW_PROPERTY(clipPath, CGPath)
-RCT_EXPORT_VIEW_PROPERTY(clipRule, RNSVGCGFCRule)
-RCT_EXPORT_VIEW_PROPERTY(strokeDasharray, RNSVGCGFloatArray)
-RCT_EXPORT_VIEW_PROPERTY(strokeDashoffset, CGFloat)
-
 @end

lib/createNativeComponent.js

@@ -0,0 +1,36 @@
+/**
+ * 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;
+}