# 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
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 | ✅ |
<!-- 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
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.
PR adding update of _props after updateProps method in order for e.g. react-native-reanimated to pick correct props when running updates. Coauthored by @tomekzaw. It is needed since RCTMountingManager reads this field as oldProps: facebook/react-native@10e47b8/React/Fabric/Mounting/RCTMountingManager.mm#L306
PR transfering Fabric specs to TS, removing unnecessary @ReactProp adnotations, unifying inheritance hierarchy across platforms, adding custom types for color and image source props so they are parsed by react-native.
Version of #1754 without usage of ComponentViews. It seems like a more proper way, but introduces the necessity of clearing whole state of each component on recycling for it not to be used when view is recycled.
Still known problems:
We stringify props of type NumberProp since codegen only accepts props of a single type. It is the fastest way of dealing with it, but maybe there could be a better way to handle it.
Image resolving should be probably handled the same as in RN core
SvgView needs to set opaque = NO so it is does not have black background (it comes from the fact that RCTViewComponentView overrides backgroundColor setter which in turn somehow messes with the view being opaque). All other svg components do it already so maybe it is not such an issue.
transform prop won't work when set natively since it is not parsed in Fabric
Jakub Grzywacz