5 Commits

Author SHA1 Message Date
SergeyYurkevich 832522d1c1 feat: implement mask-type property (#2152)
# Summary

"mask-type: alpha" is not supported. 
resolve issue: #1790  

## Explanation

svg example:
```
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none">
<g clip-path="url(#clip0_8_3)">
<rect width="100" height="100" fill="white"/>
<mask id="mask0_8_3" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
<circle cx="50" cy="50" r="50" fill="#000000"/>
</mask>
<g mask="url(#mask0_8_3)">
<rect x="-26" y="-78" width="209" height="263" fill="#252E74"/>
</g>
</g>
<defs>
<clipPath id="clip0_8_3">
<rect width="100" height="100" fill="white"/>
</clipPath>
</defs>
</svg>
```

Current behavior: 

![image](https://github.com/software-mansion/react-native-svg/assets/17138397/2dca6f46-fe8f-48f3-80f9-799563911e8b)

Expected behavior:

![image](https://github.com/software-mansion/react-native-svg/assets/17138397/fb49cf0b-d677-491f-8215-9c9b1d69080f)

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |        |
| Android |        |

## Checklist

<!-- Check completed item, when applicable, via: [X] -->

- [x] I have tested this on a device and a simulator
- [ ] I added documentation in `README.md`
- [x] I updated the typed files (typescript)
- [ ] I added a test for the API in the `__tests__` folder

---------

Co-authored-by: Sergey <s.yurkevich@logiclike.com>
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
2024-07-05 15:11:48 +02:00
Wojciech Lewicki 6a5242f00b fix: proper transform prop handling (#1895)
PR aligning handling of transform prop between web and native and adding proper handling of transform prop on web.

origin prop is now treated as transform-origin since it seems like the current behavior of this prop on native platforms.
transform prop cannot be an object with transform properties since it does not provide order of transformations which would lead to undefined behavior so this option has been removed.
RN style of transform prop (array of rotation objects) can now be used
font-size on web seems to be 16px by default and it is 12 in library - maybe we should align it somehow
removed maskTransform prop since it does not exist in SVG standard and did nothing on native side
fixed typo in Fabric Pattern updateProps method
2022-10-25 15:55:17 +02:00
Wojciech Lewicki ee6e5da195 feat: transfer specs to ts and remove unnecessary props (#1865)
PR transfering Fabric specs to TS, removing unnecessary @ReactProp adnotations, unifying inheritance hierarchy across platforms, adding custom types for color and image source props so they are parsed by react-native.
2022-09-14 12:01:35 +02:00
Wojciech Lewicki 98c14b4f45 chore: add CI for JS, iOS and Android formatting (#1782)
Added CI workflow and local pre-commit hook for formatting and linting the newly added JS, iOS and Android code.
2022-08-16 12:00:32 +02:00
Wojciech Lewicki 8f1bda4856 feat: add Fabric on iOS without ComponentViews (#1821)
Version of #1754 without usage of ComponentViews. It seems like a more proper way, but introduces the necessity of clearing whole state of each component on recycling for it not to be used when view is recycled.

Still known problems:

We stringify props of type NumberProp since codegen only accepts props of a single type. It is the fastest way of dealing with it, but maybe there could be a better way to handle it.
Image resolving should be probably handled the same as in RN core
SvgView needs to set opaque = NO so it is does not have black background (it comes from the fact that RCTViewComponentView overrides backgroundColor setter which in turn somehow messes with the view being opaque). All other svg components do it already so maybe it is not such an issue.
transform prop won't work when set natively since it is not parsed in Fabric
2022-08-11 14:08:11 +02:00