make sure to only disable js sync & animate layout when disableFabricCommitInCXXAnimated==false (#53230)

Summary:
Pull Request resolved: #53230

## Changelog:

[Internal] [Changed] - make sure to only disable js sync & animate layout when disableFabricCommitInCXXAnimated==false

Reviewed By: sammy-SC

Differential Revision: D80002015

fbshipit-source-id: 5e6ee4b5908fe8d2ee52b77ca3b78164debc4d59

Author: zeyap

packages/react-native/Libraries/Animated/animations/Animation.js

@@ -150,12 +150,11 @@ export default class Animation {
           if (value != null) {
             animatedValue.__onAnimatedValueUpdateReceived(value, offset);
 
-            if (
-              !(
-                ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() &&
-                ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync()
-              )
-            ) {
+            const isJsSyncRemoved =
+              ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() &&
+              !ReactNativeFeatureFlags.disableFabricCommitInCXXAnimated() &&
+              ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync();
+            if (!isJsSyncRemoved) {
               if (this.__isLooping === true) {
                 return;
               }

packages/react-native/ReactCxxPlatform/react/renderer/animated/NativeAnimatedNodesManager.cpp

@@ -699,7 +699,10 @@ bool NativeAnimatedNodesManager::onAnimationFrame(double timestamp) {
 
     if (driver->getIsComplete()) {
       hasFinishedAnimations = true;
-      if (ReactNativeFeatureFlags::cxxNativeAnimatedRemoveJsSync()) {
+      const auto shouldRemoveJsSync =
+          ReactNativeFeatureFlags::cxxNativeAnimatedRemoveJsSync() &&
+          !ReactNativeFeatureFlags::disableFabricCommitInCXXAnimated();
+      if (shouldRemoveJsSync) {
         finishedAnimationValueNodes.insert(driver->getAnimatedValueTag());
       }
     }
@@ -810,15 +813,17 @@ void NativeAnimatedNodesManager::schedulePropsCommit(
     bool forceFabricCommit) noexcept {
   // When fabricCommitCallback_ & directManipulationCallback_ are both
   // available, we commit layout props via Fabric and the other using direct
-  // manipulation; if only one is available, we commit all props using that
+  // manipulation. If only fabricCommitCallback_ is available, we commit all
+  // props using that; if only directManipulationCallback_ is available, we
+  // commit all except for layout props.
   if (fabricCommitCallback_ != nullptr &&
       (layoutStyleUpdated || forceFabricCommit ||
        directManipulationCallback_ == nullptr)) {
     mergeObjects(updateViewProps_[viewTag], props);
 
     // Must call direct manipulation to set final values on components.
     mergeObjects(updateViewPropsDirect_[viewTag], props);
-  } else if (directManipulationCallback_ != nullptr) {
+  } else if (!layoutStyleUpdated && directManipulationCallback_ != nullptr) {
     mergeObjects(updateViewPropsDirect_[viewTag], props);
     {
       std::lock_guard<std::mutex> lock(unsyncedDirectViewPropsMutex_);

packages/react-native/src/private/animated/createAnimatedPropsHook.js

@@ -125,13 +125,11 @@ 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 &&
-              !(
-                ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() &&
-                ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync()
-              )
-            ) {
+            const shouldRemoveJsSync =
+              ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() &&
+              !ReactNativeFeatureFlags.disableFabricCommitInCXXAnimated() &&
+              ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync();
+            if (isFabricNode && !shouldRemoveJsSync) {
               // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
               // Must not be called in Paper.
               scheduleUpdate();