# 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
# Summary
Fixes#2529
`FeBlend` should have default blend mode set to `normal`
## Test Plan
Test case specified in #2529
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
<!-- 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
As per the spec, bbox should not include any transformations, including
scaling. It should also not include any control points. This fixes
getBBox to give correct results matching Google Chrome, Firefox as per
the spec.
* 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)
Bug fix.
* How did you implement the solution?
Like this, see.
* What areas of the library does it impact?
getBBox API.
## Test Plan
I build some stuff that works with SVG, the results on web were
inconsistent, and digging down I realise it was a react-native-svg.
Some fun fact, there was a surprisingly similar bug related to very
confusing named (CGPathGetBoundingBox vs CGPathGetPathBoundingBox) APIs
in Firefox some years ago as well.
https://bugzilla.mozilla.org/show_bug.cgi?id=1369904
### What's required for testing (prerequisites)?
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | 🔘# |
| Web | 🔘 *|
* Depends on the host platform. But works fine in major browsers.
# will create a follow up PR. Currently getBBox on Android doesn't
account for scaling properly.
## 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
Co-authored-by: Omeid Matten <omeid@kemene.com>
# Summary
Closes#2523
Since `FeBlend`, `FeComposite`, `FeDropShadow` and `FeFlood` is already
supported (see: #2362) we should remove it from
`warnUnimplementedFilter` list
# 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
`run-ios` script has been removed from `react-native@latest` so we
shouldn't use that (and probably should migrate to
@react-native-community/cli in the future)
# Summary
Due to the large number of example apps in the repository, I decided to
change the structure and move all applications into an "apps" folder to
maintain a clear structure.
# Summary
While upgrading `./example` app to `react-native@0.76.0` I've
encountered conflicts on `@react-native/gradle-plugin` caused by
`react-native-windows@0.74.9` depending on
`@react-native/gradle-plugin@0.74.83`
This PR extracts Windows example to separate `./paper-windows-example`
so it won't conflict with RN updates in the future
## Description
Removes legacy version check from `react-native.config.js`.
## Changes
The community CLI is no longer a dependency for React Native, meaning it
may not be installed in every project. For example, projects that use
Expo won't include the `@react-native-community/cli-*` packages.
Consequently, this check will fail, leading to issues with autolinking
components.
This version check can be removed safely, as the 9th version of the CLI
was released two years ago.
## Tests
This change was tested using `expo` project on react native `0.76`.
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
# Summary
For some reason, someone installed `react-native-screens` and
`react-native-safe-area-context` into macOS example app. This PR removes
it, so CI should pass now.
