allow calling createAnimatedNode without batching (#53476)

Summary:
Pull Request resolved: #53476

## Changelog:

[General] [Added] - allow calling createAnimatedNode without batching

Enable setting `nativeCreateUnbatched` config on an AnimatedNode, when it's true, the call to Animated nativeModule's createAnimatedNode will skip signal batching (will call over JSI before React rendering is finished) and batching in c++, and the creation will be executed at next UI thread render.

This will only make AnimatedNodes creation happen early, but node/view connections, node deletion or event drivers will still be batched like before

Reviewed By: yungsters

Differential Revision: D80968512

fbshipit-source-id: afb607410a174fb85107ef270b9d6f3d61617daf

Author: zeyap

packages/react-native/Libraries/Animated/nodes/AnimatedNode.js

@@ -17,6 +17,7 @@ type ValueListenerCallback = (state: {value: number, ...}) => mixed;
 
 export type AnimatedNodeConfig = $ReadOnly<{
   debugID?: string,
+  unstable_disableBatchingForNativeCreate?: boolean,
 }>;
 
 let _uniqueId = 1;
@@ -42,6 +43,8 @@ export default class AnimatedNode {
     if (__DEV__) {
       this.__debugID = config?.debugID;
     }
+    this.__disableBatchingForNativeCreate =
+      config?.unstable_disableBatchingForNativeCreate;
   }
 
   __attach(): void {}
@@ -65,6 +68,7 @@ export default class AnimatedNode {
   /* Methods and props used by native Animated impl */
   __isNative: boolean = false;
   __nativeTag: ?number = undefined;
+  __disableBatchingForNativeCreate: ?boolean = undefined;
 
   __makeNative(platformConfig: ?PlatformConfig): void {
     // Subclasses are expected to set `__isNative` to true before this.
@@ -142,6 +146,9 @@ export default class AnimatedNode {
       if (this._platformConfig) {
         config.platformConfig = this._platformConfig;
       }
+      if (this.__disableBatchingForNativeCreate) {
+        config.disableBatchingForNativeCreate = true;
+      }
       NativeAnimatedHelper.API.createAnimatedNode(nativeTag, config);
     }
     return nativeTag;

packages/react-native/ReactCommon/react/renderer/animated/AnimatedModule.cpp

@@ -48,8 +48,15 @@ void AnimatedModule::createAnimatedNode(
     Tag tag,
     jsi::Object config) {
   auto configDynamic = dynamicFromValue(rt, jsi::Value(rt, config));
-  operations_.emplace_back(
-      CreateAnimatedNodeOp{.tag = tag, .config = std::move(configDynamic)});
+  if (auto it = configDynamic.find("disableBatchingForNativeCreate");
+      it != configDynamic.items().end() && it->second == true) {
+    if (nodesManager_) {
+      nodesManager_->createAnimatedNode(tag, configDynamic);
+    }
+  } else {
+    operations_.emplace_back(
+        CreateAnimatedNodeOp{.tag = tag, .config = std::move(configDynamic)});
+  }
 }
 
 void AnimatedModule::updateAnimatedNodeConfig(

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

@@ -241,7 +241,11 @@ const API = {
       }) as () => void,
 
   createAnimatedNode(tag: number, config: AnimatedNodeConfig): void {
-    NativeOperations.createAnimatedNode(tag, config);
+    if (config.disableBatchingForNativeCreate) {
+      NativeAnimatedModule?.createAnimatedNode(tag, config);
+    } else {
+      NativeOperations.createAnimatedNode(tag, config);
+    }
   },
 
   updateAnimatedNodeConfig(tag: number, config: AnimatedNodeConfig): void {