fix percentage bug, add Svg element flex layout support

Example/examples/Ellipse.js

@@ -11,13 +11,13 @@ class EllipseExample extends Component{
     render() {
         return <Svg
             height="100"
-            width="110"
+            width="200"
         >
             <Ellipse
                 cx="50%"
                 cy="50%"
                 rx="45%"
-                ry="30%"
+                ry="40%"
                 stroke="purple"
                 strokeWidth="2"
                 fill="yellow"

Example/examples/Svg.js

@@ -1,11 +1,26 @@
 import React, {
-    Component
+    Component,
+    StyleSheet,
+    View
 } from 'react-native';
 
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        height: 100,
+        width: 200
+    },
+    svg: {
+        flex: 1,
+        alignSelf: 'stretch'
+    }
+});
+
 import Svg, {
     Circle,
     Rect,
-    Path
+    Path,
+    Line
 } from 'react-native-svg';
 
 class SvgExample extends Component{
@@ -83,6 +98,41 @@ class SvgViewbox extends Component{
     }
 }
 
+class SvgLayout extends Component{
+    static title = 'SVG with flex layout';
+    render() {
+        return <View style={styles.container}>
+            <Svg style={styles.svg}>
+                <Rect
+                    width="80%"
+                    height="80%"
+                    x="10%"
+                    y="10%"
+                    fill="purple"
+                    stroke="yellow"
+                    strokeWidth="4"
+                />
+                <Line
+                    x1="10%"
+                    y1="10%"
+                    x2="90%"
+                    y2="90%"
+                    stroke="yellow"
+                    strokeWidth="4"
+                />
+                <Line
+                    x1="10%"
+                    y1="90%"
+                    x2="90%"
+                    y2="10%"
+                    stroke="yellow"
+                    strokeWidth="4"
+                />
+            </Svg>
+        </View>;
+    }
+}
+
 const icon = <Svg
     height="20"
     width="20"
@@ -106,7 +156,7 @@ const icon = <Svg
     />
 </Svg>;
 
-const samples = [SvgExample, SvgOpacity, SvgViewbox];
+const samples = [SvgExample, SvgOpacity, SvgViewbox, SvgLayout];
 
 export {
     icon,

elements/Svg.js

@@ -42,25 +42,29 @@ class Svg extends Component{
     };
 
     measureInWindow = (...args) => {
-        this.refs.root.measureInWindow(...args);
+        this.root.measureInWindow(...args);
     };
 
     measure = (...args) => {
-        this.refs.root.measure(...args);
+        this.root.measure(...args);
     };
 
     measureLayout = (...args) => {
-        this.refs.root.measureLayout(...args);
+        this.root.measureLayout(...args);
     };
 
     setNativeProps = (...args) => {
-        this.refs.root.setNativeProps(...args);
+        this.root.setNativeProps(...args);
     };
 
     render() {
         let {props} = this;
         let opacity = +props.opacity;
-        let content = props.viewbox ? <ViewBox
+        let width = +props.width;
+        let height = +props.height;
+        let flexLayout = !isNaN(width) || !isNaN(height);
+
+        let content = (props.viewbox && !flexLayout) ? <ViewBox
             viewbox={props.viewbox}
             preserveAspectRatio={props.preserveAspectRatio}
             width={props.width}
@@ -69,18 +73,18 @@ class Svg extends Component{
             {this.getChildren()}
         </ViewBox> : this.getChildren();
 
-        let width = +props.width || 0;
-        let height = +props.height || 0;
-
         return (
             <NativeSvgView
-                ref="root"
+                ref={ele => this.root = ele}
                 style={[
                     props.style,
                     !isNaN(opacity) && {
                         opacity
                     },
-                    {width, height}
+                    !flexLayout && {
+                        width,
+                        height
+                    }
                 ]}
             >
                 {content}

ios/RNSVGShape.m

@@ -52,7 +52,7 @@
             // draw ellipse
             CGFloat cx = [self getActualProp:@"cx" relative:width];
             CGFloat cy = [self getActualProp:@"cy" relative:height];
-            CGFloat rx = [self getActualProp:@"rx" relative:height];
+            CGFloat rx = [self getActualProp:@"rx" relative:width];
             CGFloat ry = [self getActualProp:@"ry" relative:height];
             CGPathAddEllipseInRect(path, nil, CGRectMake(cx - rx, cy - ry, rx * 2, ry * 2));
             break;
@@ -60,9 +60,9 @@
         case 2:
         {
             // draw line
-            CGFloat x1 = [self getActualProp:@"x1" relative:height];
+            CGFloat x1 = [self getActualProp:@"x1" relative:width];
             CGFloat y1 = [self getActualProp:@"y1" relative:height];
-            CGFloat x2 = [self getActualProp:@"x2" relative:height];
+            CGFloat x2 = [self getActualProp:@"x2" relative:width];
             CGFloat y2 = [self getActualProp:@"y2" relative:height];
             CGPathMoveToPoint(path, nil, x1, y1);
             CGPathAddLineToPoint(path, nil, x2, y2);

ios/RNSVGSvgView.h

@@ -11,5 +11,4 @@
 #import "RNSVGContainer.h"
 
 @interface RNSVGSvgView : UIView <RNSVGContainer>
-
 @end

ios/RNSVGSvgView.m

@@ -15,20 +15,20 @@
 
 - (void)invalidate
 {
-  [self setNeedsDisplay];
+    [self setNeedsDisplay];
 }
 
 - (void)drawRect:(CGRect)rect
 {
-  CGContextRef context = UIGraphicsGetCurrentContext();
+    CGContextRef context = UIGraphicsGetCurrentContext();
-  for (RNSVGNode *node in self.subviews) {
+    for (RNSVGNode *node in self.subviews) {
-      [node renderTo:context];
+        [node renderTo:context];
-  }
+    }
 }
 
 - (void)reactSetInheritedBackgroundColor:(UIColor *)inheritedBackgroundColor
 {
-  self.backgroundColor = inheritedBackgroundColor;
+    self.backgroundColor = inheritedBackgroundColor;
 }
 
 @end

ios/ViewManagers/RNSVGSvgViewManager.m

@@ -16,7 +16,7 @@ RCT_EXPORT_MODULE()
 
 - (UIView *)view
 {
-  return [RNSVGSvgView new];
+    return [RNSVGSvgView new];
 }
 
 @end