Add support for transform operations to AnimatedPropsSerializer

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropSerializer.cpp

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+#include <react/renderer/graphics/Transform.h>
+#include <react/renderer/graphics/TransformUtils.h>
 #include <stdexcept>
 #include "AnimatedPropsSerializer.h"
 
@@ -51,27 +53,14 @@ void packOpacity(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
 }
 
 void packTransform(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
-  const auto transform = get<Transform>(animatedProp);
-  const auto matrixArray = folly::dynamic::array(
-      transform.matrix[0],
-      transform.matrix[1],
-      transform.matrix[2],
-      transform.matrix[3],
-      transform.matrix[4],
-      transform.matrix[5],
-      transform.matrix[6],
-      transform.matrix[7],
-      transform.matrix[8],
-      transform.matrix[9],
-      transform.matrix[10],
-      transform.matrix[11],
-      transform.matrix[12],
-      transform.matrix[13],
-      transform.matrix[14],
-      transform.matrix[15]);
-  dyn.insert(
-      "transform",
-      folly::dynamic::array(folly::dynamic::object("matrix", matrixArray)));
+  const auto& transform = get<Transform>(animatedProp);
+  auto transformArray = folly::dynamic::array();
+
+  for (const auto& operation : transform.operations) {
+    updateTransformProps(transform, operation, transformArray);
+  }
+
+  dyn.insert("transform", transformArray);
 }
 
 std::string unitTypeToString(UnitType unit) {

packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp

@@ -15,6 +15,7 @@
 #include <react/renderer/components/view/propsConversions.h>
 #include <react/renderer/core/graphicsConversions.h>
 #include <react/renderer/core/propsConversions.h>
+#include <react/renderer/graphics/TransformUtils.h>
 
 namespace facebook::react {
 
@@ -431,69 +432,6 @@ inline static void updateNativeDrawableProp(
   result[propName] = nativeDrawableResult;
 }
 
-inline static void updateTransformOperationValue(
-    const std::string& operationName,
-    const ValueUnit& valueUnit,
-    folly::dynamic& resultTranslateArray) {
-  folly::dynamic resultTranslate = folly::dynamic::object();
-  if (valueUnit.unit == UnitType::Percent) {
-    resultTranslate[operationName] = std::to_string(valueUnit.value) + "%";
-  } else {
-    resultTranslate[operationName] = valueUnit.value;
-  }
-  resultTranslateArray.push_back(std::move(resultTranslate));
-}
-
-inline static void updateTransformProps(
-    const Transform& transform,
-    const TransformOperation& operation,
-    folly::dynamic& resultTranslateArray) {
-  // See serialization rules in:
-  // react-native-github/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h?lines=592
-  std::string operationName;
-  switch (operation.type) {
-    case TransformOperationType::Scale:
-      operationName = "scale";
-      if (operation.x == operation.y && operation.x == operation.z) {
-        updateTransformOperationValue(
-            operationName, operation.x, resultTranslateArray);
-        return;
-      }
-      break;
-    case TransformOperationType::Translate:
-      operationName = "translate";
-      break;
-    case TransformOperationType::Rotate:
-      operationName = "rotate";
-      break;
-    case TransformOperationType::Perspective:
-      operationName = "perspective";
-      break;
-    case TransformOperationType::Arbitrary:
-      operationName = "matrix";
-      resultTranslateArray[operationName] = transform;
-      break;
-    case TransformOperationType::Identity:
-      // Do nothing
-      break;
-    case TransformOperationType::Skew:
-      operationName = "skew";
-      break;
-  }
-  if (operation.x.value != 0) {
-    updateTransformOperationValue(
-        operationName + "X", operation.x, resultTranslateArray);
-  }
-  if (operation.y.value != 0) {
-    updateTransformOperationValue(
-        operationName + "Y", operation.y, resultTranslateArray);
-  }
-  if (operation.z.value != 0) {
-    updateTransformOperationValue(
-        operationName + "Z", operation.z, resultTranslateArray);
-  }
-}
-
 inline static void updateAccessibilityStateProp(
     folly::dynamic& result,
     const std::optional<AccessibilityState>& newState,

packages/react-native/ReactCommon/react/renderer/graphics/Transform.h

@@ -19,9 +19,7 @@
 #include <react/renderer/graphics/Vector.h>
 #include <react/utils/hash_combine.h>
 
-#ifdef ANDROID
 #include <folly/dynamic.h>
-#endif
 
 namespace facebook::react {
 
@@ -177,7 +175,6 @@ struct Transform {
   /**
    * Convert to folly::dynamic.
    */
-#ifdef ANDROID
   operator folly::dynamic() const
   {
     return folly::dynamic::array(
@@ -198,7 +195,6 @@ struct Transform {
         matrix[14],
         matrix[15]);
   }
-#endif
 };
 
 /*

packages/react-native/ReactCommon/react/renderer/graphics/TransformUtils.h

@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <folly/dynamic.h>
+#include <react/renderer/graphics/Transform.h>
+#include <react/renderer/graphics/ValueUnit.h>
+
+namespace facebook::react {
+
+/**
+ * Serializes a ValueUnit to a folly::dynamic object and appends it to the
+ * result array. Handles percentage values by converting them to strings
+ * (e.g., "50%").
+ */
+inline static void serializeTransformOperationValue(
+    const std::string &operationName,
+    const ValueUnit &valueUnit,
+    folly::dynamic &resultArray)
+{
+  folly::dynamic result = folly::dynamic::object();
+  if (valueUnit.unit == UnitType::Percent) {
+    result[operationName] = std::to_string(valueUnit.value) + "%";
+  } else {
+    result[operationName] = valueUnit.value;
+  }
+  resultArray.push_back(std::move(result));
+}
+
+inline static void serializeTransformAxis(
+    const TransformOperation &operation,
+    const std::string &operationName,
+    float defaultValue,
+    folly::dynamic &resultTranslateArray)
+{
+  if (operation.x.value != defaultValue) {
+    serializeTransformOperationValue(operationName + "X", operation.x, resultTranslateArray);
+  }
+  if (operation.y.value != defaultValue) {
+    serializeTransformOperationValue(operationName + "Y", operation.y, resultTranslateArray);
+  }
+  if (operation.z.value != defaultValue) {
+    serializeTransformOperationValue(operationName + "Z", operation.z, resultTranslateArray);
+  }
+}
+
+inline static void updateTransformProps(
+    const Transform &transform,
+    const TransformOperation &operation,
+    folly::dynamic &resultTranslateArray)
+{
+  // See serialization rules in:
+  // react-native-github/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h?lines=592
+  std::string operationName;
+  switch (operation.type) {
+    case TransformOperationType::Scale:
+      operationName = "scale";
+      if (operation.x == operation.y && operation.x == operation.z) {
+        serializeTransformOperationValue(operationName, operation.x, resultTranslateArray);
+      } else {
+        serializeTransformAxis(operation, operationName, 1.0f, resultTranslateArray);
+      }
+      return;
+    case TransformOperationType::Translate:
+      serializeTransformAxis(operation, "translate", 0, resultTranslateArray);
+      return;
+    case TransformOperationType::Rotate:
+      serializeTransformAxis(operation, "rotate", 0, resultTranslateArray);
+      return;
+    case TransformOperationType::Perspective:
+      serializeTransformAxis(operation, "perspective", 0, resultTranslateArray);
+      return;
+    case TransformOperationType::Arbitrary: {
+      operationName = "matrix";
+      resultTranslateArray[operationName] = transform;
+      return;
+    }
+    case TransformOperationType::Identity:
+      // Do nothing
+      return;
+    case TransformOperationType::Skew:
+      serializeTransformAxis(operation, "skew", 0, resultTranslateArray);
+      return;
+  }
+}
+
+} // namespace facebook::react