# 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
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
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>
<!-- 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
#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
While working on
https://github.com/software-mansion/react-native-svg/pull/2514 I've
noticed a bug in `FeComposite` on Android that `in2` was ignored
## Test Plan
Run Example app -> filters -> FeComposite on Android
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
While working on #2514 I've noticed that negative dx/dy were treated as
positive.
## Test Plan
Add FeOffset filter with negative dx/dy to an element. It should move
closer to upper left corner.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
Use elements had incorrect `clientRect` based on templates' rect, which
was incorrect. With this change, it ensures client rect is based on path
transformed by CTM.
## Test Plan
Example app -> Filters -> FeComposite
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
Do not crash on `getCropRect` call when renderableBounds is null
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
This fix addresses a minor bug/typo that was recently introduced, where
the filter subregion was incorrectly relying on filterUnits instead of
primitiveUnits.
# Summary
After deep dive into the specification, I found out that the default
filter subregion is not equal to `0% 0% 100% 100%`, rather the size of
the parent filter region.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅ |
| Android | ✅ |
# Summary
[apple] Use filter region directly instead of creating new one on every
rerender.
[android] rename some variables and add temporary fix for null lengths
# Summary
Currently on Fabric, you cannot animate color properties like `fill` or
`stroke` using Animated with `useNativeDriver: true` or Reanimated.
That's because we have custom structure that needs to be parsed on `JS`
and looks like:
```ts
type ColorStruct = Readonly<{
type?: WithDefault<Int32, -1>;
payload?: ColorValue;
brushRef?: string;
}>;
```
However, special values like `currentColor` / `context-fill` /
`context-stroke` / `/^url\(#(.+)\)$/` can not be animated anyway.
Instead, we should allow passing `ColorValue` directly and detect on the
native side if its ColorValue or ColorStruct.
## Test Plan
Example app -> TestX
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅ |
| Android | ✅ |
## Checklist
- [x] I have tested this on a device and a simulator
- [ ] I added documentation in `README.md`
# Summary
Without the `maskUnits` attribute, masks may not render correctly, as
seen in issue #2449. This pull request adds support for `maskUnits` and
ensures proper cropping within the mask boundaries.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅ |
| Android | ✅ |
# Summary
On Android when element before masked element has strokeOpacity
different from 1, the paint is reused to draw an offscreen layer
resulting in wrong opacity. Partially fixes (only on Android) #2449
## Test Plan
Add `stroke` and `strokeOpacity` to element directly before masked
element.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
Implement proper handling for filter region according to the specs:
*
[FilterEffectsRegion](https://www.w3.org/TR/SVG11/filters.html#FilterEffectsRegion)
*
[FilterPrimitiveSubRegion](https://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveSubRegion)
enabling user to specify
* `filterUnits`
* `primitiveUnits`
* `x`
* `y`
* `width`
* `height`
on `Filter` element and the last four on filter primitives.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅ |
| Android | ✅ |
| Web | ✅ |
# Summary
Fixes#2428
To not introduce the breaking change in minor version, it restores the
old `SvgViewManager.java` on RN <= 72 using sourceSets
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
Fixes#2436.
#2403 introduced shared `Paint` between the node render method and the
final bitmap. However, Paint properties are not cleared after drawing,
so we need to call the `.clear()` method and re-enable antialiasing.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
Explain the **motivation** for making this change: here are some points
to help you:
* What issues does the pull request solve? Please tag them so that they
will get automatically closed once the PR is merged
* What is the feature? (if applicable)
* How did you implement the solution?
* What areas of the library does it impact?
## Test Plan
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes UI.
### What's required for testing (prerequisites)?
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅❌ |
| Android | ✅ |
| Web | ✅❌ |
<!-- 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
Explain the **motivation** for making this change: here are some points
to help you:
* What issues does the pull request solve? Please tag them so that they
will get automatically closed once the PR is merged
* What is the feature? (if applicable)
* How did you implement the solution?
* What areas of the library does it impact?
## Test Plan
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes UI.
### What's required for testing (prerequisites)?
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅❌ |
| Android | ✅❌ |
## Checklist
<!-- Check completed item, when applicable, via: [X] -->
- [x] I have tested this on a device and a simulator
- [x] I added documentation in `README.md`
- [x] I updated the typed files (typescript)
- [x] I added a test for the API in the `__tests__` folder
# Summary
This PR contains two small refactors of filters:
* extract common props on ViewManagers on Android
* remove unnecessary extract in `FeOffset` filter
# Summary
Continuation of #2316
Introducing new filter `FeOffset`.
## Test Plan
Example app -> Filters -> FeOffset
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
## Checklist
- [x] I have tested this on a device and a simulator
- [x] I added documentation in `README.md`
- [x] I updated the typed files (typescript)
# Summary
Continuation of #2316
Introducing new filter `FeGaussianBlur`.
### Implementation notes
On Android there is no easy way to fully implement Gaussian blur, as
there is no native api for this. While a basic implementation is
possible with `RenderScript`, it does not allow for blur in one axis and
greater than `25`
## Test Plan
Example app -> Filters -> FeGaussianBlur
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
# Summary
While debugging #2364 I've noticed that color shift in `FeColorMatrix`
on Android is wrong.
On web, elements 5, 10, 15, 20 is a color shift represented by number
where 1 mean full color shift, while on Android it's 255 for full color
shift.
## Test
```tsx
<svg width="180" height="180" viewBox="0 0 180 180">
<rect width="180" height="180" fill="red" filter="url(#filter)"/>
<filter id="filter">
<feColorMatrix type="matrix" values="0 0 0 0 1
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0"/>
</filter>
</svg>
```
