# Summary
Closes#1442
We want to add new props to the Image Component.
## Test Plan
Added the Test component.
Manually test that in Android and IOS platforms on new and old
Architectures.
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
# Summary
This PR resolves an issue raised in #1451.
Currently, when a mask is used, we render the element as a bitmap (or
platform equivalent), but the bitmap's size does not update accordingly
with transformations. With these changes, the problem is addressed as
follows:
* **Android**: We utilize the original canvas layers to render the mask
and element with the appropriate blending mode.
* **iOS**: We create an offscreen context with the size multiplied by
the screen scale and apply the original UIGraphics CTM (current
transformation matrix) to the offscreen context. This ensures that the
same transformations are applied as on the original context.
Additionally, there is a significant performance improvement on Android
as we are not creating three new Bitmaps and three new Canvases.
## Test Plan
There are many ways for testing these changes, but the required ones
are:
* `TestsExample` app -> `Test1451.tsx`
* `Example` app -> Mask section
* `FabricExample` app -> Mask section
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
| iOS | ✅ |
## Preview
<img width="337" alt="image"
src="https://github.com/software-mansion/react-native-svg/assets/39670088/93dbae85-edbd-452a-84b0-9a50107b1361">
<img width="337" alt="image"
src="https://github.com/software-mansion/react-native-svg/assets/39670088/07838dff-cb2d-4072-a2fc-5c16a76f6c33">
Closes#2086
# Summary
The application crashes if an error is thrown when something goes wrong
during path parse.
## Test Plan
You can easily check in that component `Test2086` how it works after the
fix.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
# Summary
Closes#2248.
Add the ability to parse `strokeDasharray` string value on the Android
platform
## Test Plan
Manually test both platforms.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
# Summary
We want to add the ability to handle the Error when someone passes the
wrong URI to the `SvgFromUri` component.
Closes#2148
## Test Plan
Manual tests in TestsExample app. (Test2148)
# Summary
When comment occurred before first tag, there was a possible parsing
error if it contains `<` character.
Here is an example (line 2 and 3 would cause separate errors):
```xml
<!-- sample rectangle -->
<!-- <sample rectangle -->
<!-- <sample> rectangle -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" x="50" y="50" fill="red" />
</svg>
```
Fixes#2276
## Test Plan
Manual tests in `TestsExample` app. (Test2276)
# Summary
This PR removes the flag to include custom line breaks on `toDataUrl`
method. Some software could not read base64 with additional line break
characters, so it could lead to corrupting the image (like in
react-native-share). Fixes#1986.
## Test Plan
`TestsExample` -> `Test1986`
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
# Summary
According to [MDN
Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width),
when `strokeWidth` is not provided, the default value should be set to
`1`.
On android, when we update the `strokeWidth` prop to `undefined` it was
mistakenly converted to `0` by `SVGLength`.
Fixes#2266
## Test Plan
Test available in `TestsExample/Test2266`
### What are the steps to reproduce (after prerequisites)?
* Run `TestsExample` app
* Replace `ColorTest` with `Test2266` in `App.js`
This crash issue still happening for SvgCssUri component
#1760
Apply similar fix#2071
specifically for SvgCSSUri component to prevent crashes due to invalid svg content
What issues does the pull request solve? Please tag them so that they will get automatically closed once the PR is merged
-> When loading invalid svg uri with SvgCSSUri, the app crashes crashes. For example the content returning html content instead of valid svg content.
How did you implement the solution?
-> Passing the fallback prop to SvgCss where will be render when error being captured
What areas of the library does it impact?
SvgCss and SvgUriCss
PR adding the proper handling of strokeDasharray prop for when used with Animated and Reanimated. Code based on #1464 by @bardliu, but with the newest state of the repository.
SvgUri component crashes an app when uri with SVG returns html or some other content instead of valid SVG.
This change prevents those crashes and adds fallback property of JSX type which is rendered instead of corrupted SVG.
I implemented this by multiplying the alpha of the currentColor by the opacity when setting a currentColor brush.
Co-authored-by: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
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.
This PR is a bug fix and makes the pointer-events box-none work again after react-native 66 changes. It changes a bit how it should be used as I'll describe below. This solves #1807 .
I created a getHitSlopRect in the RenderableView that responds with a Rect that make the hit test detection fail on the react-native forcing it to run reactTagForTouch like it used to in previous versions.
This PR impacts pointer events box-none usage. This is an important change for me because it enables the usage of overlapping SVG keeping only the painted area as touchable elements, and not the whole SVG box.
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).
