Gate logic to remove js sync at end of native animation loop

packages/react-native/Libraries/Animated/__tests__/Animated-itest.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
+ * @fantom_flags cxxNativeAnimatedRemoveJsSync:*
  * @flow strict-local
  * @format
  */
@@ -16,6 +17,7 @@ import ensureInstance from '../../../src/private/__tests__/utilities/ensureInsta
 import * as Fantom from '@react-native/fantom';
 import {createRef} from 'react';
 import {Animated, View, useAnimatedValue} from 'react-native';
+import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
 import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
 
 test('moving box by 100 points', () => {
@@ -73,11 +75,15 @@ test('moving box by 100 points', () => {
   Fantom.unstable_produceFramesForDuration(500);
 
   // Animation is completed now. C++ Animated will commit the final position to the shadow tree.
-  expect(viewElement.getBoundingClientRect().x).toBe(100);
+  if (ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync()) {
+    expect(viewElement.getBoundingClientRect().x).toBe(100);
+    // TODO(T223344928): this shouldn't be neccessary
+    Fantom.runWorkLoop();
+  } else {
+    expect(viewElement.getBoundingClientRect().x).toBe(0);
+    Fantom.runWorkLoop(); // Animated still schedules a React state update for synchronisation to shadow tree
+  }
 
-  // TODO: this shouldn't be needed but C++ Animated still schedules a React state update
-  // for synchronisation, even though it doesn't need to.
-  Fantom.runWorkLoop();
   expect(viewElement.getBoundingClientRect().x).toBe(100);
 });
 
@@ -189,7 +195,7 @@ test('animated opacity', () => {
     0,
   );
 
-  // TODO: this shouldn't be neccessary but C++ Animated still schedules a React state update.
+  // TODO(T223344928): this shouldn't be neccessary with cxxNativeAnimatedRemoveJsSync:true
   Fantom.runWorkLoop();
 
   expect(root.getRenderedOutput({props: ['opacity']}).toJSX()).toEqual(
@@ -263,12 +269,18 @@ test('moving box by 50 points with offset 10', () => {
       .translateX,
   ).toBeCloseTo(60, 0.001);
 
-  expect(root.getRenderedOutput({props: ['transform']}).toJSX()).toEqual(
-    <rn-view transform='[{"translateX": 60.000000}]' />,
-  );
-
-  // TODO: this shouldn't be neccessary but C++ Animated still schedules a React state update.
-  Fantom.runWorkLoop();
+  if (ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync()) {
+    expect(root.getRenderedOutput({props: ['transform']}).toJSX()).toEqual(
+      <rn-view transform='[{"translateX": 60.000000}]' />,
+    );
+    // TODO(T223344928): this shouldn't be neccessary
+    Fantom.runWorkLoop();
+  } else {
+    expect(root.getRenderedOutput({props: ['transform']}).toJSX()).toEqual(
+      <rn-view transform="[]" />,
+    );
+    Fantom.runWorkLoop(); // Animated still schedules a React state update for synchronisation to shadow tree
+  }
 
   expect(root.getRenderedOutput({props: ['transform']}).toJSX()).toEqual(
     <rn-view transform='[{"translateX": 60.000000}]' />, // // must include offset.
@@ -361,7 +373,7 @@ describe('Value.flattenOffset', () => {
 
     expect(transform.translateY).toBeCloseTo(40, 0.001);
 
-    // TODO: this shouldn't be neccessary.
+    // TODO(T223344928): this shouldn't be neccessary with cxxNativeAnimatedRemoveJsSync:true
     Fantom.runWorkLoop();
   });
 });
@@ -460,7 +472,7 @@ describe('Value.extractOffset', () => {
     // Previously we set offset to 35. The final value is 35.
     expect(transform.translateY).toBeCloseTo(35, 0.001);
 
-    // TODO: this shouldn't be neccessary.
+    // TODO(T223344928): this shouldn't be neccessary with cxxNativeAnimatedRemoveJsSync:true
     Fantom.runWorkLoop();
   });
 });

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,15 @@ export default class Animation {
           if (value != null) {
             animatedValue.__onAnimatedValueUpdateReceived(value, offset);
 
-            if (this.__isLooping === true) {
-              return;
+            if (
+              !(
+                ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() &&
+                ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync()
+              )
+            ) {
+              if (this.__isLooping === true) {
+                return;
+              }
             }
 
             // Once the JS side node is synced with the updated values, trigger an

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlags.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<4c40e490481c50d2f19830366f50aad5>>
+ * @generated SignedSource<<d8013c4b4ec45f241908e7f8f23f7dd1>>
  */
 
 /**
@@ -48,6 +48,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun cxxNativeAnimatedEnabled(): Boolean = accessor.cxxNativeAnimatedEnabled()
 
+  /**
+   * Removes JS sync at end of native animation
+   */
+  @JvmStatic
+  public fun cxxNativeAnimatedRemoveJsSync(): Boolean = accessor.cxxNativeAnimatedRemoveJsSync()
+
   /**
    * Disable sync dispatch on the main queue on iOS
    */

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<8cb9eb082005be480c39272ffc7dde03>>
+ * @generated SignedSource<<15b001b69d9ea8bedbce2ce0f70bfa8e>>
  */
 
 /**
@@ -23,6 +23,7 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
   private var commonTestFlagCache: Boolean? = null
   private var animatedShouldSignalBatchCache: Boolean? = null
   private var cxxNativeAnimatedEnabledCache: Boolean? = null
+  private var cxxNativeAnimatedRemoveJsSyncCache: Boolean? = null
   private var disableMainQueueSyncDispatchIOSCache: Boolean? = null
   private var disableMountItemReorderingAndroidCache: Boolean? = null
   private var disableTextLayoutManagerCacheAndroidCache: Boolean? = null
@@ -100,6 +101,15 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun cxxNativeAnimatedRemoveJsSync(): Boolean {
+    var cached = cxxNativeAnimatedRemoveJsSyncCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.cxxNativeAnimatedRemoveJsSync()
+      cxxNativeAnimatedRemoveJsSyncCache = cached
+    }
+    return cached
+  }
+
   override fun disableMainQueueSyncDispatchIOS(): Boolean {
     var cached = disableMainQueueSyncDispatchIOSCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxInterop.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<b6ddd7c2e829c427e7d6b07bc588cd8c>>
+ * @generated SignedSource<<dc8ac9241675deb1324d8ff0572f2fad>>
  */
 
 /**
@@ -34,6 +34,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun cxxNativeAnimatedEnabled(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun cxxNativeAnimatedRemoveJsSync(): Boolean
+
   @DoNotStrip @JvmStatic public external fun disableMainQueueSyncDispatchIOS(): Boolean
 
   @DoNotStrip @JvmStatic public external fun disableMountItemReorderingAndroid(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsDefaults.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<76edde93369be682e837189f82871dfe>>
+ * @generated SignedSource<<56835f26710665a11a05879a0c90e577>>
  */
 
 /**
@@ -29,6 +29,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun cxxNativeAnimatedEnabled(): Boolean = false
 
+  override fun cxxNativeAnimatedRemoveJsSync(): Boolean = false
+
   override fun disableMainQueueSyncDispatchIOS(): Boolean = false
 
   override fun disableMountItemReorderingAndroid(): Boolean = false

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsLocalAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<e718763435de15f788b1f510e4799a67>>
+ * @generated SignedSource<<a6444cccfff813fe0e96c20855496560>>
  */
 
 /**
@@ -27,6 +27,7 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
   private var commonTestFlagCache: Boolean? = null
   private var animatedShouldSignalBatchCache: Boolean? = null
   private var cxxNativeAnimatedEnabledCache: Boolean? = null
+  private var cxxNativeAnimatedRemoveJsSyncCache: Boolean? = null
   private var disableMainQueueSyncDispatchIOSCache: Boolean? = null
   private var disableMountItemReorderingAndroidCache: Boolean? = null
   private var disableTextLayoutManagerCacheAndroidCache: Boolean? = null
@@ -107,6 +108,16 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
     return cached
   }
 
+  override fun cxxNativeAnimatedRemoveJsSync(): Boolean {
+    var cached = cxxNativeAnimatedRemoveJsSyncCache
+    if (cached == null) {
+      cached = currentProvider.cxxNativeAnimatedRemoveJsSync()
+      accessedFeatureFlags.add("cxxNativeAnimatedRemoveJsSync")
+      cxxNativeAnimatedRemoveJsSyncCache = cached
+    }
+    return cached
+  }
+
   override fun disableMainQueueSyncDispatchIOS(): Boolean {
     var cached = disableMainQueueSyncDispatchIOSCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsProvider.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<892db232156970e8241d1f1ddde3a745>>
+ * @generated SignedSource<<e671a1bb72c4b5afcd6f364f05666e89>>
  */
 
 /**
@@ -29,6 +29,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun cxxNativeAnimatedEnabled(): Boolean
 
+  @DoNotStrip public fun cxxNativeAnimatedRemoveJsSync(): Boolean
+
   @DoNotStrip public fun disableMainQueueSyncDispatchIOS(): Boolean
 
   @DoNotStrip public fun disableMountItemReorderingAndroid(): Boolean

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<bb0b241f561c9c443d6453fa259d0a5d>>
+ * @generated SignedSource<<b9aef65ab7a1dffc1646519619dedc58>>
  */
 
 /**
@@ -57,6 +57,12 @@ class ReactNativeFeatureFlagsJavaProvider
     return method(javaProvider_);
   }
 
+  bool cxxNativeAnimatedRemoveJsSync() override {
+    static const auto method =
+        getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("cxxNativeAnimatedRemoveJsSync");
+    return method(javaProvider_);
+  }
+
   bool disableMainQueueSyncDispatchIOS() override {
     static const auto method =
         getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("disableMainQueueSyncDispatchIOS");
@@ -370,6 +376,11 @@ bool JReactNativeFeatureFlagsCxxInterop::cxxNativeAnimatedEnabled(
   return ReactNativeFeatureFlags::cxxNativeAnimatedEnabled();
 }
 
+bool JReactNativeFeatureFlagsCxxInterop::cxxNativeAnimatedRemoveJsSync(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
+  return ReactNativeFeatureFlags::cxxNativeAnimatedRemoveJsSync();
+}
+
 bool JReactNativeFeatureFlagsCxxInterop::disableMainQueueSyncDispatchIOS(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
   return ReactNativeFeatureFlags::disableMainQueueSyncDispatchIOS();
@@ -655,6 +666,9 @@ void JReactNativeFeatureFlagsCxxInterop::registerNatives() {
       makeNativeMethod(
         "cxxNativeAnimatedEnabled",
         JReactNativeFeatureFlagsCxxInterop::cxxNativeAnimatedEnabled),
+      makeNativeMethod(
+        "cxxNativeAnimatedRemoveJsSync",
+        JReactNativeFeatureFlagsCxxInterop::cxxNativeAnimatedRemoveJsSync),
       makeNativeMethod(
         "disableMainQueueSyncDispatchIOS",
         JReactNativeFeatureFlagsCxxInterop::disableMainQueueSyncDispatchIOS),

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.h

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<04986fa84ec60aa0816ee79ab68e56aa>>
+ * @generated SignedSource<<f2c3bfb76a9efd7d5bc6c01ab1cccb2c>>
  */
 
 /**
@@ -39,6 +39,9 @@ class JReactNativeFeatureFlagsCxxInterop
   static bool cxxNativeAnimatedEnabled(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 
+  static bool cxxNativeAnimatedRemoveJsSync(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
+
   static bool disableMainQueueSyncDispatchIOS(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 

packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<96d8201a39879e04c384303d1087a0b0>>
+ * @generated SignedSource<<f0d437a484030567e820239e1b854a51>>
  */
 
 /**
@@ -38,6 +38,10 @@ bool ReactNativeFeatureFlags::cxxNativeAnimatedEnabled() {
   return getAccessor().cxxNativeAnimatedEnabled();
 }
 
+bool ReactNativeFeatureFlags::cxxNativeAnimatedRemoveJsSync() {
+  return getAccessor().cxxNativeAnimatedRemoveJsSync();
+}
+
 bool ReactNativeFeatureFlags::disableMainQueueSyncDispatchIOS() {
   return getAccessor().disableMainQueueSyncDispatchIOS();
 }

packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.h

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<25b3585f3648fe156fab4a5abbf32e60>>
+ * @generated SignedSource<<8112c62255be23bde3fc558953dc8b67>>
  */
 
 /**
@@ -54,6 +54,11 @@ class ReactNativeFeatureFlags {
    */
   RN_EXPORT static bool cxxNativeAnimatedEnabled();
 
+  /**
+   * Removes JS sync at end of native animation
+   */
+  RN_EXPORT static bool cxxNativeAnimatedRemoveJsSync();
+
   /**
    * Disable sync dispatch on the main queue on iOS
    */