Refactor reuse elements

Refactor reuse elements

Example/examples/Text.js

@@ -47,13 +47,35 @@ class TextRotate extends Component{
                 x="126"
                 y="24"
                 fill="#f60"
-                rotate="16"
+                rotate="78"
                 scale="1.36"
+                origin="20, 0"
             >I love SVG</Text>
         </Svg>;
     }
 }
 
+class TextStroke extends Component{
+    static title = 'Stroke the text';
+    render() {
+        return <Svg
+            height="60"
+            width="200"
+        >
+            <Text
+                fill="none"
+                stroke="purple"
+                fontSize="20"
+                fontWeight="bold"
+                x="100"
+                y="20"
+                alignment="center"
+            >STROKED TEXT</Text>
+        </Svg>;
+    }
+}
+
+
 // TODO: wait for official done
 class TextPath extends Component{
     static title = 'Transform the text';
@@ -90,7 +112,7 @@ const icon = <Svg
     >字</Text>
 </Svg>;
 
-const samples = [TextExample, TextRotate];
+const samples = [TextExample, TextRotate, TextStroke];
 
 export {
     icon,

Example/examples/Use.js

@@ -7,7 +7,8 @@ import Svg, {
     Use,
     G,
     Rect,
-    Circle
+    Circle,
+    Polyline
 } from 'react-native-art-svg';
 
 class UseExample extends Component{
@@ -42,8 +43,8 @@ class UseShapes extends Component{
             <G id="shape">
                 <Rect x="0" y="0" width="50" height="50" />
             </G>
-
             <Use href="#shape" x="75" y="50" fill="#0f0"/>
+            <Use href="#shape" x="110" y="0" stroke="#0ff" fill="#8a3" rotation="45" origin="25, 25"/>
             <Use href="#shape" x="150" y="50" stroke="#0f0" fill="none"/>
         </Svg>;
     };
@@ -53,7 +54,13 @@ const icon = <Svg
     height="20"
     width="20"
 >
-
+    <Polyline
+        points="5,0 2,2 2,4 6,6 3,8 6,10 7,12 5,14 8,16 9,18"
+        fill="none"
+        stroke="#8a3"
+        id="line"
+    />
+    <Use href="#line" x="10" stroke="#3a8" />
 </Svg>;
 
 const samples = [UseExample, UseShapes];

Example/main.js

@@ -23,9 +23,7 @@ import {
     Line
 } from 'react-native-art-svg';
 import * as examples from './examples';
-import _ from 'lodash';
 import Modal from 'react-native-root-modal';
-
 const hairline = 1 / PixelRatio.get();
 
 const styles = StyleSheet.create({
@@ -106,7 +104,6 @@ const styles = StyleSheet.create({
     }
 });
 
-
 const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Use'];
 
 class ArtSvgExample extends Component {

Example/package.json

@@ -6,6 +6,8 @@
     "start": "react-native start"
   },
   "dependencies": {
-    "react-native": "^0.18.1"
+    "react-native": "^0 .18.1",
+    "react-native-art-svg": "^1.0.1",
+    "react-native-root-modal": "^1.0.2"
   }
 }