Description
Description
On the new architecture, boxShadow will not match it's View's layout if the initial scale transform value is set to something other than 1.
Even after animating the scale transform to another value, the boxShadow remains out of sync with the View. If the value is initially 1, and then animates to another value, the shadow will remain in sync (demonstrated in the video).
If the value is initially less than 1, the shadow will be too small . If greater than 1, the shadow will be too big.
The old shadow props (shadowOffset, shadowRadius, shadowOpacity) work correctly.
Steps to reproduce
https://snack.expo.dev/@adamhari-kashoo/box-shadow-scale-anim-fabric-bug
React Native Version
0.79.1
Affected Platforms
Runtime - iOS
Areas
Fabric - The New Renderer
Output of npx @react-native-community/cli info
System:
OS: macOS 14.6.1
CPU: (12) arm64 Apple M2 Pro
Memory: 117.80 MB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.20.5
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: ~/.yarn/bin/yarn
npm:
version: 10.8.2
path: /usr/local/bin/npm
Watchman:
version: 2024.09.09.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /Users/adamhari/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.2
- iOS 18.2
- macOS 15.2
- tvOS 18.2
- visionOS 2.2
- watchOS 11.2
Android SDK: Not Found
IDEs:
Android Studio: 2023.1 AI-231.9392.1.2311.11330709
Xcode:
version: 16.2/16C5032a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.10
path: /usr/bin/javac
Ruby:
version: 2.7.6
path: /Users/adamhari/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 18.0.0
wanted: 18.0.0
react:
installed: 19.0.0
wanted: 19.0.0
react-native:
installed: 0.79.1
wanted: 0.79.1
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
Stacktrace or Logs
n/a
Reproducer
https://github.com/adamhari/animating-transform-breaks-fabric-box-shadow