Open
Description
Description
When using multiple transform with different value type on an Animated.View, it crash:
For instance this code will crash:
Multiple transform, one transform using Animated.Value, the other is using a primitive.
<Animated.View
style={[
styles.redBox,
{transform: [{translateX: myAnimatedValue}]},
{transform: [{translateY: 100}]},
]}></Animated.View>Using only primitive, or only AnimatedValue works fine.
Merge the 2 transform into one works as well.
This break react-native-modal
Steps to reproduce
You can checkout https://github.com/ACHP/react-native-bug-transform-animated-repro
Or just add this in your app, using react-native 79, maybe lower
<Animated.View
style={[
styles.redBox,
{transform: [{translateX: myAnimatedValue}]},
{transform: [{translateY: 100}]},
]}></Animated.View>
React Native Version
0.79.2
Affected Platforms
Runtime - iOS
Output of npx @react-native-community/cli info
info Fetching system and libraries information...
System:
OS: macOS 15.3.1
CPU: (12) arm64 Apple M3 Pro
Memory: 266.09 MB / 18.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.11.0
path: ~/.nvm/versions/node/v20.11.0/bin/node
Yarn:
version: 3.6.4
path: ~/.nvm/versions/node/v20.11.0/bin/yarn
npm:
version: 10.2.4
path: ~/.nvm/versions/node/v20.11.0/bin/npm
Watchman:
version: 2024.08.12.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /var/folders/12/_ffy101j76zccg89mklrbbdw0000gn/T/frum_35152_1747404153263/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:
API Levels:
- "23"
- "25"
- "28"
- "29"
- "30"
- "31"
- "33"
- "34"
- "35"
Build Tools:
- 28.0.3
- 29.0.2
- 30.0.2
- 30.0.3
- 31.0.0
- 32.0.0
- 33.0.0
- 33.0.1
- 34.0.0
- 35.0.0
- 35.0.1
System Images:
- android-24 | ARM 64 v8a
- android-28 | ARM 64 v8a
- android-29 | Google APIs ARM 64 v8a
- android-30 | Google APIs ARM 64 v8a
- android-30 | Google Play ARM 64 v8a
- android-31 | Google APIs ARM 64 v8a
- android-31 | Google Play Intel x86_64 Atom
- android-32 | Google APIs ARM 64 v8a
- android-33-ext5 | Google Play ARM 64 v8a
- android-35 | ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: EAP AI-243.23654.117.2432.13021186 AI-243.23654.117.2432.13021186
Xcode:
version: 16.2/16C5032a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.10
path: /Users/alexischappron/.asdf/shims/javac
Ruby:
version: 2.7.6
path: /var/folders/12/_ffy101j76zccg89mklrbbdw0000gn/T/frum_35152_1747404153263/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.2
wanted: 0.79.2
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
Stacktrace or Logs
(NOBRIDGE) ERROR Warning: Invariant Violation: Transform with key of "translateX" must be number or a percentage. Passed value: {"translateX":100}.
This error is located at:
at RCTView (<anonymous>)
at View (http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=org.reactjs.native.example.example:52306:43)
at Animated(View) (http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=org.reactjs.native.example.example:61759:47)
at RCTView (<anonymous>)
at View (http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=org.reactjs.native.example.example:52306:43)
at MixedMultiTransform (http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=org.reactjs.native.example.example:98299:61)
at RCTView (<anonymous>)
at View (http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=org.reactjs.native.example.example:52306:43)
at App (<anonymous>)
at RCTView (<anonymous>)
at View (http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=org.reactjs.native.example.example:52306:43)
at RCTView (<anonymous>)
at View (http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=org.reactjs.native.example.example:52306:43)
at AppContainer (http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=org.reactjs.native.example.example:52196:25)
at example(RootComponent) (http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=org.reactjs.native.example.example:69229:28), js engine: hermes
MANDATORY Reproducer
https://github.com/ACHP/react-native-bug-transform-animated-repro
Screenshots and Videos
