<!-- 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
This is a sibling PR to:
https://github.com/software-mansion/react-native-svg/pull/2318 which
fixed missing mount/unmount methods to correctly display SVG.
This PR overrides the same `mountChildComponentView` and
`unmountChildComponentView` methods but for `RNSVGSvgView` component.
This will make the components and their behaviour aligned and more
predictable.
I included the test that specifically tests for attaching another
external svg into and already existing SVG, should catch any edge cases
with invalidation/redrawing.
## Test Plan
`TestExample` app -> `TestSvgUriUpdating` example.
https://github.com/software-mansion/react-native-svg/assets/3929868/49499914-7037-4ab0-a9a9-1e139d460117
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
## 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
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="https://github.com/indutny/node-ip/commit/1ecbf2fd8c0cc85e44c3b587d2de641f50dc0217"><code>1ecbf2f</code></a>
1.1.9</li>
<li><a
href="https://github.com/indutny/node-ip/commit/6a3ada9b471b09d5f0f5be264911ab564bf67894"><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>
