Fabric: Fixes transform when there are multiple values that contain a matrix (#47477)

Summary:
Fixes https://github.com/facebook/react-native/issues/47467 .

## Changelog:

[IOS] [FIXED] - Fabric: Fixes transform when there are multiple values that contain a matrix

Pull Request resolved: https://github.com/facebook/react-native/pull/47477

Test Plan: Repro in Fixes https://github.com/facebook/react-native/issues/47467

Reviewed By: javache

Differential Revision: D65594337

Pulled By: cipolleschi

fbshipit-source-id: 50f255e753e2f233415099c3fbdd0e43b0afefc0

packages/react-native/Libraries/StyleSheet/processTransform.js

@@ -148,6 +148,12 @@ function _validateTransforms(transform: Array<Object>): void {
     );
     const key = keys[0];
     const value = transformation[key];
+    if (key === 'matrix' && transform.length > 1) {
+      console.error(
+        'When using a matrix transform, you must specify exactly one transform object. Passed transform: ' +
+          stringifySafe(transform),
+      );
+    }
     _validateTransform(key, value, transformation);
   });
 }

packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp

@@ -568,7 +568,7 @@ Transform BaseViewProps::resolveTransform(
     for (const auto& operation : transform.operations) {
       transformMatrix = transformMatrix *
           Transform::FromTransformOperation(
-                            operation, layoutMetrics.frame.size);
+                            operation, layoutMetrics.frame.size, transform);
     }
   }
 

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

@@ -169,7 +169,8 @@ Transform Transform::Rotate(Float x, Float y, Float z) {
 
 Transform Transform::FromTransformOperation(
     TransformOperation transformOperation,
-    const Size& size) {
+    const Size& size,
+    const Transform& transform) {
   if (transformOperation.type == TransformOperationType::Perspective) {
     return Transform::Perspective(transformOperation.x.resolve(0));
   }
@@ -196,8 +197,16 @@ Transform Transform::FromTransformOperation(
         transformOperation.y.resolve(0),
         transformOperation.z.resolve(0));
   }
+  // when using arbitrary transform, the caller is responsible for applying the
+  // value
+  if (transformOperation.type == TransformOperationType::Arbitrary) {
+    auto arbitraryTransform = Transform{};
+    arbitraryTransform.operations.push_back(transformOperation);
+    arbitraryTransform.matrix = transform.matrix;
+    return arbitraryTransform;
+  }
 
-  // Identity or Arbitrary
+  // Identity
   return Transform::Identity();
 }
 

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

@@ -101,7 +101,8 @@ struct Transform {
    */
   static Transform FromTransformOperation(
       TransformOperation transformOperation,
-      const Size& size);
+      const Size& size,
+      const Transform& transform = Transform::Identity());
   static TransformOperation DefaultTransformOperation(
       TransformOperationType type);