Flush NativeAnimated batch via microtask instead of set/clearImmediate (#57209)

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<<061d668cf04041f4d3d2f48f11dc739f>>
+ * @generated SignedSource<<5f6861a5aa2d6024ad8d4c236652bf64>>
  */
 
 /**
@@ -27,7 +27,7 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun cdpInteractionMetricsEnabled(): Boolean = false
 
-  override fun cxxNativeAnimatedEnabled(): Boolean = false
+  override fun cxxNativeAnimatedEnabled(): Boolean = true
 
   override fun defaultTextToOverflowHidden(): Boolean = true
 

packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsDefaults.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<<8dfc52502bd539e5e43d547f895a6d33>>
+ * @generated SignedSource<<d0e19eae3c8e1f69383642a42172bb11>>
  */
 
 /**
@@ -36,7 +36,7 @@ class ReactNativeFeatureFlagsDefaults : public ReactNativeFeatureFlagsProvider {
   }
 
   bool cxxNativeAnimatedEnabled() override {
-    return false;
+    return true;
   }
 
   bool defaultTextToOverflowHidden() override {

packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js

@@ -72,7 +72,7 @@ const definitions: FeatureFlagDefinitions = {
       ossReleaseStage: 'none',
     },
     cxxNativeAnimatedEnabled: {
-      defaultValue: false,
+      defaultValue: true,
       metadata: {
         dateAdded: '2025-03-14',
         description:

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

@@ -23,6 +23,7 @@ import type {EventSubscription} from '../../../Libraries/vendor/emitter/EventEmi
 
 import NativeAnimatedNonTurboModule from '../../../Libraries/Animated/NativeAnimatedModule';
 import NativeAnimatedTurboModule from '../../../Libraries/Animated/NativeAnimatedTurboModule';
+import queueMicrotask from '../../../Libraries/Core/Timers/queueMicrotask';
 import NativeEventEmitter from '../../../Libraries/EventEmitter/NativeEventEmitter';
 import RCTDeviceEventEmitter from '../../../Libraries/EventEmitter/RCTDeviceEventEmitter';
 import Platform from '../../../Libraries/Utilities/Platform';
@@ -57,7 +58,6 @@ const isSingleOpBatching =
   Platform.OS === 'android' &&
   NativeAnimatedModule?.queueAndExecuteBatchedOperations != null &&
   ReactNativeFeatureFlags.animatedShouldUseSingleOp();
-let flushQueueImmediate = null;
 
 const eventListenerGetValueCallbacks: {
   [number]: (value: number) => void,
@@ -71,6 +71,20 @@ let globalEventEmitterAnimationFinishedListener: ?EventSubscription = null;
 const shouldSignalBatch: boolean =
   ReactNativeFeatureFlags.cxxNativeAnimatedEnabled();
 
+let flushQueueGeneration = 1;
+function scheduleQueueFlush(): void {
+  const generation = ++flushQueueGeneration;
+  queueMicrotask(() => {
+    if (generation !== flushQueueGeneration) {
+      return;
+    }
+    API.flushQueue();
+  });
+}
+function cancelQueueFlush(): void {
+  flushQueueGeneration++;
+}
+
 function createNativeOperations(): NonNullable<typeof NativeAnimatedModule> {
   const methodNames = [
     'createAnimatedNode', // 1
@@ -116,8 +130,7 @@ function createNativeOperations(): NonNullable<typeof NativeAnimatedModule> {
         // details, see `NativeAnimatedModule.queueAndExecuteBatchedOperations`.
         singleOpQueue.push(operationID, ...args);
         if (shouldSignalBatch) {
-          clearImmediate(flushQueueImmediate);
-          flushQueueImmediate = setImmediate(API.flushQueue);
+          scheduleQueueFlush();
         }
       };
     }
@@ -137,8 +150,7 @@ function createNativeOperations(): NonNullable<typeof NativeAnimatedModule> {
         } else if (shouldSignalBatch) {
           // $FlowExpectedError[incompatible-call] - Dynamism.
           queue.push(() => method(...args));
-          clearImmediate(flushQueueImmediate);
-          flushQueueImmediate = setImmediate(API.flushQueue);
+          scheduleQueueFlush();
         } else {
           // $FlowExpectedError[incompatible-call] - Dynamism.
           method(...args);
@@ -190,9 +202,7 @@ const API = {
     invariant(NativeAnimatedModule, 'Native animated module is not available');
 
     if (ReactNativeFeatureFlags.animatedShouldDebounceQueueFlush()) {
-      const prevImmediate = flushQueueImmediate;
-      clearImmediate(prevImmediate);
-      flushQueueImmediate = setImmediate(API.flushQueue);
+      scheduleQueueFlush();
     } else {
       API.flushQueue();
     }
@@ -218,7 +228,6 @@ const API = {
           NativeAnimatedModule,
           'Native animated module is not available',
         );
-        flushQueueImmediate = null;
 
         if (singleOpQueue.length === 0) {
           return;
@@ -239,7 +248,6 @@ const API = {
           NativeAnimatedModule,
           'Native animated module is not available',
         );
-        flushQueueImmediate = null;
 
         if (queue.length === 0) {
           return;
@@ -299,11 +307,10 @@ const API = {
 
     waitingForQueuedOperations.add(id);
     queueOperations = true;
-    if (
-      ReactNativeFeatureFlags.animatedShouldDebounceQueueFlush() &&
-      flushQueueImmediate
-    ) {
-      clearImmediate(flushQueueImmediate);
+    // Entering explicit queue mode: drop any flush already scheduled so ops
+    // accumulate until `disableQueue`.
+    if (ReactNativeFeatureFlags.animatedShouldDebounceQueueFlush()) {
+      cancelQueueFlush();
     }
   },
   startAnimatingNode: (isSingleOpBatching