react-native-reanimated 4.0.3 → 4.1.0-jsx-fix

package/Common/cpp/reanimated/CSS/interpolation/transforms/TransformOperation.h

@@ -1,14 +1,14 @@
 #pragma once
 
-#include <reanimated/CSS/common/TransformMatrix.h>
 #include <reanimated/CSS/common/definitions.h>
+#include <reanimated/CSS/common/transforms/TransformMatrix3D.h>
+#include <reanimated/CSS/common/transforms/TransformOp.h>
 #include <reanimated/CSS/common/values/CSSAngle.h>
-#include <reanimated/CSS/common/values/CSSDimension.h>
+#include <reanimated/CSS/common/values/CSSLength.h>
 #include <reanimated/CSS/common/values/CSSNumber.h>
 
 #include <react/renderer/core/ShadowNode.h>
 
-#include <folly/dynamic.h>
 #include <memory>
 #include <string>
 #include <unordered_map>
@@ -17,6 +17,7 @@
 
 #ifndef NDEBUG
 #include <iostream>
+#include <sstream>
 #endif // NDEBUG
 
 namespace reanimated::css {
@@ -24,25 +25,6 @@ namespace reanimated::css {
 using namespace facebook;
 using namespace react;
 
-enum class TransformOperationType {
-  Perspective,
-  Rotate,
-  RotateX,
-  RotateY,
-  RotateZ,
-  Scale,
-  ScaleX,
-  ScaleY,
-  TranslateX,
-  TranslateY,
-  SkewX,
-  SkewY,
-  Matrix,
-};
-
-TransformOperationType getTransformOperationType(const std::string &property);
-std::string getOperationNameFromType(TransformOperationType type);
-
 // Base struct for TransformOperation
 struct TransformOperation {
   virtual bool operator==(const TransformOperation &other) const = 0;
@@ -51,163 +33,55 @@ struct TransformOperation {
   friend std::ostream &operator<<(
       std::ostream &os,
       const TransformOperation &operation);
-  virtual std::string getOperationValue() const = 0;
+  virtual std::string stringifyOperationValue() const = 0;
 #endif // NDEBUG
 
   std::string getOperationName() const;
-  virtual TransformOperationType type() const = 0;
+  virtual TransformOp type() const = 0;
   virtual bool isRelative() const;
 
+  static std::shared_ptr<TransformOperation> fromJSIValue(
+      jsi::Runtime &rt,
+      const jsi::Value &value);
   static std::shared_ptr<TransformOperation> fromDynamic(
       const folly::dynamic &value);
   folly::dynamic toDynamic() const;
   virtual folly::dynamic valueToDynamic() const = 0;
 
-  virtual bool canConvertTo(TransformOperationType type) const;
+  virtual bool canConvertTo(TransformOp type) const;
   virtual std::vector<std::shared_ptr<TransformOperation>> convertTo(
-      TransformOperationType type) const;
+      TransformOp type) const;
 
-  virtual TransformMatrix toMatrix() const = 0;
-  void assertCanConvertTo(TransformOperationType type) const;
+  virtual TransformMatrix3D toMatrix() const = 0;
+  void assertCanConvertTo(TransformOp type) const;
 };
 
 using TransformOperations = std::vector<std::shared_ptr<TransformOperation>>;
 
-template <typename TValue>
+// Template overload to inherit from in final operation structs
+template <TransformOp TOperation, typename TValue>
 struct TransformOperationBase : public TransformOperation {
   const TValue value;
 
-  explicit TransformOperationBase(const TValue &value);
+  explicit TransformOperationBase(const TValue &value) : value(value) {}
   virtual ~TransformOperationBase() = default;
 
-  bool operator==(const TransformOperation &other) const override;
+  TransformOp type() const override {
+    return TOperation;
+  }
+
+  bool operator==(const TransformOperation &other) const override {
+    if (type() != other.type()) {
+      return false;
+    }
+    const auto &otherOperation =
+        static_cast<const TransformOperationBase<TOperation, TValue> &>(other);
+    return value == otherOperation.value;
+  }
 
 #ifndef NDEBUG
-  std::string getOperationValue() const override;
+  std::string stringifyOperationValue() const override;
 #endif // NDEBUG
 };
 
-/**
- * Concrete transform operations
- */
-// Perspective
-struct PerspectiveOperation final : public TransformOperationBase<CSSDouble> {
-  using TransformOperationBase<CSSDouble>::TransformOperationBase;
-  explicit PerspectiveOperation(double value);
-  TransformOperationType type() const override;
-  folly::dynamic valueToDynamic() const override;
-  TransformMatrix toMatrix() const override;
-};
-
-// Rotate
-struct RotateOperation : public TransformOperationBase<CSSAngle> {
-  using TransformOperationBase<CSSAngle>::TransformOperationBase;
-  explicit RotateOperation(const std::string &value);
-  TransformOperationType type() const override;
-  folly::dynamic valueToDynamic() const override;
-  TransformMatrix toMatrix() const override;
-};
-
-struct RotateXOperation final : public RotateOperation {
-  using RotateOperation::RotateOperation;
-  TransformOperationType type() const override;
-  TransformMatrix toMatrix() const override;
-};
-
-struct RotateYOperation final : public RotateOperation {
-  using RotateOperation::RotateOperation;
-  TransformOperationType type() const override;
-  TransformMatrix toMatrix() const override;
-};
-
-struct RotateZOperation final : public RotateOperation {
-  using RotateOperation::RotateOperation;
-  TransformOperationType type() const override;
-  TransformMatrix toMatrix() const override;
-  bool canConvertTo(TransformOperationType type) const override;
-  TransformOperations convertTo(TransformOperationType type) const override;
-};
-
-// Scale
-struct ScaleOperation : public TransformOperationBase<CSSDouble> {
-  using TransformOperationBase<CSSDouble>::TransformOperationBase;
-  explicit ScaleOperation(double value);
-  TransformOperationType type() const override;
-  folly::dynamic valueToDynamic() const override;
-  bool canConvertTo(TransformOperationType type) const override;
-  TransformOperations convertTo(TransformOperationType type) const override;
-  TransformMatrix toMatrix() const override;
-};
-
-struct ScaleXOperation final : public ScaleOperation {
-  using ScaleOperation::ScaleOperation;
-  TransformOperationType type() const override;
-  TransformMatrix toMatrix() const override;
-};
-
-struct ScaleYOperation final : public ScaleOperation {
-  using ScaleOperation::ScaleOperation;
-  TransformOperationType type() const override;
-  TransformMatrix toMatrix() const override;
-};
-
-// Translate
-struct TranslateOperation : public TransformOperationBase<CSSDimension> {
-  using TransformOperationBase<CSSDimension>::TransformOperationBase;
-  explicit TranslateOperation(double value);
-  explicit TranslateOperation(const std::string &value);
-  bool isRelative() const override;
-  folly::dynamic valueToDynamic() const override;
-  virtual TransformMatrix toMatrix(double resolvedValue) const = 0;
-  TransformMatrix toMatrix() const override;
-};
-
-struct TranslateXOperation final : public TranslateOperation {
-  using TranslateOperation::TranslateOperation;
-  TransformOperationType type() const override;
-  TransformMatrix toMatrix(double resolvedValue) const override;
-};
-
-struct TranslateYOperation final : public TranslateOperation {
-  using TranslateOperation::TranslateOperation;
-  TransformOperationType type() const override;
-  TransformMatrix toMatrix(double resolvedValue) const override;
-};
-
-// Skew
-struct SkewOperation : public TransformOperationBase<CSSAngle> {
-  using TransformOperationBase<CSSAngle>::TransformOperationBase;
-  explicit SkewOperation(const std::string &value);
-  folly::dynamic valueToDynamic() const override;
-};
-
-struct SkewXOperation final : public SkewOperation {
-  using SkewOperation::SkewOperation;
-  TransformOperationType type() const override;
-  TransformMatrix toMatrix() const override;
-};
-
-struct SkewYOperation final : public SkewOperation {
-  using SkewOperation::SkewOperation;
-  TransformOperationType type() const override;
-  TransformMatrix toMatrix() const override;
-};
-
-// Matrix
-struct MatrixOperation final
-    : public TransformOperationBase<
-          std::variant<TransformMatrix, TransformOperations>> {
-  using TransformOperationBase<
-      std::variant<TransformMatrix, TransformOperations>>::
-      TransformOperationBase;
-  explicit MatrixOperation(const TransformMatrix &value);
-  explicit MatrixOperation(const TransformOperations &operations);
-
-  bool operator==(const TransformOperation &other) const override;
-
-  TransformOperationType type() const override;
-  folly::dynamic valueToDynamic() const override;
-  TransformMatrix toMatrix() const override;
-};
-
 } // namespace reanimated::css

package/Common/cpp/reanimated/CSS/interpolation/transforms/TransformOperationInterpolator.cpp

@@ -30,11 +30,11 @@ MatrixOperation TransformOperationInterpolator<MatrixOperation>::interpolate(
     return MatrixOperation(progress < 0.5 ? fromMatrix : toMatrix);
   }
 
-  return MatrixOperation(TransformMatrix::recompose(
+  return MatrixOperation(TransformMatrix3D::recompose(
       decomposedFrom->interpolate(progress, decomposedTo.value())));
 }
 
-TransformMatrix
+TransformMatrix3D
 TransformOperationInterpolator<MatrixOperation>::matrixFromOperation(
     const MatrixOperation &matrixOperation,
     const TransformInterpolatorUpdateContext &context) const {
@@ -42,7 +42,7 @@ TransformOperationInterpolator<MatrixOperation>::matrixFromOperation(
     const auto &operations =
         std::get<TransformOperations>(matrixOperation.value);
 
-    TransformMatrix matrix = TransformMatrix::Identity();
+    TransformMatrix3D matrix = TransformMatrix3D::Identity();
 
     for (int i = static_cast<int>(operations.size()) - 1; i >= 0; i--) {
       auto operation = operations[i];
@@ -58,7 +58,7 @@ TransformOperationInterpolator<MatrixOperation>::matrixFromOperation(
     return matrix;
   }
 
-  return std::get<TransformMatrix>(matrixOperation.value);
+  return std::get<TransformMatrix3D>(matrixOperation.value);
 }
 
 } // namespace reanimated::css

package/Common/cpp/reanimated/CSS/interpolation/transforms/TransformOperationInterpolator.h

@@ -2,7 +2,8 @@
 
 #include <reanimated/CSS/common/values/CSSValue.h>
 #include <reanimated/CSS/interpolation/transforms/TransformInterpolator.h>
-#include <reanimated/CSS/interpolation/transforms/TransformOperation.h>
+#include <reanimated/CSS/interpolation/transforms/operations/matrix.h>
+#include <reanimated/CSS/interpolation/transforms/operations/perspective.h>
 
 #include <memory>
 #include <string>
@@ -65,7 +66,7 @@ class TransformOperationInterpolator<MatrixOperation>
       const TransformInterpolatorUpdateContext &context) const override;
 
  private:
-  TransformMatrix matrixFromOperation(
+  TransformMatrix3D matrixFromOperation(
       const MatrixOperation &matrixOperation,
       const TransformInterpolatorUpdateContext &context) const;
 };

package/Common/cpp/reanimated/CSS/interpolation/transforms/TransformsStyleInterpolator.cpp

@@ -3,7 +3,7 @@
 namespace reanimated::css {
 
 const TransformOperations TransformsStyleInterpolator::defaultStyleValue_ = {
-    std::make_shared<MatrixOperation>(TransformMatrix::Identity())};
+    std::make_shared<MatrixOperation>(TransformMatrix3D::Identity())};
 
 TransformsStyleInterpolator::TransformsStyleInterpolator(
     const PropertyPath &propertyPath,
@@ -98,20 +98,21 @@ folly::dynamic TransformsStyleInterpolator::interpolate(
 }
 
 void TransformsStyleInterpolator::updateKeyframes(
-    const folly::dynamic &keyframes) {
+    jsi::Runtime &rt,
+    const jsi::Value &keyframes) {
   // Step 1: Parse keyframes
-  const auto parsedKeyframes = parseDynamicKeyframes(keyframes);
+  const auto parsedKeyframes = parseJSIKeyframes(rt, keyframes);
 
   // Step 2: Convert keyframes to TransformOperations
   std::vector<std::pair<double, std::optional<TransformOperations>>> operations;
   operations.reserve(parsedKeyframes.size());
   for (const auto &[offset, value] : parsedKeyframes) {
-    operations.emplace_back(offset, parseTransformOperations(value));
+    operations.emplace_back(offset, parseTransformOperations(rt, value));
   }
 
   // Step 3: Prepare keyframe interpolation pairs (convert keyframe values in
   // both keyframes to the same type)
-  // There will be one less keyframe than the number of keyframes in the
+  // There will be one less keyframe than the number of keyframes in the jsi
   // array as we create interpolation pairs
   const auto keyframesCount = operations.size() - 1;
   keyframes_.clear();
@@ -148,6 +149,28 @@ void TransformsStyleInterpolator::updateKeyframesFromStyleChange(
       parseTransformOperations(newStyleValue).value_or(TransformOperations{})));
 }
 
+std::optional<TransformOperations>
+TransformsStyleInterpolator::parseTransformOperations(
+    jsi::Runtime &rt,
+    const jsi::Value &values) {
+  if (values.isUndefined()) {
+    return std::nullopt;
+  }
+
+  const auto transformsArray = values.asObject(rt).asArray(rt);
+  const auto transformsCount = transformsArray.size(rt);
+
+  TransformOperations transformOperations;
+  transformOperations.reserve(transformsCount);
+
+  for (size_t i = 0; i < transformsCount; ++i) {
+    const auto transform = transformsArray.getValueAtIndex(rt, i);
+    transformOperations.emplace_back(
+        TransformOperation::fromJSIValue(rt, transform));
+  }
+  return transformOperations;
+}
+
 std::optional<TransformOperations>
 TransformsStyleInterpolator::parseTransformOperations(
     const folly::dynamic &values) {
@@ -219,10 +242,9 @@ TransformsStyleInterpolator::createTransformInterpolationPair(
   bool shouldInterpolateMatrices = false;
 
   // Build index maps and check for matrix operation
-  std::unordered_map<TransformOperationType, size_t> lastIndexInFrom,
-      lastIndexInTo;
+  std::unordered_map<TransformOp, size_t> lastIndexInFrom, lastIndexInTo;
   for (size_t idx = 0; idx < fromOperations.size(); ++idx) {
-    if (fromOperations[idx]->type() == TransformOperationType::Matrix) {
+    if (fromOperations[idx]->type() == TransformOp::Matrix) {
       shouldInterpolateMatrices = true;
       break;
     }
@@ -230,7 +252,7 @@ TransformsStyleInterpolator::createTransformInterpolationPair(
   }
   for (size_t idx = 0; idx < toOperations.size() && !shouldInterpolateMatrices;
        ++idx) {
-    if (toOperations[idx]->type() == TransformOperationType::Matrix) {
+    if (toOperations[idx]->type() == TransformOp::Matrix) {
       shouldInterpolateMatrices = true;
       break;
     }
@@ -342,7 +364,7 @@ TransformOperations TransformsStyleInterpolator::getFallbackValue(
 
 std::shared_ptr<TransformOperation>
 TransformsStyleInterpolator::getDefaultOperationOfType(
-    const TransformOperationType type) const {
+    const TransformOp type) const {
   return interpolators_->at(type)->getDefaultOperation();
 }
 

package/Common/cpp/reanimated/CSS/interpolation/transforms/TransformsStyleInterpolator.h

@@ -2,8 +2,8 @@
 
 #include <reanimated/CSS/interpolation/PropertyInterpolator.h>
 #include <reanimated/CSS/interpolation/transforms/TransformInterpolator.h>
-#include <reanimated/CSS/interpolation/transforms/TransformOperation.h>
-#include <reanimated/CSS/util/keyframes.h>
+#include <reanimated/CSS/interpolation/transforms/operations/matrix.h>
+#include <reanimated/CSS/utils/keyframes.h>
 
 #include <memory>
 #include <unordered_map>
@@ -44,7 +44,7 @@ class TransformsStyleInterpolator final : public PropertyInterpolator {
       const std::shared_ptr<KeyframeProgressProvider> &progressProvider)
       const override;
 
-  void updateKeyframes(const folly::dynamic &keyframes) override;
+  void updateKeyframes(jsi::Runtime &rt, const jsi::Value &keyframes) override;
   void updateKeyframesFromStyleChange(
       const folly::dynamic &oldStyleValue,
       const folly::dynamic &newStyleValue,
@@ -57,6 +57,9 @@ class TransformsStyleInterpolator final : public PropertyInterpolator {
   std::vector<std::shared_ptr<TransformKeyframe>> keyframes_;
   std::optional<TransformOperations> reversingAdjustedStartValue_;
 
+  static std::optional<TransformOperations> parseTransformOperations(
+      jsi::Runtime &rt,
+      const jsi::Value &values);
   static std::optional<TransformOperations> parseTransformOperations(
       const folly::dynamic &values);
   std::shared_ptr<TransformKeyframe> createTransformKeyframe(
@@ -74,7 +77,7 @@ class TransformsStyleInterpolator final : public PropertyInterpolator {
       TransformOperations &sourceResult,
       TransformOperations &targetResult) const;
   std::shared_ptr<TransformOperation> getDefaultOperationOfType(
-      TransformOperationType type) const;
+      TransformOp type) const;
 
   size_t getIndexOfCurrentKeyframe(
       const std::shared_ptr<KeyframeProgressProvider> &progressProvider) const;

package/Common/cpp/reanimated/CSS/interpolation/transforms/operations/matrix.cpp

@@ -0,0 +1,136 @@
+#include <reanimated/CSS/interpolation/transforms/operations/matrix.h>
+
+namespace reanimated::css {
+
+// Matrix
+std::variant<TransformMatrix3D, TransformOperations> simplifyOperations(
+    const TransformOperations &operations) {
+  // Initialize the stack with the reversed list of operations
+  std::vector<std::shared_ptr<TransformOperation>> operationsStack(
+      operations.begin(), operations.end());
+  TransformOperations reversedOperations;
+  TransformMatrix3D simplifiedMatrix = TransformMatrix3D::Identity();
+  bool hasSimplifications = false;
+
+  while (!operationsStack.empty()) {
+    auto operation = operationsStack.back();
+    operationsStack.pop_back();
+
+    if (operation->type() == TransformOp::Matrix) {
+      const auto matrixOperation =
+          std::static_pointer_cast<MatrixOperation>(operation);
+      if (std::holds_alternative<TransformOperations>(matrixOperation->value)) {
+        // If the current operation is a matrix created from other operations,
+        // add all of these operations to the stack
+        for (auto &op : std::get<TransformOperations>(matrixOperation->value)) {
+          operationsStack.push_back(op);
+        }
+        continue;
+      }
+    }
+
+    if (!operation->isRelative()) {
+      // If the operation is not relative, it can be simplified (converted to
+      // the matrix and multiplied)
+      const auto operationMatrix = operation->toMatrix();
+      simplifiedMatrix = hasSimplifications
+          ? (simplifiedMatrix * operationMatrix)
+          : operationMatrix;
+      hasSimplifications = true;
+    } else {
+      // If the current operation is relative, we need to add the current
+      // simplified matrix to the list of operations before adding the
+      // relative operation
+      if (hasSimplifications) {
+        reversedOperations.emplace_back(
+            std::make_shared<MatrixOperation>(simplifiedMatrix));
+        simplifiedMatrix = TransformMatrix3D::Identity();
+        hasSimplifications = false;
+      }
+      reversedOperations.emplace_back(operation);
+    }
+  }
+
+  if (hasSimplifications) {
+    // We can return just a single matrix if there are no operations or the
+    // only operation is a simplified matrix (when hasSimplifications is true)
+    if (reversedOperations.size() <= 1) {
+      return simplifiedMatrix;
+    }
+    // Otherwise, add the last simplified matrix to the list of operations
+    reversedOperations.emplace_back(
+        std::make_shared<MatrixOperation>(simplifiedMatrix));
+  }
+
+  // Reverse the list of operations to maintain the order
+  std::reverse(reversedOperations.begin(), reversedOperations.end());
+  return reversedOperations;
+}
+
+MatrixOperation::MatrixOperation(const TransformMatrix3D &value)
+    : TransformOperationBase<
+          TransformOp::Matrix,
+          std::variant<TransformMatrix3D, TransformOperations>>(value) {}
+
+MatrixOperation::MatrixOperation(const TransformOperations &operations)
+    // Simplify operations to reduce the number of matrix multiplications
+    // during matrix keyframe interpolation
+    : TransformOperationBase<
+          TransformOp::Matrix,
+          std::variant<TransformMatrix3D, TransformOperations>>(
+          simplifyOperations(operations)) {}
+
+bool MatrixOperation::operator==(const TransformOperation &other) const {
+  if (type() != other.type()) {
+    return false;
+  }
+
+  const auto *otherOperation = dynamic_cast<const MatrixOperation *>(&other);
+  if (otherOperation == nullptr) {
+    return false;
+  }
+
+  const auto hasOperations = std::holds_alternative<TransformOperations>(value);
+  const auto otherHasOperations =
+      std::holds_alternative<TransformOperations>(otherOperation->value);
+
+  if (hasOperations != otherHasOperations) {
+    return false;
+  }
+  if (!hasOperations) {
+    return std::get<TransformMatrix3D>(value) ==
+        std::get<TransformMatrix3D>(otherOperation->value);
+  }
+
+  const auto &operations = std::get<TransformOperations>(value);
+  const auto &otherOperations =
+      std::get<TransformOperations>(otherOperation->value);
+
+  if (operations.size() != otherOperations.size()) {
+    return false;
+  }
+  for (size_t i = 0; i < operations.size(); ++i) {
+    if (*operations[i] != *otherOperations[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+folly::dynamic MatrixOperation::valueToDynamic() const {
+  if (!std::holds_alternative<TransformMatrix3D>(value)) {
+    throw std::invalid_argument(
+        "[Reanimated] Cannot convert unprocessed transform operations to the dynamic value.");
+  }
+  return std::get<TransformMatrix3D>(value).toDynamic();
+}
+
+TransformMatrix3D MatrixOperation::toMatrix() const {
+  if (!std::holds_alternative<TransformMatrix3D>(value)) {
+    throw std::invalid_argument(
+        "[Reanimated] Cannot convert unprocessed transform operations to the matrix.");
+  }
+  return std::get<TransformMatrix3D>(value);
+}
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/interpolation/transforms/operations/matrix.h

@@ -0,0 +1,29 @@
+#pragma once
+
+#include <reanimated/CSS/interpolation/transforms/TransformOperation.h>
+
+#include <memory>
+#include <vector>
+
+namespace reanimated::css {
+
+// Matrix
+struct MatrixOperation final
+    : public TransformOperationBase<
+          TransformOp::Matrix,
+          std::variant<TransformMatrix3D, TransformOperations>> {
+  using TransformOperationBase<
+      TransformOp::Matrix,
+      std::variant<TransformMatrix3D, TransformOperations>>::
+      TransformOperationBase;
+
+  explicit MatrixOperation(const TransformMatrix3D &value);
+  explicit MatrixOperation(const TransformOperations &operations);
+
+  bool operator==(const TransformOperation &other) const override;
+
+  folly::dynamic valueToDynamic() const override;
+  TransformMatrix3D toMatrix() const override;
+};
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/interpolation/transforms/operations/perspective.h

@@ -0,0 +1,25 @@
+#pragma once
+
+#include <reanimated/CSS/interpolation/transforms/TransformOperation.h>
+
+namespace reanimated::css {
+
+struct PerspectiveOperation final
+    : public TransformOperationBase<TransformOp::Perspective, CSSDouble> {
+  using TransformOperationBase<TransformOp::Perspective, CSSDouble>::
+      TransformOperationBase;
+
+  explicit PerspectiveOperation(double value)
+      : TransformOperationBase<TransformOp::Perspective, CSSDouble>(
+            CSSDouble(value)) {}
+
+  folly::dynamic valueToDynamic() const override {
+    return value.value != 0 ? value.toDynamic() : folly::dynamic();
+  }
+
+  TransformMatrix3D toMatrix() const override {
+    return TransformMatrix3D::create<TransformOp::Perspective>(value.value);
+  }
+};
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/interpolation/transforms/operations/rotate.h

@@ -0,0 +1,47 @@
+#pragma once
+
+#include <reanimated/CSS/interpolation/transforms/TransformOperation.h>
+
+#include <memory>
+#include <string>
+
+namespace reanimated::css {
+
+template <TransformOp TOperation>
+struct RotateOperationBase
+    : public TransformOperationBase<TOperation, CSSAngle> {
+  using TransformOperationBase<TOperation, CSSAngle>::TransformOperationBase;
+
+  explicit RotateOperationBase(const std::string &value)
+      : TransformOperationBase<TOperation, CSSAngle>(CSSAngle(value)) {}
+
+  folly::dynamic valueToDynamic() const override {
+    return this->value.toDynamic();
+  }
+
+  TransformMatrix3D toMatrix() const override {
+    return TransformMatrix3D::create<TOperation>(this->value.value);
+  }
+};
+
+using RotateOperation = RotateOperationBase<TransformOp::Rotate>;
+
+using RotateXOperation = RotateOperationBase<TransformOp::RotateX>;
+
+using RotateYOperation = RotateOperationBase<TransformOp::RotateY>;
+
+struct RotateZOperation final
+    : public RotateOperationBase<TransformOp::RotateZ> {
+  using RotateOperationBase<TransformOp::RotateZ>::RotateOperationBase;
+
+  bool canConvertTo(TransformOp type) const override {
+    return type == TransformOp::Rotate;
+  }
+
+  TransformOperations convertTo(TransformOp type) const override {
+    assertCanConvertTo(type);
+    return {std::make_shared<RotateOperation>(value)};
+  }
+};
+
+} // namespace reanimated::css