feat: allow Mask & Image on React Native (#202)

Author: kimak

packages/core/src/h2x/__snapshots__/toReactNative.test.js.snap

@@ -2,9 +2,13 @@
 
 exports[`toReactNative should take svg and convert it to react-native 1`] = `
 "<Svg>
-  <G stroke=\\"#063855\\" strokeWidth={2}>
-    <Path d=\\"M51,37 L37,51\\" id=\\"Shape\\" />
-  </G>
+  <Defs>
+    <Mask id=\\"mask1\\" x={0} y={0} width={100} height={100}>
+      <Rect x={0} y={0} width={100} height={50} style={{\\"stroke\\":\\"none\\",\\"fill\\":\\"#ffffff\\"}} />
+    </Mask>
+  </Defs>
+  <Image xlinkHref=\\"firefox.jpg\\" x={0} y={0} height=\\"50px\\" width=\\"50px\\" />
+  <Rect x={1} y={1} width={100} height={100} style={{\\"stroke\\":\\"none\\",\\"fill\\":\\"#0000ff\\",\\"mask\\":\\"url(#mask1)\\"}} />
 </Svg>
 "
 `;

packages/core/src/h2x/toReactNative.js

@@ -19,6 +19,8 @@ const elementToComponent = {
   use: 'Use',
   defs: 'Defs',
   stop: 'Stop',
+  mask: 'Mask',
+  image: 'Image',
 }
 
 const componentToElement = Object.keys(elementToComponent).reduce(

packages/core/src/h2x/toReactNative.test.js

@@ -7,10 +7,16 @@ describe('toReactNative', () => {
     const result = transform(
       `
       <svg>
-        <g stroke="#063855" stroke-width="2">
-          <path d="M51,37 L37,51" id="Shape"></path>
-        </g>
-      </svg>
+        <defs>
+          <mask id="mask1" x="0" y="0" width="100" height="100" >
+            <rect x="0" y="0" width="100" height="50"
+                style="stroke:none; fill: #ffffff"/>
+          </mask>
+        </defs>    
+        <image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>        
+        <rect x="1" y="1" width="100" height="100"
+            style="stroke: none; fill: #0000ff; mask: url(#mask1)"/>
+        </svg>
     `,
       { plugins: [jsx, toReactNative()] },
     )