# Summary
Change data structure returned from the Image onLoad event.
Add fix in new arch for returned sizes.
## Test Plan
Manually test in both architectures and platforms.
### What's required for testing (prerequisites)?
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
---------
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
# Summary
On iOS with the new architecture, when mounting or unmounting a
component, changes were not visible because `invalidate` wasn't called.
These changes override `mountChildComponentView` and
`unmountChildComponentView` to ensure that invalidate is called when
`RNSVGNode` is mounted or unmounted.
## Test Plan
`TestExample` app -> `MountUnmount` example
```tsx
import React from 'react';
import {Button, Text, View} from 'react-native';
import {Rect, Svg} from 'react-native-svg';
export default () => {
const [show, setShow] = React.useState(true);
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Blue rect is mounted: {show ? 'true' : 'false'}</Text>
<Svg height="300" width="300">
{show ? (
<Rect x="100" y="100" width="100" height="100" fill="blue" />
) : null}
</Svg>
<Button title="Toggle" onPress={() => setShow(!show)} />
</View>
);
};
```
https://github.com/software-mansion/react-native-svg/assets/39670088/0eaf9a61-b47b-4f89-a7c7-a67375e2e63ehttps://github.com/software-mansion/react-native-svg/assets/39670088/709feedf-63c1-47d7-b799-f3899278fe77
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
# 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#1483Closes#1524
We want a handle `onPress` prop on the web version in SVG components.
## Test Plan
Check on `react-native` web version if prop onPress works.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Web | ✅ |
# Summary
Fix problem package.json
## Test Plan
install packages and run apps.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Web | ✅ |
# 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
Add GH action to close issues that were without response to the
question.
## Test Plan
Check if that GH action closes the issue if no one response to the
question.
# Summary
We want to fix the TextExample app
- change version of react-native-reanimated.
- add to `metro.config.js` extraNodeModules:
```
'react-native-svg': `${__dirname}/../`
```
## Test Plan
test manually.
# 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
We had similar config in react-native-screens. It caused problem when
building Paper arch app after Fabric. Those changes help, so I'm moving
them here as well.
# 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
Fixes android packageName by changing it in codegen configuration from
`com.horcrux.rnsvg` to `com.horcrux.svg`
## Tests
Tested with oldest supported `react-native@0.70.0` with an old
architecture and everything is working as expected.
# 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
* Fixed crash on Android when `<RadialGradient r={0}>`.
* Fixed render issue on Android and iOS when radius is zero. According
to [MDN
Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/r#radialgradient)
> A value of lower or equal to zero will cause the area to be painted as
a single color using the color and opacity of the last gradient
`<stop>`.
## Test Plan
Test is available in `TestsExample` as `Test2170`
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
Fixes#2170
# Summary
As per title, when running an app in bridgless mode the following redbox
appears:
> StaticViewConfigValidator: Invalid static view config for
'RNSVGSvgViewAndroid'.
>
> 'validAttributes.borderBlockColor' is missing.
> 'validAttributes.borderBlockEndColor' is missing.
> 'validAttributes.borderBlockStartColor' is missing.
> 'validAttributes.borderEndEndRadius' is missing.
> 'validAttributes.borderEndStartRadius' is missing.
> 'validAttributes.borderStartEndRadius' is missing.
> 'validAttributes.borderStartStartRadius' is missing.
## Test Plan
Tested that the redbox is gone.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | N/A |
| 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`
- [ ] I updated the typed files (typescript)
- [ ] I added a test for the API in the `__tests__` folder
---------
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect -->
# Summary
On Cocoapods versions of lower than 1.14.3, pod install fails due to it
not understanding the visionos field.
Our company cannot use a higher version of Cocoapods right now, so it
would be beneficial if we or other similar people can use the latest
version of react-native-svg without having to upgrade the Cocoapods
version.
I was able to find this solution from
https://github.com/getsentry/sentry-react-native/issues/3547#issuecomment-1907677879
## 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`
- [ ] I updated the typed files (typescript)
- [ ] I added a test for the API in the `__tests__` folder
# 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`
# Summary
Adds namespace redirects required to compile react-native-svg sources
against WinAppSDK for react-native-windows.
## Test Plan
There aren't a lot of examples for building react-native-windows apps in
open source targeting WinAppSDK, but we have some proprietary builds,
and this source code is working there (it is also still compatible with
UWP).
# Summary
PR bringing proper support for react-native-reanimated in the library by using dynamics instead of strings for props that can be either string or number.
Bumps [ip](https://github.com/indutny/node-ip) from 1.1.8 to 1.1.9.
<details>
<summary>Commits</summary>
<ul>
<li><a
href="1ecbf2fd8c"><code>1ecbf2f</code></a>
1.1.9</li>
<li><a
href="6a3ada9b47"><code>6a3ada9</code></a>
lib: fixed CVE-2023-42282 and added unit test</li>
<li>See full diff in <a
href="https://github.com/indutny/node-ip/compare/v1.1.8...v1.1.9">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/software-mansion/react-native-svg/network/alerts).
</details>
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
On Windows, RNSVG.dll is getting flagged by AppLocker on many of our user's devices because it is missing proper publisher/versioning information in its metadata. This forces users to manually add this DLL to AppLocker's allow-list during some update/installation scenarios.
The RNSVG.sln file also currently fails to build from Visual Studio directly, because the fmt project is not explicitly included from the react-native-windows Node package.
Test Plan
For testing, I opened RNSVG.sln in Visual Studio on Windows (with Node packages installed and other build prerequisites) and built it for Debug|x64.
Without my change, building the solution fails to build directly from Visual Studio (since it fails to link fmt.lib when building the Microsoft.ReactNative project). Even when building from the terminal using MSBuild, RNSVG.dll properties do not contain proper publisher/versioning details.
With my change, building the solution in Visual Studio succeeds and RNSVG.dll contains the correct publisher/versioning details in its properties. These can be viewed via File Explorer.
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
XAML may unload the root SVG panel, which will trigger a recursive unload. For GroupView, this unload will clear the child collection. However, active operations on the SVG from the React Native UIManager may still be in flight, in which case we may attempt to remove a child that has already been cleared by the root unload.
This is the same issue as the one I fixed last year in #1874
To prevent this from occurring again, I enabled the `isolatedModules`
Typescript option which will warn when you export non-value identifiers
without using `export type`, which will break transpilation processes
what work on a per-file basis. You can find a [more detailed explanation
in Typescript's
doc](https://www.typescriptlang.org/tsconfig#isolatedModules)
# Summary
Type TransformsStyle['transform'] has `string` added as option from
React Native 0.71.9 onward. This breaks the logic of
`transformsArrayToProps`.
This PR fixes this by scoping down the type, and removing a no-op usage
of `transformsArrayToProps`
This has been broken for a while, but not immediately visible to users
compiling using Metro and Babel.
