@react-native-ohos/react-native-reanimated 4.0.2 → 4.1.0-beta.1

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.h

@@ -1,55 +1,72 @@
 #pragma once
 
+#include <ReactCommon/CallInvoker.h>
+#include <cxxreact/ReactNativeVersion.h>
+#include <react/renderer/componentregistry/componentNameByReactViewName.h>
+#include <react/renderer/core/ShadowNode.h>
+#include <react/renderer/uimanager/UIManager.h>
 #include <reanimated/AnimatedSensor/AnimatedSensorModule.h>
 #include <reanimated/CSS/core/CSSAnimation.h>
-#include <reanimated/CSS/core/CSSTransition.h>
+#include <reanimated/CSS/core/transition/CSSTransition.h>
 #include <reanimated/CSS/misc/ViewStylesRepository.h>
 #include <reanimated/CSS/registries/CSSAnimationsRegistry.h>
 #include <reanimated/CSS/registries/CSSKeyframesRegistry.h>
 #include <reanimated/CSS/registries/CSSTransitionsRegistry.h>
 #include <reanimated/CSS/registries/StaticPropsRegistry.h>
+#include <reanimated/Compat/WorkletsApi.h>
+#include <reanimated/Events/UIEventHandlerRegistry.h>
 #include <reanimated/Fabric/ReanimatedCommitHook.h>
 #include <reanimated/Fabric/ReanimatedCommitShadowNode.h>
 #include <reanimated/Fabric/ReanimatedMountHook.h>
 #include <reanimated/Fabric/ShadowTreeCloner.h>
 #include <reanimated/Fabric/updates/AnimatedPropsRegistry.h>
+#include <reanimated/Fabric/updates/OperationsLoop.h>
 #include <reanimated/Fabric/updates/UpdatesRegistryManager.h>
 #include <reanimated/LayoutAnimations/LayoutAnimationsManager.h>
 #include <reanimated/LayoutAnimations/LayoutAnimationsProxyCommon.h>
 #include <reanimated/NativeModules/PropValueProcessor.h>
-#include <reanimated/NativeModules/ReanimatedModuleProxySpec.h>
+#include <reanimated/PseudoStyles/PseudoStylesRegistry.h>
 #include <reanimated/Tools/PlatformDepMethodsHolder.h>
+#include <reanimated/Tools/SingleInstanceChecker.h>
 
-#include <worklets/NativeModules/WorkletsModuleProxy.h>
-#include <worklets/Registries/EventHandlerRegistry.h>
-#include <worklets/Tools/JSScheduler.h>
-#include <worklets/Tools/SingleInstanceChecker.h>
-#include <worklets/Tools/UIScheduler.h>
-
-#include <react/renderer/componentregistry/componentNameByReactViewName.h>
-#include <react/renderer/core/ShadowNode.h>
-#include <react/renderer/uimanager/UIManager.h>
+#if REACT_NATIVE_VERSION_MINOR >= 85
+#include <react/renderer/animationbackend/AnimationBackend.h>
+#include <react/renderer/uimanager/UIManagerAnimationBackend.h>
+#endif
 
+#include <atomic>
+#include <cstdint>
+#include <functional>
 #include <memory>
+#include <mutex>
 #include <set>
 #include <string>
-#include <unordered_map>
-#include <unordered_set>
 #include <utility>
 #include <vector>
 
 namespace reanimated {
 
 using namespace facebook;
+using namespace facebook::react;
 using namespace css;
 
-using UpdatesBatch = std::vector<std::pair<std::shared_ptr<const ShadowNode>, folly::dynamic>>;
+enum class GrandCallbackSource : std::uint8_t {
+  // Used when a new vsync signal is triggered
+  AnimationLoop,
 
-class ReanimatedModuleProxy : public ReanimatedModuleProxySpec,
-                              public std::enable_shared_from_this<ReanimatedModuleProxy> {
+  // Used when handling an event (excluding the draw pass)
+  Event,
+
+  // Used when handling an event originating from the Android draw pass,
+  // the info is used to avoid performing Tree Hierarchy updates when this could break the app
+  EventInAndroidDraw,
+};
+
+class ReanimatedModuleProxy : public std::enable_shared_from_this<ReanimatedModuleProxy> {
  public:
   ReanimatedModuleProxy(
-      const std::shared_ptr<WorkletsModuleProxy> &workletsModuleProxy,
+      const std::shared_ptr<worklets::WorkletRuntime> &uiRuntime,
+      const std::shared_ptr<worklets::UIScheduler> &uiScheduler,
       jsi::Runtime &rnRuntime,
       const std::shared_ptr<CallInvoker> &jsCallInvoker,
       const PlatformDepMethodsHolder &platformDepMethodsHolder,
@@ -60,73 +77,77 @@ class ReanimatedModuleProxy : public ReanimatedModuleProxySpec,
   // is fully constructed.
   void init(const PlatformDepMethodsHolder &platformDepMethodsHolder);
 
-  ~ReanimatedModuleProxy() override;
+  ~ReanimatedModuleProxy();
+
+  [[nodiscard]]
+  jsi::Object toOptimizedObject(jsi::Runtime &rt);
 
-  void invalidate();
-  
   jsi::Value registerEventHandler(
       jsi::Runtime &rt,
       const jsi::Value &worklet,
       const jsi::Value &eventName,
-      const jsi::Value &emitterReactTag) override;
-  void unregisterEventHandler(jsi::Runtime &rt, const jsi::Value &registrationId) override;
+      const jsi::Value &emitterReactTag);
+  void unregisterEventHandler(jsi::Runtime &rt, const jsi::Value &registrationId);
 
   jsi::Value getViewProp(
       jsi::Runtime &rt,
       const jsi::Value &shadowNodeWrapper,
       const jsi::Value &propName,
-      const jsi::Value &callback) override;
+      const jsi::Value &callback);
 
-  jsi::Value getStaticFeatureFlag(jsi::Runtime &rt, const jsi::Value &name) override;
-  jsi::Value setDynamicFeatureFlag(jsi::Runtime &rt, const jsi::Value &name, const jsi::Value &value) override;
+  jsi::Value getStaticFeatureFlag(jsi::Runtime &rt, const jsi::Value &name);
+  jsi::Value setDynamicFeatureFlag(jsi::Runtime &rt, const jsi::Value &name, const jsi::Value &value);
 
-  jsi::Value configureLayoutAnimationBatch(jsi::Runtime &rt, const jsi::Value &layoutAnimationsBatch) override;
-  void setShouldAnimateExiting(jsi::Runtime &rt, const jsi::Value &viewTag, const jsi::Value &shouldAnimate) override;
-
-  void onRender(double timestampMs);
+  jsi::Value configureLayoutAnimationBatch(jsi::Runtime &rt, const jsi::Value &layoutAnimationsBatch);
+  void setShouldAnimateExiting(jsi::Runtime &rt, const jsi::Value &viewTag, const jsi::Value &shouldAnimate);
 
   bool isAnyHandlerWaitingForEvent(const std::string &eventName, const int emitterReactTag);
 
-  void maybeRequestRender();
-
   bool
   handleEvent(const std::string &eventName, const int emitterReactTag, const jsi::Value &payload, double currentTime);
 
-  inline std::shared_ptr<JSLogger> getJSLogger() const {
-    return jsLogger_;
-  }
-
   bool handleRawEvent(const RawEvent &rawEvent, double currentTime);
 
-  void maybeRunCSSLoop();
-  double getCssTimestamp();
+  void performOperations();
+  void performNonLayoutOperations();
+  void executeLayoutAnimationsRequests();
 
-  void performOperations(const bool isTriggeredByEvent);
+  bool handleEventAndFlush(
+      const std::string &eventName,
+      int emitterReactTag,
+      const jsi::Value &payload,
+      GrandCallbackSource source);
 
-  void setViewStyle(jsi::Runtime &rt, const jsi::Value &viewTag, const jsi::Value &viewStyle) override;
+  void startBackendIfNeeded();
+  void stopBackendIfIdle(bool producedMutations);
 
-  void markNodeAsRemovable(jsi::Runtime &rt, const jsi::Value &shadowNodeWrapper) override;
-  void unmarkNodeAsRemovable(jsi::Runtime &rt, const jsi::Value &viewTag) override;
+  void setViewStyle(jsi::Runtime &rt, const jsi::Value &viewTag, const jsi::Value &viewStyle);
+
+  void markNodeAsRemovable(jsi::Runtime &rt, const jsi::Value &shadowNodeWrapper);
+  void unmarkNodeAsRemovable(jsi::Runtime &rt, const jsi::Value &viewTag);
 
   void registerCSSKeyframes(
       jsi::Runtime &rt,
       const jsi::Value &animationName,
-      const jsi::Value &viewName,
-      const jsi::Value &keyframesConfig) override;
-  void unregisterCSSKeyframes(jsi::Runtime &rt, const jsi::Value &animationName, const jsi::Value &viewName) override;
+      const jsi::Value &compoundComponentName,
+      const jsi::Value &keyframesConfig);
+  void
+  unregisterCSSKeyframes(jsi::Runtime &rt, const jsi::Value &animationName, const jsi::Value &compoundComponentName);
 
-  void applyCSSAnimations(jsi::Runtime &rt, const jsi::Value &shadowNodeWrapper, const jsi::Value &animationUpdates)
-      override;
-  void unregisterCSSAnimations(const jsi::Value &viewTag) override;
+  void applyCSSAnimations(
+      jsi::Runtime &rt,
+      const jsi::Value &shadowNodeWrapper,
+      const jsi::Value &compoundComponentName,
+      const jsi::Value &animationUpdates);
+  void unregisterCSSAnimations(const jsi::Value &viewTag);
 
-  void registerCSSTransition(jsi::Runtime &rt, const jsi::Value &shadowNodeWrapper, const jsi::Value &transitionConfig)
-      override;
-  void updateCSSTransition(jsi::Runtime &rt, const jsi::Value &viewTag, const jsi::Value &configUpdates) override;
-  void unregisterCSSTransition(jsi::Runtime &rt, const jsi::Value &viewTag) override;
+  void runCSSTransition(jsi::Runtime &rt, const jsi::Value &shadowNodeWrapper, const jsi::Value &transitionConfig);
+  void unregisterCSSTransition(jsi::Runtime &rt, const jsi::Value &viewTag);
 
-  jsi::Value getSettledUpdates(jsi::Runtime &rt) override;
+  void registerPseudoStyles(jsi::Runtime &rt, const jsi::Value &shadowNodeWrapper, const jsi::Value &config);
+  void unregisterPseudoStyles(jsi::Runtime &rt, const jsi::Value &viewTag);
 
-  void cssLoopCallback(const double /*timestampMs*/);
+  jsi::Value getSettledUpdates(jsi::Runtime &rt);
 
   void dispatchCommand(
       jsi::Runtime &rt,
@@ -152,8 +173,8 @@ class ReanimatedModuleProxy : public ReanimatedModuleProxySpec,
       const jsi::Value &sensorType,
       const jsi::Value &interval,
       const jsi::Value &iosReferenceFrame,
-      const jsi::Value &sensorDataContainer) override;
-  void unregisterSensor(jsi::Runtime &rt, const jsi::Value &sensorId) override;
+      const jsi::Value &sensorDataContainer);
+  void unregisterSensor(jsi::Runtime &rt, const jsi::Value &sensorId);
 
   void cleanupSensors();
 
@@ -161,8 +182,10 @@ class ReanimatedModuleProxy : public ReanimatedModuleProxySpec,
       jsi::Runtime &rt,
       const jsi::Value &keyboardEventContainer,
       const jsi::Value &isStatusBarTranslucent,
-      const jsi::Value &isNavigationBarTranslucent) override;
-  void unsubscribeFromKeyboardEvents(jsi::Runtime &rt, const jsi::Value &listenerId) override;
+      const jsi::Value &isNavigationBarTranslucent);
+  void unsubscribeFromKeyboardEvents(jsi::Runtime &rt, const jsi::Value &listenerId);
+
+  void toggleSlowAnimationsOnUIRuntime() const;
 
   inline LayoutAnimationsManager &layoutAnimationsManager() {
     return *layoutAnimationsManager_;
@@ -172,58 +195,82 @@ class ReanimatedModuleProxy : public ReanimatedModuleProxySpec,
     return isReducedMotion_;
   }
 
-  [[nodiscard]] inline std::shared_ptr<WorkletsModuleProxy> getWorkletsModuleProxy() const {
-    return workletsModuleProxy_;
-  }
-
   void requestFlushRegistry();
   std::function<std::string()> createRegistriesLeakCheck();
 
- private:
   void commitUpdates(jsi::Runtime &rt, const UpdatesBatch &updatesBatch);
+  void applySynchronousUpdates(UpdatesBatch &updatesBatch, bool allowPartialUpdates);
+
+#if REACT_NATIVE_VERSION_MINOR >= 85
+  std::shared_ptr<UIManagerAnimationBackend> getAnimationBackend();
+  AnimationMutations runGrandCallback(AnimationTimestamp timestamp, GrandCallbackSource source);
+  void executeOperationsLoop(AnimationTimestamp timestamp);
+  void executeWorkletsForFrame(AnimationTimestamp timestamp);
+  AnimationMutations executeOperationsAndCollectUpdates(AnimationTimestamp timestamp);
+  AnimationMutations collectEventUpdates();
+  AnimationMutations collectNonLayoutAnimationUpdates();
+  AnimationMutations mutationsFromAnimatedPropsBatch(UpdatesBatchAnimatedProps &&animatedPropsBatch);
+#endif
 
   const bool isReducedMotion_;
-  bool shouldFlushRegistry_ = false;
-  std::shared_ptr<WorkletsModuleProxy> workletsModuleProxy_;
+  std::atomic<bool> shouldFlushRegistry_{false};
+  std::shared_ptr<worklets::WorkletRuntime> uiRuntime_;
+  std::shared_ptr<worklets::UIScheduler> uiScheduler_;
+  std::shared_ptr<CallInvoker> jsInvoker_;
+
+  std::unique_ptr<UIEventHandlerRegistry> eventHandlerRegistry_;
+  RequestRenderFunction requestRender_;
+  bool isAnimationRunning_{false};
 
-  std::unique_ptr<EventHandlerRegistry> eventHandlerRegistry_;
-  const RequestRenderFunction requestRender_;
-  volatile bool renderRequested_{false};
-  std::function<void(const double)> onRenderCallback_;
+#if REACT_NATIVE_VERSION_MINOR >= 85
+  CallbackId animationBackendCallbackId_{0};
+#endif
+
+  // Callbacks queued by OperationsLoop via the requestRender_ override when
+  // USE_ANIMATION_BACKEND is on. They are drained at the start of each
+  // runGrandCallback(AnimationLoop) tick, so the backend plays the role of the
+  // platform frame source for the loop.
+  std::vector<std::function<void(double)>> pendingFrameCallbacks_;
   AnimatedSensorModule animatedSensorModule_;
-  const std::shared_ptr<JSLogger> jsLogger_;
   std::shared_ptr<LayoutAnimationsManager> layoutAnimationsManager_;
   GetAnimationTimestampFunction getAnimationTimestamp_;
+  std::function<void(double)> pendingAnimationFrameCallbackFromWorklets_;
+
 #ifdef __APPLE__
   ForceScreenSnapshotFunction forceScreenSnapshot_;
 #endif
-  bool cssLoopRunning_{false};
-  bool shouldUpdateCssAnimations_{true};
-  double currentCssTimestamp_{0};
-
-  const std::shared_ptr<AnimatedPropsRegistry> animatedPropsRegistry_;
   const std::shared_ptr<StaticPropsRegistry> staticPropsRegistry_;
   const std::shared_ptr<UpdatesRegistryManager> updatesRegistryManager_;
+  const std::shared_ptr<OperationsLoop> operationsLoop_;
+  const std::shared_ptr<AnimatedPropsRegistry> animatedPropsRegistry_;
   const std::shared_ptr<ViewStylesRepository> viewStylesRepository_;
   const std::shared_ptr<CSSKeyframesRegistry> cssAnimationKeyframesRegistry_;
   const std::shared_ptr<CSSAnimationsRegistry> cssAnimationsRegistry_;
   const std::shared_ptr<CSSTransitionsRegistry> cssTransitionsRegistry_;
+  const std::shared_ptr<PseudoStylesRegistry> pseudoStylesRegistry_;
 
   const SynchronouslyUpdateUIPropsFunction synchronouslyUpdateUIPropsFunction_;
   const PreserveMountedTagsFunction filterUnmountedTagsFunction_;
 
+#ifdef ANDROID
+  // Reused across `applySynchronousUpdates` calls to avoid per-frame heap
+  // allocations. Access only on the UI thread.
+  std::vector<int> synchronousPropsIntBuffer_;
+  std::vector<double> synchronousPropsDoubleBuffer_;
+#endif // ANDROID
+
   std::shared_ptr<UIManager> uiManager_;
   std::shared_ptr<LayoutAnimationsProxyCommon> layoutAnimationsProxy_;
   std::shared_ptr<ReanimatedCommitHook> commitHook_;
   std::shared_ptr<ReanimatedMountHook> mountHook_;
+  /// Access only on UI thread.
   std::set<SurfaceId> layoutAnimationFlushRequests_;
-  bool layoutAnimationRenderRequested_;
 
   const KeyboardEventSubscribeFunction subscribeForKeyboardEventsFunction_;
   const KeyboardEventUnsubscribeFunction unsubscribeFromKeyboardEventsFunction_;
 
 #ifndef NDEBUG
-  worklets::SingleInstanceChecker<ReanimatedModuleProxy> singleInstanceChecker_;
+  SingleInstanceChecker<ReanimatedModuleProxy> singleInstanceChecker_;
 #endif // NDEBUG
 };
 

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/NativeModules/SynchronousPropsBufferSerializer.cpp

@@ -0,0 +1,313 @@
+#include <reanimated/NativeModules/SynchronousPropsBufferSerializer.h>
+
+#ifdef ANDROID
+
+#include <react/debug/react_native_assert.h>
+
+#include <cstdint>
+#include <stdexcept>
+#include <string>
+#include <string_view>
+#include <unordered_map>
+
+namespace reanimated {
+
+namespace {
+
+// NOTE: Keep in sync with SynchronousPropsBufferParser.kt
+enum Command : std::uint8_t {
+  CMD_START_OF_VIEW = 1,
+  CMD_START_OF_TRANSFORM = 2,
+  CMD_END_OF_TRANSFORM = 3,
+  CMD_END_OF_VIEW = 4,
+
+  CMD_OPACITY = 10,
+  CMD_ELEVATION = 11,
+  CMD_Z_INDEX = 12,
+  CMD_SHADOW_COLOR = 19,
+  CMD_BACKGROUND_COLOR = 15,
+  CMD_TINT_COLOR = 17,
+  CMD_PLACEHOLDER_TEXT_COLOR = 18,
+
+  CMD_BORDER_RADIUS = 20,
+  CMD_BORDER_TOP_LEFT_RADIUS = 21,
+  CMD_BORDER_TOP_RIGHT_RADIUS = 22,
+  CMD_BORDER_TOP_START_RADIUS = 23,
+  CMD_BORDER_TOP_END_RADIUS = 24,
+  CMD_BORDER_BOTTOM_LEFT_RADIUS = 25,
+  CMD_BORDER_BOTTOM_RIGHT_RADIUS = 26,
+  CMD_BORDER_BOTTOM_START_RADIUS = 27,
+  CMD_BORDER_BOTTOM_END_RADIUS = 28,
+  CMD_BORDER_START_START_RADIUS = 29,
+  CMD_BORDER_START_END_RADIUS = 30,
+  CMD_BORDER_END_START_RADIUS = 31,
+  CMD_BORDER_END_END_RADIUS = 32,
+
+  CMD_BORDER_COLOR = 40,
+  CMD_BORDER_TOP_COLOR = 41,
+  CMD_BORDER_BOTTOM_COLOR = 42,
+  CMD_BORDER_LEFT_COLOR = 43,
+  CMD_BORDER_RIGHT_COLOR = 44,
+  CMD_BORDER_START_COLOR = 45,
+  CMD_BORDER_END_COLOR = 46,
+  CMD_BORDER_BLOCK_COLOR = 47,
+  CMD_BORDER_BLOCK_START_COLOR = 48,
+  CMD_BORDER_BLOCK_END_COLOR = 49,
+
+  CMD_OUTLINE_COLOR = 50,
+  CMD_OUTLINE_OFFSET = 51,
+  CMD_OUTLINE_WIDTH = 52,
+
+  CMD_TRANSFORM_TRANSLATE_X = 100,
+  CMD_TRANSFORM_TRANSLATE_Y = 101,
+  CMD_TRANSFORM_SCALE = 102,
+  CMD_TRANSFORM_SCALE_X = 103,
+  CMD_TRANSFORM_SCALE_Y = 104,
+  CMD_TRANSFORM_ROTATE = 105,
+  CMD_TRANSFORM_ROTATE_X = 106,
+  CMD_TRANSFORM_ROTATE_Y = 107,
+  CMD_TRANSFORM_ROTATE_Z = 108,
+  CMD_TRANSFORM_SKEW_X = 109,
+  CMD_TRANSFORM_SKEW_Y = 110,
+  CMD_TRANSFORM_MATRIX = 111,
+  CMD_TRANSFORM_PERSPECTIVE = 112,
+
+  CMD_UNIT_DEG = 200,
+  CMD_UNIT_RAD = 201,
+  CMD_UNIT_PX = 202,
+  CMD_UNIT_PERCENT = 203,
+};
+
+const std::unordered_map<std::string_view, Command> kPropNameToCommand = {
+    {"opacity", CMD_OPACITY},
+    {"elevation", CMD_ELEVATION},
+    {"zIndex", CMD_Z_INDEX},
+    {"shadowColor", CMD_SHADOW_COLOR},
+    {"backgroundColor", CMD_BACKGROUND_COLOR},
+    {"tintColor", CMD_TINT_COLOR},
+    {"placeholderTextColor", CMD_PLACEHOLDER_TEXT_COLOR},
+    {"borderRadius", CMD_BORDER_RADIUS},
+    {"borderTopLeftRadius", CMD_BORDER_TOP_LEFT_RADIUS},
+    {"borderTopRightRadius", CMD_BORDER_TOP_RIGHT_RADIUS},
+    {"borderTopStartRadius", CMD_BORDER_TOP_START_RADIUS},
+    {"borderTopEndRadius", CMD_BORDER_TOP_END_RADIUS},
+    {"borderBottomLeftRadius", CMD_BORDER_BOTTOM_LEFT_RADIUS},
+    {"borderBottomRightRadius", CMD_BORDER_BOTTOM_RIGHT_RADIUS},
+    {"borderBottomStartRadius", CMD_BORDER_BOTTOM_START_RADIUS},
+    {"borderBottomEndRadius", CMD_BORDER_BOTTOM_END_RADIUS},
+    {"borderStartStartRadius", CMD_BORDER_START_START_RADIUS},
+    {"borderStartEndRadius", CMD_BORDER_START_END_RADIUS},
+    {"borderEndStartRadius", CMD_BORDER_END_START_RADIUS},
+    {"borderEndEndRadius", CMD_BORDER_END_END_RADIUS},
+    {"borderColor", CMD_BORDER_COLOR},
+    {"borderTopColor", CMD_BORDER_TOP_COLOR},
+    {"borderBottomColor", CMD_BORDER_BOTTOM_COLOR},
+    {"borderLeftColor", CMD_BORDER_LEFT_COLOR},
+    {"borderRightColor", CMD_BORDER_RIGHT_COLOR},
+    {"borderStartColor", CMD_BORDER_START_COLOR},
+    {"borderEndColor", CMD_BORDER_END_COLOR},
+    {"borderBlockColor", CMD_BORDER_BLOCK_COLOR},
+    {"borderBlockStartColor", CMD_BORDER_BLOCK_START_COLOR},
+    {"borderBlockEndColor", CMD_BORDER_BLOCK_END_COLOR},
+    {"outlineColor", CMD_OUTLINE_COLOR},
+    {"outlineOffset", CMD_OUTLINE_OFFSET},
+    {"outlineWidth", CMD_OUTLINE_WIDTH},
+    {"transform", CMD_START_OF_TRANSFORM},
+};
+
+Command propNameToCommand(const std::string &name) {
+  const auto it = kPropNameToCommand.find(name);
+  if (it == kPropNameToCommand.end()) {
+    throw std::runtime_error("[Reanimated] Unsupported style: " + name);
+  }
+  return it->second;
+}
+
+const std::unordered_map<std::string_view, Command> kTransformNameToCommand = {
+    {"translateX", CMD_TRANSFORM_TRANSLATE_X},
+    {"translateY", CMD_TRANSFORM_TRANSLATE_Y},
+    {"scale", CMD_TRANSFORM_SCALE},
+    {"scaleX", CMD_TRANSFORM_SCALE_X},
+    {"scaleY", CMD_TRANSFORM_SCALE_Y},
+    {"rotate", CMD_TRANSFORM_ROTATE},
+    {"rotateX", CMD_TRANSFORM_ROTATE_X},
+    {"rotateY", CMD_TRANSFORM_ROTATE_Y},
+    {"rotateZ", CMD_TRANSFORM_ROTATE_Z},
+    {"skewX", CMD_TRANSFORM_SKEW_X},
+    {"skewY", CMD_TRANSFORM_SKEW_Y},
+    {"matrix", CMD_TRANSFORM_MATRIX},
+    {"perspective", CMD_TRANSFORM_PERSPECTIVE},
+};
+
+Command transformNameToCommand(const std::string &name) {
+  const auto it = kTransformNameToCommand.find(name);
+  if (it == kTransformNameToCommand.end()) {
+    throw std::runtime_error("[Reanimated] Unsupported transform: " + name);
+  }
+  return it->second;
+}
+
+} // namespace
+
+void serializeSynchronousPropsToBuffers(
+    const UpdatesBatch &synchronousUpdatesBatch,
+    std::vector<int> &intBuffer,
+    std::vector<double> &doubleBuffer) {
+  intBuffer.clear();
+  doubleBuffer.clear();
+
+  const auto pushInt = [&](int value) {
+    intBuffer.push_back(value);
+  };
+
+  const auto pushDouble = [&](double value) {
+    doubleBuffer.push_back(value);
+  };
+
+  for (const auto &[shadowNodeFamily, props] : synchronousUpdatesBatch) {
+    pushInt(CMD_START_OF_VIEW);
+    pushInt(shadowNodeFamily->getTag());
+    for (const auto &[key, value] : props.items()) {
+      const auto &propName = key.getString();
+      const auto command = propNameToCommand(propName);
+      switch (command) {
+        case CMD_OPACITY:
+        case CMD_ELEVATION:
+        case CMD_Z_INDEX:
+        case CMD_OUTLINE_OFFSET:
+        case CMD_OUTLINE_WIDTH:
+          pushInt(command);
+          pushDouble(value.asDouble());
+          break;
+
+        case CMD_SHADOW_COLOR:
+        case CMD_BACKGROUND_COLOR:
+        case CMD_TINT_COLOR:
+        case CMD_PLACEHOLDER_TEXT_COLOR:
+        case CMD_BORDER_COLOR:
+        case CMD_BORDER_TOP_COLOR:
+        case CMD_BORDER_BOTTOM_COLOR:
+        case CMD_BORDER_LEFT_COLOR:
+        case CMD_BORDER_RIGHT_COLOR:
+        case CMD_BORDER_START_COLOR:
+        case CMD_BORDER_END_COLOR:
+        case CMD_BORDER_BLOCK_COLOR:
+        case CMD_BORDER_BLOCK_START_COLOR:
+        case CMD_BORDER_BLOCK_END_COLOR:
+        case CMD_OUTLINE_COLOR:
+          pushInt(command);
+          pushInt(value.asInt());
+          break;
+
+        case CMD_BORDER_RADIUS:
+        case CMD_BORDER_TOP_LEFT_RADIUS:
+        case CMD_BORDER_TOP_RIGHT_RADIUS:
+        case CMD_BORDER_TOP_START_RADIUS:
+        case CMD_BORDER_TOP_END_RADIUS:
+        case CMD_BORDER_BOTTOM_LEFT_RADIUS:
+        case CMD_BORDER_BOTTOM_RIGHT_RADIUS:
+        case CMD_BORDER_BOTTOM_START_RADIUS:
+        case CMD_BORDER_BOTTOM_END_RADIUS:
+        case CMD_BORDER_START_START_RADIUS:
+        case CMD_BORDER_START_END_RADIUS:
+        case CMD_BORDER_END_START_RADIUS:
+        case CMD_BORDER_END_END_RADIUS:
+          pushInt(command);
+          if (value.isDouble()) {
+            pushInt(CMD_UNIT_PX);
+            pushDouble(value.getDouble());
+          } else if (value.isString()) {
+            const auto &valueStr = value.getString();
+            if (!valueStr.ends_with("%")) {
+              throw std::runtime_error("[Reanimated] Border radius string must be a percentage");
+            }
+            pushInt(CMD_UNIT_PERCENT);
+            pushDouble(std::stod(valueStr.substr(0, valueStr.size() - 1)));
+          } else {
+            throw std::runtime_error("[Reanimated] Border radius value must be either a number or a string");
+          }
+          break;
+
+        case CMD_START_OF_TRANSFORM:
+          pushInt(command);
+          react_native_assert(value.isArray() && "[Reanimated] Transform value must be an array");
+          for (const auto &item : value) {
+            react_native_assert(item.isObject() && "[Reanimated] Transform array item must be an object");
+            react_native_assert(
+                item.size() == 1 && "[Reanimated] Transform array item must have exactly one key-value pair");
+            const auto &transformName = item.keys().begin()->getString();
+            const auto transformCommand = transformNameToCommand(transformName);
+            const auto &transformValue = *item.values().begin();
+            switch (transformCommand) {
+              case CMD_TRANSFORM_SCALE:
+              case CMD_TRANSFORM_SCALE_X:
+              case CMD_TRANSFORM_SCALE_Y:
+              case CMD_TRANSFORM_PERSPECTIVE: {
+                pushInt(transformCommand);
+                pushDouble(transformValue.asDouble());
+                break;
+              }
+              case CMD_TRANSFORM_TRANSLATE_X:
+              case CMD_TRANSFORM_TRANSLATE_Y: {
+                pushInt(transformCommand);
+                if (transformValue.isDouble()) {
+                  pushInt(CMD_UNIT_PX);
+                  pushDouble(transformValue.getDouble());
+                } else if (transformValue.isString()) {
+                  const auto &transformValueStr = transformValue.getString();
+                  if (!transformValueStr.ends_with("%")) {
+                    throw std::runtime_error("[Reanimated] String translate must be a percentage");
+                  }
+                  pushInt(CMD_UNIT_PERCENT);
+                  pushDouble(std::stod(transformValueStr.substr(0, transformValueStr.size() - 1)));
+                } else {
+                  throw std::runtime_error("[Reanimated] Translate value must be either a number or a string");
+                }
+                break;
+              }
+              case CMD_TRANSFORM_ROTATE:
+              case CMD_TRANSFORM_ROTATE_X:
+              case CMD_TRANSFORM_ROTATE_Y:
+              case CMD_TRANSFORM_ROTATE_Z:
+              case CMD_TRANSFORM_SKEW_X:
+              case CMD_TRANSFORM_SKEW_Y: {
+                const auto &transformValueStr = transformValue.getString();
+                pushInt(transformCommand);
+                if (transformValueStr.ends_with("deg")) {
+                  pushInt(CMD_UNIT_DEG);
+                } else if (transformValueStr.ends_with("rad")) {
+                  pushInt(CMD_UNIT_RAD);
+                } else {
+                  throw std::runtime_error("[Reanimated] Unsupported rotation unit: " + transformValueStr);
+                }
+                pushDouble(std::stod(transformValueStr.substr(0, transformValueStr.size() - 3)));
+                break;
+              }
+              case CMD_TRANSFORM_MATRIX: {
+                pushInt(transformCommand);
+                react_native_assert(transformValue.isArray() && "[Reanimated] Matrix must be an array");
+                int size = transformValue.size();
+                pushInt(size);
+                for (int i = 0; i < size; i++) {
+                  pushDouble(transformValue[i].asDouble());
+                }
+                break;
+              }
+              default:
+                throw std::runtime_error("[Reanimated] Unsupported transform: " + transformName);
+            }
+          }
+          pushInt(CMD_END_OF_TRANSFORM);
+          break;
+
+        default:
+          throw std::runtime_error("[Reanimated] Unsupported prop: " + propName);
+      }
+    }
+    pushInt(CMD_END_OF_VIEW);
+  }
+}
+
+} // namespace reanimated
+
+#endif // ANDROID

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/NativeModules/SynchronousPropsBufferSerializer.h

@@ -0,0 +1,18 @@
+#pragma once
+
+#ifdef ANDROID
+
+#include <reanimated/Fabric/updates/UpdatesRegistry.h>
+
+#include <vector>
+
+namespace reanimated {
+
+void serializeSynchronousPropsToBuffers(
+    const UpdatesBatch &synchronousUpdatesBatch,
+    std::vector<int> &intBuffer,
+    std::vector<double> &doubleBuffer);
+
+} // namespace reanimated
+
+#endif // ANDROID