finish gradients refactor

Example/examples.js

@@ -18,5 +18,22 @@ import * as Definations from './examples/Definations';
 import * as TouchEvents from './examples/TouchEvents';
 
 export {
+    Svg,
+    Rect,
+    Circle,
+    Ellipse,
+    Line,
+    Polygon,
+    Polyline,
+    Path,
+    Text,
+    Stroking,
+    G,
+    //Use,
+    //Symbol,
+    Gradients,
+    Clipping,
+    Image,
+    TouchEvents,
     Definations
 };

Example/examples/Definations.js

@@ -9,7 +9,10 @@ import Svg, {
     Use,
     Rect,
     Circle,
-    ClipPath
+    ClipPath,
+    LinearGradient,
+    RadialGradient,
+    Stop
 } from 'react-native-svg';
 
 class DefsExample extends Component{
@@ -27,10 +30,21 @@ class DefsExample extends Component{
                 <ClipPath id="clip">
                     <Circle r="20%" cx="0" cy="0" />
                 </ClipPath>
+                <LinearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
+                    <Stop offset="0%" stopColor="yellow" />
+                    <Stop offset="50%" stopColor="red" />
+                    <Stop offset="100%" stopColor="blue" />
+                </LinearGradient>
+                <RadialGradient id="radial" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+                    <Stop offset="0%" stopColor="yellow" />
+                    <Stop offset="50%" stopColor="red" />
+                    <Stop offset="100%" stopColor="blue" />
+                </RadialGradient>
             </Defs>
-            <Use href="url(#path)" x="0" fill="blue" opacity="0.5"   />
-            <Use href="url(#path)" x="20" y="5" fill="#8a3" />
-            <Use href="url(#path)" x="30" clipPath="url(#clip)" />
+            <Use href="url(#path)" x="0" fill="blue" opacity="0.2" />
+            <Use href="url(#path)" x="20" y="5" fill="url(#linear)" />
+            <Use href="url(#path)" x="50" clipPath="url(#clip)" fillOpacity="0.6" />
+            <Use href="url(#path)" x="-10" y="20" fill="red"  fill="url(#radial)" />
         </Svg>;
     }
 }

Example/examples/G.js

@@ -19,7 +19,6 @@ class GExample extends Component{
             width="100"
         >
             <G
-                r="11"
                 fill="purple"
                 stroke="pink"
                 strokeWidth="3"
@@ -28,26 +27,31 @@ class GExample extends Component{
                     <Circle
                         cx="25"
                         cy="25"
+                        r="11"
                     />
                 </G>
                 <Circle
                     cx="25"
                     cy="75"
+                    r="11"
                     stroke="red"
                 />
                 <Circle
                     cx="50"
                     cy="50"
+                    r="11"
                     fill="green"
                 />
                 <Circle
                     cx="75"
                     cy="25"
+                    r="11"
                     stroke="red"
                 />
                 <Circle
                     cx="75"
                     cy="75"
+                    r="11"
                 />
             </G>
         </Svg>;
@@ -92,7 +96,7 @@ class GTransform extends Component{
                 >
                     Text grouped with shapes</Text>
             </G>
-            <Use href="#group" x="5" rotate="0" />
+            <Use href="url(#group)" x="5" rotate="0" />
         </Svg>;
     }
 }

Example/main.js

@@ -111,8 +111,8 @@ const styles = StyleSheet.create({
     }
 });
 
-//const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Use', 'Symbol', 'Gradients', 'Clipping', 'Image', 'TouchEvents'];
-const names = ['Definations'];
+const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Use', 'Symbol', 'Gradients', 'Clipping', 'Image', 'TouchEvents'];
+//const names = ['Definations'];
 
 class SvgExample extends Component {
     constructor() {