# Summary
* Add results alias in `FeDropShadow`
* Import React in every tsx filter file to satisfy typescript/eslint
* Replace `<>` with `<React.Fragment>` in `FeDropShadow`
# Summary
Bumped package and tests-example app from *last* golden release
`react-native@0.77.0-rc.7` to stable `react-native@0.77.0` and tested
for regression.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
## Checklist
<!-- Check completed item, when applicable, via: [X] -->
- [x] I have tested this on a device and a simulator
# Summary
Fixes#2610
It's more of a hack than the best fix for that; however, it's a
regression that we should address.
## Test Plan
Test case provided in #2610
# Summary
Fixes#2585
Improve the `onPress` events by ignoring touches outside the `Svg` view.
This is implemented as follows:
* on Android by clipping the Android's element dimensions to (0, 0,
canvas width, canvas height)
* on Apple by improving `hitTest` to exclude touches outside the bounds
of (0, 0, bounds width, bounds height)
https://github.com/user-attachments/assets/59417493-d849-47df-84e8-d5b0a6045b00
<!-- 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 PR reverts #2555, as `RenderableView.hitTest()` can be replaced by
`SvgView.reactTagForTouch()`, which is already `public`.
This PR also changes the `package-private` `getSvgView()` method of
`VirtualView` to `public`.
This change has been made to handle hit detection of transformed
`VirtualView`s, as `RenderableView`'s `hitTest()` doesn't take
transformations into account, while `SvgView`'s `reactTagForTouch()`
does.
Making `getSvgView()` public is necessary for integrating RNSVG support
into RNGH. More details
[here](https://github.com/software-mansion/react-native-gesture-handler/pull/3242/).
## Test Plan
Run the example from the RNGH - RNSVG [integration
PR](https://github.com/software-mansion/react-native-gesture-handler/pull/3242/).
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
Fix typo in CMakeLists.txt flags and use `ReactAndroid_VERSION_MINOR`
instead of `REACT_NATIVE_MINOR_VERSION`
## Test Plan
Example apps should build without warnings/errors on 0.73+ as well as on
0.77.0-rc.6
# Summary
Fixes#2599
Starting with `v15.8.0`, we support `react-native@0.73+`, which
eliminates the need to worry about AGP versions below 7. Consequently,
the `package` attribute in `AndroidManifest.xml` can be safely removed,
along with the corresponding check in `build.gradle`.
## Test Plan
Build the app on all supported versions
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
* Bump react-native and other packages (babel, eslint, prettier,
`@types`) to resolve errors in
https://github.com/software-mansion/react-native-svg/pull/2586
* Cleanup unused/unnecessary devDependencies
## Test Plan
Lib should work exactly the same as before.
# Summary
With react-native@0.77 `yoga::value` is no longer available and we
should use `yoga::StyleLength`.
## Test Plan
App should build again on 0.77.rc-3
# Summary
The SVG specification does not strictly standardize linking, and most
browsers permit the use of `'` as a wrapper in `url` links. As a result,
I've added support for URLs such as `url('#id')`.
## Test Plan
`url(#id)` and `url('#id')` should do the exact same thing.
Closes#1768
# Summary
Fixes#2571.
Since filter shaders are already provided as compiled `*.metallib`
files, there is no need to include `*.metal` files in the `source_files`
list.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
# Summary
Implement custom shadow nodes for nearly all `Svg` components. While
it's a foundation for numerous upcoming changes, it currently addresses
and resolves#2544.
## Test Plan
There shouldn't be any noticeable changes, and everything should
function as before, except that `onLayout` will now be triggered only
once and with the correct dimensions.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅ |
| Android | ✅ |
---------
Co-authored-by: Jakub Piasecki <jakubpiasecki67@gmail.com>
# Summary
Add a newly introduced field `ios.componentProvider` to the `codegen`
configuration to create an association map between JS components and
their native implementations.
When this field is defined, it is used and codegen don't crawl the file
system looking for the mapping. You can find the documentation for it
here:
https://github.com/facebook/react-native-website/pull/4388/files#diff-7fbb6ff2e58f8bd50d2763e551c63e1816adb6d593f40d489785b575b0e82718R76
## Test Plan
Running `pod install` in the `tests-example` will currently hang and
eventually crash, as it attempts to crawl through the entire repository.
# Summary
This is a blind fix for issue #2566 that resets the caller on
`prepareForRecycle`. While it should help address the overflow happening
in some cases, I cannot guarantee that it will fully resolve the issue
due to the lack of a reproducible scenario.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅ |
# Summary
Bump TestsExample to `react-native@0.77.0-rc.1` to track compatibility
with the latest version
## Test Plan
`TestsExample` should compile.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
# Summary
When using `SvgXml` or `SvgCss`, an `id` attribute gets converted into a
`number` instead of a `string`, which causes a crash because the native
side expects a string value.
```js
import {SvgXml} from 'react-native-svg';
import {SvgCss} from 'react-native-svg/css';
```
## Test Plan
This example should not crash:
```jsx
import {SvgCss} from 'react-native-svg/css';
const svgXml = `
<svg width="100" height="100" viewBox="0 0 100 100">
<filter x="0%" y="0%" width="100" height="100" id="0123456789">
<feFlood flood-color="red" />
</filter>
<circle cx="50" cy="50" r="50" filter="url(#0123456789)" />
</svg>
`;
function Example() {
return <SvgCss xml={svgXml} />;
}
```
<!-- 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
Adding an `RNGH <-> RNSVG` interface requires usage of
`RenderableView.hitTest` to work.
([link](https://github.com/software-mansion/react-native-gesture-handler/pull/3242))
Currently, `RenderableView.hitTest` is `package-private`, meaning it
cannot be accessed by other packages.
This change does not change any functionality of the library, it only
exposes existing functions to other libraries.
I only made public those `hitTest` implementation which are strictly
necessary for this interface, this is why multiple, if not most
`hitTest` implementations remain `package-private` despite the changes
made in the PR.
## Test Plan
- open the example app, see how the app builds successfully
### What's required for testing (prerequisites)?
- `RNSVG`'s `paper-example` app
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ❌ |
| MacOS | ❌ |
| Android | ✅ |
| Web | ❌ |
## 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
Replace deprecated `TransformHelper.processTransform` with a new
function that also gets `transformOrigin`.
## Test Plan
Transforms should function properly, and this error should not occur
during the build process:
```
> Task :react-native-svg:compileDebugJavaWithJavac
/react-native-svg/apps/paper-example/node_modules/react-native-svg/android/src/main/java/com/horcrux/svg/RenderableViewManager.java:390: warning: [removal] processTransform(ReadableArray,double[]) in TransformHelper has been deprecated and marked for removal
TransformHelper.processTransform(transforms, sTransformDecompositionArray);
^
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
1 warning
```
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
When using the Animated API for animations, it sends the last frame as
JavaScript-parsed (matrix) updates in addition to native (transform)
updates. ~~As a result, we need to ignore one of them.~~ I believe
there's no need to differentiate between native and JavaScript
updates—we can simply save both to the same value (mMatrix). By doing
so, we can avoid duplicating the transforms.
| Before | After |
|--------|--------|
| <video
src="https://github.com/user-attachments/assets/868cc778-4b88-4473-85b5-9665b4b241aa">
| <video
src="https://github.com/user-attachments/assets/c6d17b7b-7c9a-47c3-8286-2d9b5720f261">
|
## Test Plan
```jsx
import React, {useEffect} from 'react';
import {Animated, useAnimatedValue, View} from 'react-native';
import {Rect, Svg} from 'react-native-svg';
const AnimatedRect = Animated.createAnimatedComponent(Rect);
function AnimatedJumpIssue() {
const animatedValue = useAnimatedValue(100);
return (
<>
<View style={{borderColor: 'black', borderWidth: 1}}>
<Svg height="100" width="400">
<AnimatedRect
x="0"
y="0"
width="100"
height="100"
fill="black"
transform={[{translateX: animatedValue}]}
/>
</Svg>
</View>
<Button
title="Press me"
onPress={() => {
Animated.timing(animatedValue, {
toValue: 200,
duration: 3000,
useNativeDriver: true,
}).start();
}}
/>
</>
);
}
```
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
| iOS | ✅ |
| macOS | ✅ |
# Summary
Add `resolveTransforms` on `updateProps` to get correct matrix. It will
improve animating transformations, as Animated/Reanimated skips JS
`processTransform` and passes transformations directly.
## Test Plan
Animate `transform` prop in react-native style.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅ |
# Summary
#2541 is not compatible with `react-native@0.73`. This PR introduces
sourceSet to maintain support for that version.
## Test Plan
Build app with `react-native@0.73.x`
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
Address some deprecated API's in SVGPackage
# Summary
This improves compatibility with future React Native releases, which
will remove TurboReactPackage and the ReactModuleInfo constructor used.
## Test Plan
CI
# Summary
Regenerate pods to fix `paper-macos-example` workflow.
`fabric-macos-example` will still fail as it doesn't have any startup
command, but it's not our fault.
## Test Plan
CI for `peper-macos-example` should be green
# Summary
There are two main things going on with the PR. Both involve a reworking
of the new arch implementation of rn-svg for windows.
The current implementation attempts to implement a svg renderer from
scratch. There are numerous edge cases that it wasn't handling
correctly, and the performance had some serious issues. This
implementation switches to use the svg rendering path built into
Direct2D. This brings significant performance improvements.
The 2nd issue is there have been various breaking changes in
react-native-windows for how new arch native components are implemented.
This brings the rn-svg implementation in line with those latest changes.
## Test Plan
Primary testing right now is loading up the example app in the repo.
New arch on react-native-windows is still in somewhat early days - so
there are not really current users of this code. I am integrating this
code into Microsoft Office, where I have tested some scenarios. But we
will get expanded testing as we roll out the new arch. I expect there to
be some follow-ups as we expand our usage. The version of rn-svg before
this PR doesn't build with the latest new arch react-native-windows
versions. - So its hard to get worse than that.
### What's required for testing (prerequisites)?
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | N/A |
| MacOS | N/A |
| Android | N/A |
| Web | ✅ |
## Checklist
- [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
