Repository: smooth-code/svgr
Pull request #202 (2018-10-05 15:49:11)

feat: allow Mask & Image on React Native

## Summary

New version of react-native-svg support Mask & Image:
https://github.com/react-native-community/react-native-svg/blob/master/index.js

## Test plan

- yarn build
- yarn test --watchAll


now[bot]: 
This pull request is [automatically deployed](https://zeit.co/docs/features/now-for-github?utm_source=automated&utm_medium=github&utm_campaign=now_bot) with [Now](https://zeit.co/now?utm_source=automated&utm_medium=github&utm_campaign=now_bot).
To access deployments, click Details below or on the icon next to each push.


	
codecov[bot]: # [Codecov](https://codecov.io/gh/smooth-code/svgr/pull/202?src=pr&el=h1) Report
> Merging [#202](https://codecov.io/gh/smooth-code/svgr/pull/202?src=pr&el=desc) into [master](https://codecov.io/gh/smooth-code/svgr/commit/e6772d77ab87f413ad3b142d46baa192cf6978cf?src=pr&el=desc) will **not change** coverage.
> The diff coverage is `n/a`.

[![Impacted file tree graph](https://codecov.io/gh/smooth-code/svgr/pull/202/graphs/tree.svg?width=650&token=ESkRTvXFW3&height=150&src=pr)](https://codecov.io/gh/smooth-code/svgr/pull/202?src=pr&el=tree)

```diff
@@           Coverage Diff           @@
##           master     #202   +/-   ##
=======================================
  Coverage   85.74%   85.74%           
=======================================
  Files          24       24           
  Lines         519      519           
  Branches      103      103           
=======================================
  Hits          445      445           
  Misses         66       66           
  Partials        8        8
```


| [Impacted Files](https://codecov.io/gh/smooth-code/svgr/pull/202?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [packages/core/src/h2x/toReactNative.js](https://codecov.io/gh/smooth-code/svgr/pull/202/diff?src=pr&el=tree#diff-cGFja2FnZXMvY29yZS9zcmMvaDJ4L3RvUmVhY3ROYXRpdmUuanM=) | `64.28% <ø> (ø)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/smooth-code/svgr/pull/202?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/smooth-code/svgr/pull/202?src=pr&el=footer). Last update [e6772d7...3853d18](https://codecov.io/gh/smooth-code/svgr/pull/202?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/packages/core/src/h2x/toReactNative.js b/packages/core/src/h2x/toReactNative.js
index e857b21..666c827 100644
--- a/packages/core/src/h2x/toReactNative.js
+++ b/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(


Test patch:
diff --git a/packages/core/src/h2x/__snapshots__/toReactNative.test.js.snap b/packages/core/src/h2x/__snapshots__/toReactNative.test.js.snap
index 741bd4d..e8cafe8 100644
--- a/packages/core/src/h2x/__snapshots__/toReactNative.test.js.snap
+++ b/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>
 "
 `;
diff --git a/packages/core/src/h2x/toReactNative.test.js b/packages/core/src/h2x/toReactNative.test.js
index b5bb807..8b427d8 100644
--- a/packages/core/src/h2x/toReactNative.test.js
+++ b/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()] },
     )