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.

[cipolleschi]

I believe, but @sammy-SC can confirm that, that the New Architecture is slower because we have to hop through multiple layers to run the animation.

In the Old Architecture, JS was talking directly with the Platform layer (iOS and Android) modifying the Platform tree of views directly: as soon as the React tree was changing, the Platform tree was updated.

In the New Architecture, we have multiple trees:

• The React tree
• The C++ shadow node tree
• The platform tree

With JS driven animation, we update the React tree, the React tree updates the Shadow tree in C++ and the Shadow tree communicates the changes to the Platform tree. We have an extra step and more overhead, overall.

With native driver, we are skipping the update to the shadow node. This allows for faster animations, but the Shadows node and the platform tree might end up out-of-sync

[bglgwyng]

@cipolleschi I felt reanimated animations are also slower in the New Architecture, but they need to be inspected more accurately. Is your explanation also applicable to the case of reanimated?