Add touch events support for G elements

Example/examples/TouchEvents.js

@@ -5,7 +5,8 @@ import React, {
 import Svg, {
     Circle,
     Path,
-    Rect
+    Rect,
+    G
 } from 'react-native-svg';
 
 class PressExample extends Component {
@@ -65,6 +66,19 @@ class HoverExample extends Component {
             />
         </Svg>;
     }
+}
+
+class GroupExample extends Component {
+    static title = 'Bind touch events callback on Group element';
+
+    render () {
+        return <Svg height="120" width="120">
+            <G onPress={() => alert('Pressed')}>
+                <Rect x="20" y="20" width="40" height="40" fill="yellow" />
+                <Circle cx="80" cy="80" r="30" fill="green" />
+            </G>
+        </Svg>;
+    }
 
 }
 
@@ -83,7 +97,8 @@ const icon = <Svg
 
 const samples = [
     PressExample,
-    HoverExample
+    HoverExample,
+    GroupExample
 ];
 
 export {

README.md

@@ -2,6 +2,7 @@
 
 [![Version](https://img.shields.io/npm/v/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg)
 [![Build Status](https://travis-ci.org/magicismight/react-native-svg.svg?branch=master)](https://travis-ci.org/magicismight/react-native-svg)
+[![Known Vulnerabilities](https://snyk.io/test/npm/react-native-svg/badge.svg)](https://snyk.io/test/npm/react-native-svg)
 
 `react-native-svg` is built to provide a SVG interface to react native on both iOS and Android
 
@@ -575,10 +576,9 @@ npm install
 
 #### TODO:
 1. add native method for elements
-2. more Text features support
+2. more Text features support (textPath, tref, tspan)
 3. Pattern element
 4. implement Animated elements
-5. refactor defs element (cannot use id prop for shape elements)
 
 #### Thanks:
 

elements/G.js

@@ -1,10 +1,11 @@
-import React, {Component} from 'react';
+import React from 'react';
 import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';
+import Shape from './Shape';
 import {transformProps} from '../lib/props';
 import {GroupAttributes} from '../lib/attributes';
 import extractProps from '../lib/extract/extractProps';
 
-class G extends Component{
+class G extends Shape{
     static displayName = 'G';
 
     static propTypes = transformProps;
@@ -16,17 +17,11 @@ class G extends Component{
     render() {
         let {props} = this;
 
-        let extractedProps = extractProps(props, {
-            stroke: true,
-            fill: true,
-            transform: true
-        });
-
         return <RNSVGGroup
-            {...extractedProps}
+            {...this.extractProps(props)}
             ref={ele => {this.root = ele;}}
         >
-            {this.props.children}
+            {props.children}
         </RNSVGGroup>;
     }
 }

elements/Shape.js

@@ -12,7 +12,7 @@ class Shape extends Component {
         this.state = this.touchableGetInitialState();
     }
 
-    extractProps = (props, options = {stroke: true, transform: true, fill: true, responder: true}) => {
+    extractProps = (props, options) => {
         let extractedProps = extractProps(props, options);
         if (extractedProps.touchable && !extractedProps.disabled) {
             _.assign(extractedProps, {

elements/Use.js

@@ -34,12 +34,7 @@ class Use extends Shape {
             console.warn('Invalid `href` prop for `Use` element, expected a href like `"#id"`, but got: "' + props.href + '"');
         }
 
-        let extractedProps = this.extractProps(props, {
+        let extractedProps = this.extractProps(props);
-            stroke: true,
-            fill: true,
-            responder: true,
-            transform: true
-        });
 
         return <RNSVGUse
             ref={ele => {this.root = ele;}}

ios/Elements/RNSVGGroup.m

@@ -46,7 +46,7 @@
         if ([node isKindOfClass:[RNSVGNode class]]) {
             UIView *view = [node hitTest: point withEvent:event];
             if (view) {
-                return view;
+                return self;
             }
         }
     }