diff --git a/packages/react-native/Libraries/StyleSheet/processTransform.js b/packages/react-native/Libraries/StyleSheet/processTransform.js index 0d9e72d724a..8338e4f06d2 100644 --- a/packages/react-native/Libraries/StyleSheet/processTransform.js +++ b/packages/react-native/Libraries/StyleSheet/processTransform.js @@ -148,6 +148,12 @@ function _validateTransforms(transform: Array): 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); }); } diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp index cd785ced9bc..66f0b545c1a 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp +++ b/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); } } diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/Transform.cpp b/packages/react-native/ReactCommon/react/renderer/graphics/Transform.cpp index 1fe176f0cbc..f0c6c3fd730 100644 --- a/packages/react-native/ReactCommon/react/renderer/graphics/Transform.cpp +++ b/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(); } diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/Transform.h b/packages/react-native/ReactCommon/react/renderer/graphics/Transform.h index 5dc97aad53d..9977807244f 100644 --- a/packages/react-native/ReactCommon/react/renderer/graphics/Transform.h +++ b/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);