# 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.
# Summary
Add basic support for React Server Components support. This package
could surely be improved (at least on web) but there are a lot of class
components (unsupported in RSC) which need to be rewritten to function
components in order to compile down further. For now, I'm opting the
entire package.
Related PRs for more context:
- https://github.com/necolas/react-native-web/pull/2678
- https://github.com/th3rdwave/react-native-safe-area-context/pull/502
- I've added more support for mixing export types, but it isn't perfect
https://github.com/expo/expo/pull/29426
## Test Plan
- It's kinda hard to test this E2E. I wrote a small jest runner in
jest-expo which executes in RSC mode, but it requires React 19 to work.
Here's where I tested this patch https://github.com/expo/expo/pull/29404
# 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.
