Animation is 20x slower in New Architecture.

[bglgwyng]

Description

Animation is 20x slower in New Architecture. Watch the video below.

Steps to reproduce

Run the app in both branches and compare.
https://github.com/bglgwyng/animation-performance-comparison-rn-79/tree/new-architecture
https://github.com/bglgwyng/animation-performance-comparison-rn-79/tree/old-architecture

React Native Version

0.79.0

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info

info Fetching system and libraries information...
System:
  OS: macOS 15.4
  CPU: (10) arm64 Apple M1 Pro
  Memory: 2.21 GB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.14.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2025.03.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/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: 2024.3 AI-243.22562.218.2431.13114758
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /opt/homebrew/opt/openjdk@17/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.0
    wanted: 0.79.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

.

Reproducer

https://github.com/bglgwyng/animation-performance-comparison-rn-79

Screenshots and Videos

New Architecture

ScreenRecording_04-15-2025.11-20-58_1.MP4

Old Architecture

ScreenRecording_04-15-2025.11-18-01_1.MP4

[cipolleschi]

Thank for the issue @bglgwyng. A couple of questions to understand better:

• Have you tried also building in Release mode? If yes, how are performance?
• The reproducer uses Expo, have you also tried with an app from the template

[cipolleschi]

I tried to build the New Arch for release and it is better, but not the same.

Old Arch	New Arch - Release	New Arch -Debug
OldArch-Debug-Animation.mp4	NewArch-Release-Animation.mp4	NewArch-Debug-Animation.mp4

[bglgwyng]

The same result here.

New Architecture

ScreenRecording_04-15-2025.19-03-03_1.MP4

Old Architecture

ScreenRecording_04-15-2025.18-58-17_1.MP4

Old architecture is still a bit smoother in release mode.

[adnan-foxit]

@cipolleschi but old arch is till too fast in debug as compared to new arch release

[bglgwyng]

@cipolleschi

The reproducer uses Expo, have you also tried with an app from the template

I scaffolded this repo with create-expo-app. What you said template means the bare react-native template?

[cipolleschi]

@bglgwyng yes, i mean the bare rect native app that is created with
npx @react-native-community/cli init App --version latest

I asked around internally. The reason of the slowness is because these are all animation driven by JS instead of using the Native Driver.

We want to deprecate JS driven animation in favor of native driven animation in the future, as the native driven animation are more performant. We can't do it just now because native driven animation does not support animating layout property just yet, but we are working on implementing the missing feature.
Have you tried setting nativeDriver: true (reference: https://reactnative.dev/docs/next/animated#using-the-native-driver)?

[bglgwyng]

Thanks for you reply!

nativeDriver: true means that I should layoug elements only with transforms attribute. I tried it but code got dirtier and scaling(instead of setting width, height) makes elemens pixelated.

Also, as nativeDriver: fase is known to be slower, I think your answer does not explain why it's much slower in New Architecture compared to Old Architecture.