@react-native-ohos/react-native-reanimated 3.18.1-rc.6 → 4.0.0-rc.1

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/interpolation/styles/TransitionStyleInterpolator.cpp

@@ -0,0 +1,103 @@
+#include <reanimated/CSS/interpolation/styles/TransitionStyleInterpolator.h>
+
+#include <memory>
+#include <string>
+#include <unordered_set>
+
+namespace reanimated::css {
+
+TransitionStyleInterpolator::TransitionStyleInterpolator(
+    const std::string &componentName,
+    const std::shared_ptr<ViewStylesRepository> &viewStylesRepository)
+    : componentName_(componentName), viewStylesRepository_(viewStylesRepository) {}
+
+std::unordered_set<std::string> TransitionStyleInterpolator::getReversedPropertyNames(
+    const folly::dynamic &newPropertyValues) const {
+  std::unordered_set<std::string> reversedProperties;
+
+  if (!newPropertyValues.isObject()) {
+    return reversedProperties;
+  }
+
+  for (const auto &[propertyName, propertyValue] : newPropertyValues.items()) {
+    const auto propertyNameStr = propertyName.getString();
+    const auto it = interpolators_.find(propertyNameStr);
+    if (it != interpolators_.end() &&
+        // First keyframe value of the previous transition is the reversing
+        // adjusted start value
+        it->second->equalsReversingAdjustedStartValue(propertyValue)) {
+      reversedProperties.insert(propertyNameStr);
+    }
+  }
+
+  return reversedProperties;
+}
+
+folly::dynamic TransitionStyleInterpolator::interpolate(
+    const std::shared_ptr<const ShadowNode> &shadowNode,
+    const TransitionProgressProvider &transitionProgressProvider,
+    const std::unordered_set<std::string> &allowDiscreteProperties) const {
+  folly::dynamic result = folly::dynamic::object;
+
+  const auto allFallbackInterpolateThreshold = allowDiscreteProperties.contains("all") ? 0.5 : 0;
+
+  for (const auto &[propertyName, progressProvider] : transitionProgressProvider.getPropertyProgressProviders()) {
+    const auto &interpolator = interpolators_.at(propertyName);
+    const auto fallbackInterpolateThreshold =
+        (allowDiscreteProperties.contains(propertyName)) ? 0.5 : allFallbackInterpolateThreshold;
+    result[propertyName] = interpolator->interpolate(shadowNode, progressProvider, fallbackInterpolateThreshold);
+  }
+
+  return result;
+}
+
+void TransitionStyleInterpolator::discardFinishedInterpolators(
+    const TransitionProgressProvider &transitionProgressProvider) {
+  for (const auto &propertyName : transitionProgressProvider.getRemovedProperties()) {
+    interpolators_.erase(propertyName);
+  }
+}
+
+void TransitionStyleInterpolator::discardIrrelevantInterpolators(
+    const std::unordered_set<std::string> &transitionPropertyNames) {
+  for (auto it = interpolators_.begin(); it != interpolators_.end();) {
+    // Remove property interpolators for properties not specified in the
+    // transition property names
+    if (transitionPropertyNames.find(it->first) == transitionPropertyNames.end()) {
+      it = interpolators_.erase(it);
+    } else {
+      ++it;
+    }
+  }
+}
+
+void TransitionStyleInterpolator::updateInterpolatedProperties(
+    const ChangedProps &changedProps,
+    const folly::dynamic &lastUpdateValue) {
+  const auto &oldPropsObj = changedProps.oldProps;
+  const auto &newPropsObj = changedProps.newProps;
+
+  const auto empty = folly::dynamic();
+
+  for (const auto &propertyName : changedProps.changedPropertyNames) {
+    auto it = interpolators_.find(propertyName);
+    const auto shouldCreateInterpolator = it == interpolators_.end();
+
+    if (shouldCreateInterpolator) {
+      const auto newInterpolator = createPropertyInterpolator(
+          propertyName, {}, getComponentInterpolators(componentName_), viewStylesRepository_);
+      it = interpolators_.emplace(propertyName, newInterpolator).first;
+    }
+
+    const auto &oldValue = oldPropsObj.getDefault(propertyName, empty);
+    const auto &newValue = newPropsObj.getDefault(propertyName, empty);
+    // Pass lastValue only if the interpolator is updated (no new interpolator
+    // was created), otherwise pass an empty value
+    const auto &lastValue =
+        (shouldCreateInterpolator || lastUpdateValue.empty()) ? empty : lastUpdateValue.getDefault(propertyName, empty);
+
+    it->second->updateKeyframesFromStyleChange(oldValue, newValue, lastValue);
+  }
+}
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/interpolation/styles/TransitionStyleInterpolator.h

@@ -0,0 +1,42 @@
+#pragma once
+
+#include <reanimated/CSS/InterpolatorRegistry.h>
+#include <reanimated/CSS/common/definitions.h>
+#include <reanimated/CSS/interpolation/groups/RecordPropertiesInterpolator.h>
+#include <reanimated/CSS/progress/TransitionProgressProvider.h>
+
+#include <memory>
+#include <string>
+#include <unordered_map>
+#include <unordered_set>
+
+namespace reanimated::css {
+
+class TransitionStyleInterpolator {
+ public:
+  TransitionStyleInterpolator(
+      const std::string &componentName,
+      const std::shared_ptr<ViewStylesRepository> &viewStylesRepository);
+
+  std::unordered_set<std::string> getReversedPropertyNames(const folly::dynamic &newPropertyValues) const;
+
+  folly::dynamic interpolate(
+      const std::shared_ptr<const ShadowNode> &shadowNode,
+      const TransitionProgressProvider &transitionProgressProvider,
+      const std::unordered_set<std::string> &allowDiscreteProperties) const;
+
+  void discardFinishedInterpolators(const TransitionProgressProvider &transitionProgressProvider);
+  void discardIrrelevantInterpolators(const std::unordered_set<std::string> &transitionPropertyNames);
+  void updateInterpolatedProperties(const ChangedProps &changedProps, const folly::dynamic &lastUpdateValue);
+
+ private:
+  using MapInterpolatorsCallback = std::function<
+      folly::dynamic(const std::shared_ptr<PropertyInterpolator> &, const std::shared_ptr<KeyframeProgressProvider> &)>;
+
+  const std::string componentName_;
+  const std::shared_ptr<ViewStylesRepository> viewStylesRepository_;
+
+  PropertyInterpolatorsRecord interpolators_;
+};
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/interpolation/transforms/TransformOperation.cpp

@@ -0,0 +1,224 @@
+#include <reanimated/CSS/interpolation/transforms/TransformOperation.h>
+
+#include <reanimated/CSS/common/transforms/TransformMatrix2D.h>
+#include <reanimated/CSS/common/transforms/TransformMatrix3D.h>
+#include <reanimated/CSS/common/values/CSSAngle.h>
+#include <reanimated/CSS/common/values/CSSLength.h>
+#include <reanimated/CSS/common/values/CSSNumber.h>
+
+#include <reanimated/CSS/interpolation/transforms/operations/matrix.h>
+#include <reanimated/CSS/interpolation/transforms/operations/perspective.h>
+#include <reanimated/CSS/interpolation/transforms/operations/rotate.h>
+#include <reanimated/CSS/interpolation/transforms/operations/scale.h>
+#include <reanimated/CSS/interpolation/transforms/operations/skew.h>
+#include <reanimated/CSS/interpolation/transforms/operations/translate.h>
+
+#include <utility>
+
+namespace reanimated::css {
+
+std::string createConversionErrorMessage(const TransformOp fromType, const TransformOp toType) {
+  return "[Reanimated] Cannot convert transform operation of type: " + getTransformOperationName(fromType) +
+      " to type: " + getTransformOperationName(toType);
+}
+
+TransformOperation::TransformOperation(TransformOp type) : StyleOperation(static_cast<uint8_t>(type)) {}
+
+bool TransformOperation::canConvertTo(const TransformOp targetType) const {
+  return false;
+}
+
+void TransformOperation::assertCanConvertTo(const TransformOp targetType) const {
+  if (!canConvertTo(targetType)) {
+    throw std::invalid_argument(createConversionErrorMessage(static_cast<TransformOp>(type), targetType));
+  }
+}
+
+TransformOperations TransformOperation::convertTo(const TransformOp targetType) const {
+  throw std::invalid_argument(createConversionErrorMessage(static_cast<TransformOp>(type), targetType));
+}
+
+std::string TransformOperation::getOperationName() const {
+  return getTransformOperationName(static_cast<TransformOp>(type));
+}
+
+bool TransformOperation::is3D() const {
+  return false;
+}
+
+std::shared_ptr<TransformOperation> TransformOperation::fromJSIValue(jsi::Runtime &rt, const jsi::Value &value) {
+  if (!value.isObject()) {
+    throw std::invalid_argument("[Reanimated] TransformOperation must be an object.");
+  }
+
+  jsi::Object obj = value.asObject(rt);
+  auto propertyNames = obj.getPropertyNames(rt);
+
+  if (propertyNames.size(rt) != 1) {
+    throw std::invalid_argument("[Reanimated] TransformOperation must have exactly one property.");
+  }
+
+  const auto propertyName = propertyNames.getValueAtIndex(rt, 0).asString(rt).utf8(rt);
+  const auto propertyValue = obj.getProperty(rt, jsi::PropNameID::forUtf8(rt, propertyName));
+  const TransformOp operationType = getTransformOperationType(propertyName);
+
+  switch (operationType) {
+    case TransformOp::Perspective:
+      return std::make_shared<PerspectiveOperation>(propertyValue.asNumber());
+    case TransformOp::Rotate:
+      return std::make_shared<RotateOperation>(propertyValue.asString(rt).utf8(rt));
+    case TransformOp::RotateX:
+      return std::make_shared<RotateXOperation>(propertyValue.asString(rt).utf8(rt));
+    case TransformOp::RotateY:
+      return std::make_shared<RotateYOperation>(propertyValue.asString(rt).utf8(rt));
+    case TransformOp::RotateZ:
+      return std::make_shared<RotateZOperation>(propertyValue.asString(rt).utf8(rt));
+    case TransformOp::Scale:
+      return std::make_shared<ScaleOperation>(propertyValue.asNumber());
+    case TransformOp::ScaleX:
+      return std::make_shared<ScaleXOperation>(propertyValue.asNumber());
+    case TransformOp::ScaleY:
+      return std::make_shared<ScaleYOperation>(propertyValue.asNumber());
+    case TransformOp::TranslateX: {
+      if (propertyValue.isNumber()) {
+        return std::make_shared<TranslateXOperation>(propertyValue.asNumber());
+      }
+      return std::make_shared<TranslateXOperation>(propertyValue.asString(rt).utf8(rt));
+    }
+    case TransformOp::TranslateY: {
+      if (propertyValue.isNumber()) {
+        return std::make_shared<TranslateYOperation>(propertyValue.asNumber());
+      }
+      return std::make_shared<TranslateYOperation>(propertyValue.asString(rt).utf8(rt));
+    }
+    case TransformOp::SkewX:
+      return std::make_shared<SkewXOperation>(propertyValue.asString(rt).utf8(rt));
+    case TransformOp::SkewY:
+      return std::make_shared<SkewYOperation>(propertyValue.asString(rt).utf8(rt));
+    case TransformOp::Matrix:
+      return std::make_shared<MatrixOperation>(rt, propertyValue);
+    default:
+      throw std::invalid_argument("[Reanimated] Unknown transform operation: " + propertyName);
+  }
+}
+
+std::shared_ptr<TransformOperation> TransformOperation::fromDynamic(const folly::dynamic &value) {
+  if (!value.isObject()) {
+    throw std::invalid_argument("[Reanimated] TransformOperation must be an object.");
+  }
+
+  auto &obj = value;
+  if (obj.size() != 1) {
+    throw std::invalid_argument("[Reanimated] TransformOperation must have exactly one property.");
+  }
+
+  auto propertyName = obj.items().begin()->first.getString();
+  auto propertyValue = obj.items().begin()->second;
+  const TransformOp operationType = getTransformOperationType(propertyName);
+
+  switch (operationType) {
+    case TransformOp::Perspective:
+      return std::make_shared<PerspectiveOperation>(propertyValue.getDouble());
+    case TransformOp::Rotate:
+      return std::make_shared<RotateOperation>(propertyValue.getString());
+    case TransformOp::RotateX:
+      return std::make_shared<RotateXOperation>(propertyValue.getString());
+    case TransformOp::RotateY:
+      return std::make_shared<RotateYOperation>(propertyValue.getString());
+    case TransformOp::RotateZ:
+      return std::make_shared<RotateZOperation>(propertyValue.getString());
+    case TransformOp::Scale:
+      return std::make_shared<ScaleOperation>(propertyValue.getDouble());
+    case TransformOp::ScaleX:
+      return std::make_shared<ScaleXOperation>(propertyValue.getDouble());
+    case TransformOp::ScaleY:
+      return std::make_shared<ScaleYOperation>(propertyValue.getDouble());
+    case TransformOp::TranslateX: {
+      if (propertyValue.isNumber()) {
+        return std::make_shared<TranslateXOperation>(propertyValue.getDouble());
+      }
+      return std::make_shared<TranslateXOperation>(propertyValue.getString());
+    }
+    case TransformOp::TranslateY: {
+      if (propertyValue.isNumber()) {
+        return std::make_shared<TranslateYOperation>(propertyValue.getDouble());
+      }
+      return std::make_shared<TranslateYOperation>(propertyValue.getString());
+    }
+    case TransformOp::SkewX:
+      return std::make_shared<SkewXOperation>(propertyValue.getString());
+    case TransformOp::SkewY:
+      return std::make_shared<SkewYOperation>(propertyValue.getString());
+    case TransformOp::Matrix:
+      return std::make_shared<MatrixOperation>(propertyValue);
+    default:
+      throw std::invalid_argument("[Reanimated] Unknown transform operation: " + propertyName);
+  }
+}
+
+// TransformOperationBase implementation
+template <TransformOp TOperation, typename TValue>
+TransformOperationBase<TOperation, TValue>::TransformOperationBase(TValue value)
+    : TransformOperation(TOperation), value(std::move(value)) {}
+
+template <TransformOp TOperation, typename TValue>
+TransformMatrix::Shared TransformOperationBase<TOperation, TValue>::toMatrix(bool force3D) const {
+  if constexpr (Resolvable<TValue>) {
+    // Handle resolvable operations
+    throw std::runtime_error("[Reanimated] Cannot convert resolvable operation to matrix: " + getOperationName());
+  } else {
+    // Handle regular operations
+    const auto shouldBe3D = this->is3D() || force3D;
+
+    if (cachedMatrix_) {
+      const auto resultDimension = shouldBe3D ? MATRIX_3D_DIMENSION : MATRIX_2D_DIMENSION;
+      if (cachedMatrix_->getDimension() == resultDimension) {
+        return cachedMatrix_;
+      }
+    }
+
+    TransformMatrix::Shared result;
+    if (shouldBe3D) {
+      result = std::make_shared<const TransformMatrix3D>(TransformMatrix3D::create<TOperation>(this->value.value));
+    } else {
+      result = std::make_shared<const TransformMatrix2D>(TransformMatrix2D::create<TOperation>(this->value.value));
+    }
+
+    cachedMatrix_ = result;
+    return result;
+  }
+}
+
+template <TransformOp TOperation, typename TValue>
+folly::dynamic TransformOperationBase<TOperation, TValue>::valueToDynamic() const {
+  return value.toDynamic();
+}
+
+template <TransformOp TOperation, typename TValue>
+bool TransformOperationBase<TOperation, TValue>::areValuesEqual(const StyleOperation &other) const {
+  return value == static_cast<const TransformOperationBase<TOperation, TValue> &>(other).value;
+}
+
+// Rotate operations
+template struct TransformOperationBase<TransformOp::Rotate, CSSAngle>;
+template struct TransformOperationBase<TransformOp::RotateZ, CSSAngle>;
+template struct TransformOperationBase<TransformOp::RotateX, CSSAngle>;
+template struct TransformOperationBase<TransformOp::RotateY, CSSAngle>;
+
+// Translate operations
+template struct TransformOperationBase<TransformOp::TranslateX, CSSLength>;
+template struct TransformOperationBase<TransformOp::TranslateY, CSSLength>;
+
+// Scale operations
+template struct TransformOperationBase<TransformOp::ScaleX, CSSDouble>;
+template struct TransformOperationBase<TransformOp::ScaleY, CSSDouble>;
+template struct TransformOperationBase<TransformOp::Scale, CSSDouble>;
+
+// Skew operations
+template struct TransformOperationBase<TransformOp::SkewX, CSSAngle>;
+template struct TransformOperationBase<TransformOp::SkewY, CSSAngle>;
+
+// Perspective operation
+template struct TransformOperationBase<TransformOp::Perspective, CSSDouble>;
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/interpolation/transforms/TransformOperation.h

@@ -0,0 +1,52 @@
+#pragma once
+
+#include <reanimated/CSS/common/transforms/TransformMatrix.h>
+#include <reanimated/CSS/common/transforms/TransformOp.h>
+#include <reanimated/CSS/interpolation/operations/StyleOperation.h>
+
+#include <jsi/jsi.h>
+#include <memory>
+#include <string>
+#include <vector>
+
+namespace reanimated::css {
+
+using namespace facebook;
+
+// Base struct for TransformOperation
+struct TransformOperation : public StyleOperation {
+  explicit TransformOperation(TransformOp type);
+
+  // Tells if the transform operations is 3D-only (cannot be represented in 2D)
+  virtual bool is3D() const;
+
+  std::string getOperationName() const override;
+
+  static std::shared_ptr<TransformOperation> fromJSIValue(jsi::Runtime &rt, const jsi::Value &value);
+  static std::shared_ptr<TransformOperation> fromDynamic(const folly::dynamic &value);
+
+  virtual bool canConvertTo(TransformOp type) const;
+  virtual std::vector<std::shared_ptr<TransformOperation>> convertTo(TransformOp type) const;
+  void assertCanConvertTo(TransformOp type) const;
+
+  virtual TransformMatrix::Shared toMatrix(bool force3D) const = 0;
+};
+
+using TransformOperations = std::vector<std::shared_ptr<TransformOperation>>;
+
+// Base implementation for transform operations (except for MatrixOperation)
+template <TransformOp TOperation, typename TValue>
+struct TransformOperationBase : public TransformOperation {
+  const TValue value;
+
+  explicit TransformOperationBase(TValue value);
+  TransformMatrix::Shared toMatrix(bool force3D) const override;
+
+ protected:
+  mutable TransformMatrix::Shared cachedMatrix_;
+
+  folly::dynamic valueToDynamic() const override;
+  bool areValuesEqual(const StyleOperation &other) const override;
+};
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/interpolation/transforms/TransformOperationInterpolator.cpp

@@ -0,0 +1,218 @@
+#include <reanimated/CSS/interpolation/transforms/TransformOperationInterpolator.h>
+
+#include <reanimated/CSS/interpolation/transforms/operations/rotate.h>
+#include <reanimated/CSS/interpolation/transforms/operations/scale.h>
+#include <reanimated/CSS/interpolation/transforms/operations/skew.h>
+#include <reanimated/CSS/interpolation/transforms/operations/translate.h>
+
+#include <utility>
+
+namespace reanimated::css {
+
+// Base implementation for simple operations
+template <typename TOperation, typename TEnable>
+std::unique_ptr<StyleOperation> TransformOperationInterpolator<TOperation, TEnable>::interpolate(
+    double progress,
+    const std::shared_ptr<StyleOperation> &from,
+    const std::shared_ptr<StyleOperation> &to,
+    const StyleOperationsInterpolationContext & /* context */) const {
+  const auto &fromOp = *std::static_pointer_cast<TOperation>(from);
+  const auto &toOp = *std::static_pointer_cast<TOperation>(to);
+  return std::make_unique<TOperation>(fromOp.value.interpolate(progress, toOp.value));
+}
+
+// Specialization for PerspectiveOperation
+TransformOperationInterpolator<PerspectiveOperation, void>::TransformOperationInterpolator(
+    const std::shared_ptr<PerspectiveOperation> &defaultOperation)
+    : StyleOperationInterpolator(defaultOperation) {}
+
+std::unique_ptr<StyleOperation> TransformOperationInterpolator<PerspectiveOperation, void>::interpolate(
+    double progress,
+    const std::shared_ptr<StyleOperation> &from,
+    const std::shared_ptr<StyleOperation> &to,
+    const StyleOperationsInterpolationContext & /* context */) const {
+  // TODO - check if this implementation is correct
+  const auto &fromValue = std::static_pointer_cast<PerspectiveOperation>(from)->value;
+  const auto &toValue = std::static_pointer_cast<PerspectiveOperation>(to)->value;
+
+  if (fromValue.value == 0)
+    return std::make_unique<PerspectiveOperation>(toValue);
+  if (toValue.value == 0)
+    return std::make_unique<PerspectiveOperation>(fromValue);
+
+  return std::make_unique<PerspectiveOperation>(fromValue.interpolate(progress, toValue));
+}
+
+// Specialization for MatrixOperation
+TransformOperationInterpolator<MatrixOperation, void>::TransformOperationInterpolator(
+    const std::shared_ptr<MatrixOperation> &defaultOperation)
+    : StyleOperationInterpolator(defaultOperation) {}
+
+std::unique_ptr<StyleOperation> TransformOperationInterpolator<MatrixOperation, void>::interpolate(
+    double progress,
+    const std::shared_ptr<StyleOperation> &from,
+    const std::shared_ptr<StyleOperation> &to,
+    const StyleOperationsInterpolationContext &context) const {
+  const auto fromOperation = std::static_pointer_cast<TransformOperation>(from);
+  const auto toOperation = std::static_pointer_cast<TransformOperation>(to);
+  const auto shouldBe3D = fromOperation->is3D() || toOperation->is3D();
+
+  const auto fromMatrix = matrixFromOperation(fromOperation, shouldBe3D, context);
+  const auto toMatrix = matrixFromOperation(toOperation, shouldBe3D, context);
+
+  if (shouldBe3D) {
+    return std::make_unique<MatrixOperation>(interpolateMatrix<TransformMatrix3D>(progress, fromMatrix, toMatrix));
+  }
+
+  const auto result2D = interpolateMatrix<TransformMatrix2D>(progress, fromMatrix, toMatrix);
+
+  // Unfortunately 2D matrices aren't handled properly in RN, so we have to
+  // convert them to 3D
+  // see the issue: https://github.com/facebook/react-native/issues/53639
+  return std::make_unique<MatrixOperation>(TransformMatrix3D::from2D(result2D));
+}
+
+template <typename MatrixType>
+MatrixType TransformOperationInterpolator<MatrixOperation, void>::interpolateMatrix(
+    double progress,
+    const TransformMatrix::Shared &from,
+    const TransformMatrix::Shared &to) const {
+  const auto fromMatrix = std::static_pointer_cast<const MatrixType>(from);
+  const auto toMatrix = std::static_pointer_cast<const MatrixType>(to);
+  const auto decomposedFrom = fromMatrix->decompose();
+  const auto decomposedTo = toMatrix->decompose();
+
+  if (!decomposedFrom.has_value() || !decomposedTo.has_value()) {
+    return progress < 0.5 ? *fromMatrix : *toMatrix;
+  }
+
+  return MatrixType::recompose(decomposedFrom->interpolate(progress, decomposedTo.value()));
+}
+
+TransformMatrix::Shared TransformOperationInterpolator<MatrixOperation, void>::matrixFromOperation(
+    const std::shared_ptr<TransformOperation> &operation,
+    const bool shouldBe3D,
+    const StyleOperationsInterpolationContext &context) const {
+  const auto &matrixOperation = std::static_pointer_cast<MatrixOperation>(operation);
+
+  if (std::holds_alternative<TransformMatrix::Shared>(matrixOperation->value)) {
+    const auto &matrix = std::get<TransformMatrix::Shared>(matrixOperation->value);
+
+    if (shouldBe3D && !matrixOperation->is3D()) {
+      return std::make_shared<TransformMatrix3D>(
+          TransformMatrix3D::from2D(static_cast<const TransformMatrix2D &>(*matrix)));
+    }
+
+    return matrix;
+  }
+
+  const auto &operations = std::get<TransformOperations>(matrixOperation->value);
+
+  // Map over operations and resolve unresolved ones
+  TransformOperations resolvedOperations;
+  resolvedOperations.reserve(operations.size());
+
+  std::transform(
+      operations.begin(),
+      operations.end(),
+      std::back_inserter(resolvedOperations),
+      [&](const auto &operation) -> std::shared_ptr<TransformOperation> {
+        if (operation->shouldResolve()) {
+          const auto &interpolator = context.interpolators->at(operation->type);
+          return std::static_pointer_cast<TransformOperation>(interpolator->resolveOperation(operation, context));
+        }
+
+        return operation;
+      });
+
+  if (shouldBe3D) {
+    return std::make_shared<TransformMatrix3D>(matrixFromOperations3D(resolvedOperations));
+  }
+  return std::make_shared<TransformMatrix2D>(matrixFromOperations2D(resolvedOperations));
+}
+
+// Explicit template instantiations
+template TransformMatrix2D TransformOperationInterpolator<MatrixOperation, void>::interpolateMatrix<TransformMatrix2D>(
+    double,
+    const TransformMatrix::Shared &,
+    const TransformMatrix::Shared &) const;
+template TransformMatrix3D TransformOperationInterpolator<MatrixOperation, void>::interpolateMatrix<TransformMatrix3D>(
+    double,
+    const TransformMatrix::Shared &,
+    const TransformMatrix::Shared &) const;
+
+// Specialization for resolvable operations
+template <typename TOperation>
+TransformOperationInterpolator<
+    TOperation,
+    std::enable_if_t<ResolvableOp<TOperation> && !std::is_same_v<TOperation, PerspectiveOperation> && !std::is_same_v<TOperation, MatrixOperation>>>::TransformOperationInterpolator(
+    const std::shared_ptr<TOperation> &defaultOperation,
+    ResolvableValueInterpolatorConfig config)
+    : StyleOperationInterpolator(defaultOperation), config_(std::move(config)) {}
+
+template <typename TOperation>
+std::unique_ptr<StyleOperation> TransformOperationInterpolator<
+    TOperation,
+    std::enable_if_t<ResolvableOp<TOperation> && !std::is_same_v<TOperation, PerspectiveOperation> && !std::is_same_v<TOperation, MatrixOperation>>>::interpolate(
+    double progress,
+    const std::shared_ptr<StyleOperation> &from,
+    const std::shared_ptr<StyleOperation> &to,
+    const StyleOperationsInterpolationContext &context) const {
+  const auto &fromOp = *std::static_pointer_cast<TOperation>(from);
+  const auto &toOp = *std::static_pointer_cast<TOperation>(to);
+
+  return std::make_unique<TOperation>(
+      fromOp.value.interpolate(progress, toOp.value, getResolvableValueContext(context)));
+}
+
+template <typename TOperation>
+std::shared_ptr<StyleOperation> TransformOperationInterpolator<
+    TOperation,
+    std::enable_if_t<ResolvableOp<TOperation> && !std::is_same_v<TOperation, PerspectiveOperation> && !std::is_same_v<TOperation, MatrixOperation>>>::resolveOperation(
+    const std::shared_ptr<StyleOperation> &operation,
+    const StyleOperationsInterpolationContext &context) const {
+  const auto &resolvableOp = std::static_pointer_cast<TOperation>(operation);
+  const auto &resolved = resolvableOp->value.resolve(getResolvableValueContext(context));
+
+  if (!resolved.has_value()) {
+    throw std::invalid_argument(
+        "[Reanimated] Cannot resolve resolvable operation: " + operation->getOperationName() +
+        " for node with tag: " + std::to_string(context.node->getTag()));
+  }
+
+  return std::make_shared<TOperation>(resolved.value());
+}
+
+template <typename TOperation>
+ResolvableValueInterpolationContext TransformOperationInterpolator<
+    TOperation,
+    std::enable_if_t<ResolvableOp<TOperation> && !std::is_same_v<TOperation, PerspectiveOperation> && !std::is_same_v<TOperation, MatrixOperation>>>::getResolvableValueContext(
+    const StyleOperationsInterpolationContext &context) const {
+  return ResolvableValueInterpolationContext{
+      .node = context.node,
+      .fallbackInterpolateThreshold = context.fallbackInterpolateThreshold,
+      .viewStylesRepository = context.viewStylesRepository,
+      .relativeProperty = config_.relativeProperty,
+      .relativeTo = config_.relativeTo};
+}
+
+// Rotate operations
+template class TransformOperationInterpolator<RotateOperation, void>;
+template class TransformOperationInterpolator<RotateXOperation, void>;
+template class TransformOperationInterpolator<RotateYOperation, void>;
+template class TransformOperationInterpolator<RotateZOperation, void>;
+
+// Scale operations
+template class TransformOperationInterpolator<ScaleOperation, void>;
+template class TransformOperationInterpolator<ScaleXOperation, void>;
+template class TransformOperationInterpolator<ScaleYOperation, void>;
+
+// Skew operations
+template class TransformOperationInterpolator<SkewXOperation, void>;
+template class TransformOperationInterpolator<SkewYOperation, void>;
+
+// Translate operations (resolvable)
+template class TransformOperationInterpolator<TranslateXOperation>;
+template class TransformOperationInterpolator<TranslateYOperation>;
+
+} // namespace reanimated::css