PR based on https://github.com/software-mansion/react-native-svg/pull/1452 extracting `css` related components to different package to reduce the size of the package.
***THIS IS A BREAKING CHANGE***. From now on, you should import
```
SvgCss,
SvgCssUri,
SvgWithCss,
SvgWithCssUri,
inlineStyles,
LocalSvg,
WithLocalSvg,
loadLocalRawResource,
```
from `react-native-svg/css` package instead.
This change removes the win2d (Direct2D wrapper) dependency by using D2D directly. This removes the manual step of adding the win2d to any new react-native-windows projects that want to use react-native-svg. It is also a stepping stone to an easier Fabric implementation for windows.
PR restoring macos CI job and restoring usage of UIGraphicsBeginImageContextWithOptions on macos since there is no implementation for UIGraphicsImageRendererFormat there yet.
Since UIGraphicsBeginImageContextWithOptions will be depracated in iOS 17 (developer.apple.com/documentation/uikit/1623912-uigraphicsbeginimagecontextwitho), I changed the implementation to not use it and use UIGraphicsImageRenderer instead.
Also added Mask examples to be able to test it.
PR adding better Marker support on Android. Markers were only displayed on Path on Android. I have looked at the code and Markers are based on elements attribute which was only filled via PathParser. I have modified getPath method on other shapes in order to fill elements attribute. For groups I only copied data from children.
Co-authored-by: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
PR removing methods that seem unnecessary for the accessibility props since they are provided by superclasses. It was necessary to update fabric updateProps method though, since we don't call super there. Also added proper type definitions and removed unnecessary casts.
PR aligning example apps and fixing one bug. On web, if you don't pass a color to the elements, they are rendered with `black` fill. We recreate this behavior in examples, but maybe it should be the default behavior if `fill` is `undefined`. It would probably need to be changed on the native side somehow.
Another fix is to parse `fill` prop in `setNativeProps` since Fabric support has been added and `fill` prop structure has been changed, it cannot be handled on the native side on `Android` due to complying to interfaces.
Another fix is passing `transform` prop in `Svg` to `G` when it is not `react-native` style `transform` prop so it is always applied. It creates a problem mentioned in the comment in the code and should be addressed in later PRs.
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
Allow 'string' type for href and xlinkHref props in Image component.
Logic in the component allows passing 'string' values to the Image.resolveAssetSource by checking for its type, so it would be nice to reflect it on the properties types as well.
Up until now, trying to use reanimated with react-native-svg in react-native-web resulted in an error.
This adds a setNativeProps function to the web implementation to directly modify the transform and style props on a SVGElement ref.
Since there is a need to track the "last merged props" and those need to be reset on every render, the render method has been moved into the WebShape class and a tag string property has been added.
As g had some extra handling for x and y, a prepareProps function was added as well.
PR adding proper handling of pointerEvents in the library. Based on the comment by @RSNara :
> For all Android components, static ViewConfigs are generated from the components types + BaseVIewConfig.android.js. The BaseViewConfig for all android components is facebook/react-native@c5217f1/Libraries/NativeComponent/BaseViewConfig.android.js#L288-L297, which doesn't contain the pointerEvents validAttribute. So, React Native SVG components must re-declare the pointerEvents validAttribute. Otherwise, the pointerEvents validAttribute won't be in the static ViewConfig, which means React won't pass that prop to native with Static ViewConfigs.
We needed a way to trick codegen since we added our own pointerEvents with string type, and such prop is already present in ViewProps from react-native, but as a union of strings, so their types did not match. As codegen parses string literals, we include changed ViewProps type, without pointerEvents prop, so we satisfy both codegen and TS.
As for how pointerEvents are handled now:
iOS:
Paper: prop is passed in RCTViewManager but it looks like it does not matter what you pass there, since even if you set none, resulting in view.userInteractionEnabled = NO; (facebook/react-native@065db68/React/Views/RCTViewManager.m#L256), custom implementation of hitTest will not take it into account anyhow.
Fabric: we don’t use pointerEvents prop but it is not a problem since it is not used in the implementation of neither SvgView and RCTViewComponentView (it is used in hitTest method there, but we override it)
Android:
Paper: the prop was passed through ReactViewManager and was set on the view directly. But the setter for pointerEvents is not visible outside of ReactViewGroup . After adding Fabric integration for both platforms: BaseViewManager does not implement setter for pointerEvents so we have to add the prop by ourselves. Still, we cannot call the setter from ReactViewGroup since it is not visible, so all the logic for pointerEvents should be migrated to SvgView unfortunately or we should use reflection to get that method.
Despite that, it seems that behavior differs on Android and iOS since setting pointerEvents to none on Android makes the view not clickable, whereas on iOS it does not change anything.
PR bumping library to RN 0.70-rc3, which might make it not compatible with earlier versions of RN on Fabric. It should come with the same change in other libraries.
In this PR, I had to remove macos code from Example since it breaks @react-native-community/cli resolution. Hopefully we can bring it back soon.
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
PR removing extractColor.ts in favor of using the processColor implementation straight from react-native. It should handle all the cases from the previous implementation and the cases with PlatformColor and DynamicColorIOS. Normally we would just send the returned value to the native side, but in react-native-svg, e.g. fill prop can have more values than just color, e.g. currentColor. Because of it, we cannot use UIColor on iOS, NSColor on macOS and customType="Color" on Android as a prop type there and therefore we need to prepare the custom values on the JS side. It is done by passing the prop as an array with specific first element. In case of colors, it is 0. (hopefully I understood the code right).
