From 2d7342f8b4e3adf948d4c2bb29d9253bb34d63f3 Mon Sep 17 00:00:00 2001
From: Zeya Peng <zeyap@meta.com>
Date: Wed, 14 May 2025 11:31:11 -0700
Subject: [PATCH] Remove native animation fabric sync in JS and infinite
 animation loop workaround (#51264)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51264

## Changelog:

[General] [Changed] - Remove native animation fabric sync in JS and infinite animation loop workaround, when cxxNativeAnimated is enabled

when cxxNativeAnimated is enabled, we'll sync native animation props back to Fabric in native, when that happens we can remove the code in JS for same purpose

Reviewed By: lenaic

Differential Revision: D74198568

fbshipit-source-id: 5b313a5e8c07058f939134e9a6d60dcfa3b45842
---
 .../Libraries/Animated/animations/Animation.js             | 7 +++++--
 .../src/private/animated/createAnimatedPropsHook.js        | 5 ++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/react-native/Libraries/Animated/animations/Animation.js b/packages/react-native/Libraries/Animated/animations/Animation.js
index 6587e9189fd..35f43245bf8 100644
--- a/packages/react-native/Libraries/Animated/animations/Animation.js
+++ b/packages/react-native/Libraries/Animated/animations/Animation.js
@@ -13,6 +13,7 @@ import type AnimatedNode from '../nodes/AnimatedNode';
 import type AnimatedValue from '../nodes/AnimatedValue';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import AnimatedProps from '../nodes/AnimatedProps';
 
 export type EndResult = {
@@ -149,8 +150,10 @@ export default class Animation {
           if (value != null) {
             animatedValue.__onAnimatedValueUpdateReceived(value, offset);
 
-            if (this.__isLooping === true) {
-              return;
+            if (!ReactNativeFeatureFlags.cxxNativeAnimatedEnabled()) {
+              if (this.__isLooping === true) {
+                return;
+              }
             }
 
             // Once the JS side node is synced with the updated values, trigger an
diff --git a/packages/react-native/src/private/animated/createAnimatedPropsHook.js b/packages/react-native/src/private/animated/createAnimatedPropsHook.js
index 3bad752daf5..222d5a0a6d5 100644
--- a/packages/react-native/src/private/animated/createAnimatedPropsHook.js
+++ b/packages/react-native/src/private/animated/createAnimatedPropsHook.js
@@ -128,7 +128,10 @@ export default function createAnimatedPropsHook(
           if (node.__isNative) {
             // Check 2: this is an animation driven by native.
             // In native driven animations, this callback is only called once the animation completes.
-            if (isFabricNode) {
+            if (
+              isFabricNode &&
+              !ReactNativeFeatureFlags.cxxNativeAnimatedEnabled()
+            ) {
               // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
               // Must not be called in Paper.
               scheduleUpdate();