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

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

@@ -0,0 +1,51 @@
+#pragma once
+
+#include <reanimated/CSS/interpolation/transforms/TransformOperation.h>
+
+#include <memory>
+
+namespace reanimated::css {
+
+template <TransformOp TOperation>
+struct ScaleOperationBase
+    : public TransformOperationBase<TOperation, CSSDouble> {
+  using TransformOperationBase<TOperation, CSSDouble>::TransformOperationBase;
+
+  explicit ScaleOperationBase(const double value)
+      : TransformOperationBase<TOperation, CSSDouble>(CSSDouble(value)) {}
+
+  folly::dynamic valueToDynamic() const override {
+    return this->value.toDynamic();
+  }
+
+  TransformMatrix3D toMatrix() const override {
+    return TransformMatrix3D::create<TOperation>(this->value.value);
+  }
+};
+
+using ScaleXOperation = ScaleOperationBase<TransformOp::ScaleX>;
+
+using ScaleYOperation = ScaleOperationBase<TransformOp::ScaleY>;
+
+struct ScaleOperation final : public ScaleOperationBase<TransformOp::Scale> {
+  using ScaleOperationBase<TransformOp::Scale>::ScaleOperationBase;
+
+  bool canConvertTo(TransformOp type) const override {
+    return type == TransformOp::ScaleX || type == TransformOp::ScaleY;
+  }
+
+  TransformOperations convertTo(TransformOp type) const override {
+    assertCanConvertTo(type);
+    if (type == TransformOp::ScaleX) {
+      return {
+          std::make_shared<ScaleXOperation>(value),
+          std::make_shared<ScaleYOperation>(value)};
+    } else {
+      return {
+          std::make_shared<ScaleYOperation>(value),
+          std::make_shared<ScaleXOperation>(value)};
+    }
+  }
+};
+
+} // namespace reanimated::css

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

@@ -0,0 +1,29 @@
+#pragma once
+
+#include <reanimated/CSS/interpolation/transforms/TransformOperation.h>
+
+#include <string>
+
+namespace reanimated::css {
+
+template <TransformOp TOperation>
+struct SkewOperationBase : public TransformOperationBase<TOperation, CSSAngle> {
+  using TransformOperationBase<TOperation, CSSAngle>::TransformOperationBase;
+
+  explicit SkewOperationBase(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 SkewXOperation = SkewOperationBase<TransformOp::SkewX>;
+
+using SkewYOperation = SkewOperationBase<TransformOp::SkewY>;
+
+} // namespace reanimated::css

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

@@ -0,0 +1,40 @@
+#pragma once
+
+#include <reanimated/CSS/interpolation/transforms/TransformOperation.h>
+
+#include <string>
+
+namespace reanimated::css {
+
+template <TransformOp TOperation>
+struct TranslateOperationBase
+    : public TransformOperationBase<TOperation, CSSLength> {
+  using TransformOperationBase<TOperation, CSSLength>::TransformOperationBase;
+
+  explicit TranslateOperationBase(double value)
+      : TransformOperationBase<TOperation, CSSLength>(CSSLength(value)) {}
+  explicit TranslateOperationBase(const std::string &value)
+      : TransformOperationBase<TOperation, CSSLength>(CSSLength(value)) {}
+
+  bool isRelative() const override {
+    return this->value.isRelative;
+  }
+
+  folly::dynamic valueToDynamic() const override {
+    return this->value.toDynamic();
+  }
+
+  TransformMatrix3D toMatrix() const override {
+    if (this->value.isRelative) {
+      throw std::invalid_argument(
+          "[Reanimated] Cannot convert relative translate to the matrix.");
+    }
+    return TransformMatrix3D::create<TOperation>(this->value.value);
+  }
+};
+
+using TranslateXOperation = TranslateOperationBase<TransformOp::TranslateX>;
+
+using TranslateYOperation = TranslateOperationBase<TransformOp::TranslateY>;
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/interpolation/values/ResolvableValueInterpolator.h

@@ -1,6 +1,6 @@
 #pragma once
 
-#include <reanimated/CSS/common/values/CSSDimension.h>
+#include <reanimated/CSS/common/values/CSSLength.h>
 #include <reanimated/CSS/interpolation/values/ValueInterpolator.h>
 
 #include <memory>

package/Common/cpp/reanimated/CSS/interpolation/values/ValueInterpolator.h

@@ -2,7 +2,7 @@
 
 #include <reanimated/CSS/common/values/CSSValueVariant.h>
 #include <reanimated/CSS/interpolation/PropertyInterpolator.h>
-#include <reanimated/CSS/util/keyframes.h>
+#include <reanimated/CSS/utils/keyframes.h>
 
 #include <memory>
 #include <string>
@@ -74,17 +74,17 @@ class ValueInterpolator : public PropertyInterpolator {
     return reversingAdjustedStartValue_.value() == ValueType(propertyValue);
   }
 
-  void updateKeyframes(const folly::dynamic &keyframes) override {
-    const auto parsedKeyframes = parseDynamicKeyframes(keyframes);
+  void updateKeyframes(jsi::Runtime &rt, const jsi::Value &keyframes) override {
+    const auto parsedKeyframes = parseJSIKeyframes(rt, keyframes);
 
     keyframes_.clear();
     keyframes_.reserve(parsedKeyframes.size());
 
     for (const auto &[offset, value] : parsedKeyframes) {
-      if (value.isNull()) {
+      if (value.isUndefined()) {
         keyframes_.push_back(KeyframeType{offset, std::nullopt});
       } else {
-        keyframes_.push_back(KeyframeType{offset, ValueType(value)});
+        keyframes_.push_back(KeyframeType{offset, ValueType(rt, value)});
       }
     }
   }

package/Common/cpp/reanimated/CSS/misc/ViewStylesRepository.h

@@ -1,7 +1,7 @@
 #pragma once
 
 #include <reanimated/CSS/common/definitions.h>
-#include <reanimated/CSS/registry/StaticPropsRegistry.h>
+#include <reanimated/CSS/registries/StaticPropsRegistry.h>
 #include <reanimated/Fabric/updates/AnimatedPropsRegistry.h>
 
 #include <react/renderer/components/view/ViewProps.h>

package/Common/cpp/reanimated/CSS/progress/AnimationProgressProvider.h

@@ -1,7 +1,7 @@
 #pragma once
 
-#include <reanimated/CSS/config/CSSAnimationConfig.h>
-#include <reanimated/CSS/config/CSSKeyframesConfig.h>
+#include <reanimated/CSS/configs/CSSAnimationConfig.h>
+#include <reanimated/CSS/configs/CSSKeyframesConfig.h>
 #include <reanimated/CSS/easing/EasingFunctions.h>
 #include <reanimated/CSS/progress/KeyframeProgressProvider.h>
 #include <reanimated/CSS/progress/RawProgressProvider.h>

package/Common/cpp/reanimated/CSS/progress/TransitionProgressProvider.h

@@ -1,9 +1,9 @@
 #pragma once
 
-#include <reanimated/CSS/config/CSSTransitionConfig.h>
+#include <reanimated/CSS/configs/CSSTransitionConfig.h>
 #include <reanimated/CSS/progress/KeyframeProgressProvider.h>
 #include <reanimated/CSS/progress/RawProgressProvider.h>
-#include <reanimated/CSS/util/props.h>
+#include <reanimated/CSS/utils/props.h>
 
 #include <limits>
 #include <memory>

package/Common/cpp/reanimated/CSS/{registry → registries}/CSSAnimationsRegistry.cpp

@@ -1,4 +1,4 @@
-#include <reanimated/CSS/registry/CSSAnimationsRegistry.h>
+#include <reanimated/CSS/registries/CSSAnimationsRegistry.h>
 
 namespace reanimated::css {
 

package/Common/cpp/reanimated/CSS/{registry → registries}/CSSAnimationsRegistry.h

@@ -1,9 +1,9 @@
 #pragma once
 
-#include <reanimated/CSS/config/CSSAnimationConfig.h>
+#include <reanimated/CSS/configs/CSSAnimationConfig.h>
 #include <reanimated/CSS/core/CSSAnimation.h>
-#include <reanimated/CSS/util/DelayedItemsManager.h>
-#include <reanimated/CSS/util/props.h>
+#include <reanimated/CSS/utils/DelayedItemsManager.h>
+#include <reanimated/CSS/utils/props.h>
 #include <reanimated/Fabric/updates/UpdatesRegistry.h>
 
 #include <memory>

package/Common/cpp/reanimated/CSS/registries/CSSKeyframesRegistry.cpp

@@ -0,0 +1,47 @@
+#include <reanimated/CSS/registries/CSSKeyframesRegistry.h>
+
+namespace reanimated::css {
+
+CSSKeyframesRegistry::CSSKeyframesRegistry(
+    const std::shared_ptr<ViewStylesRepository> &viewStylesRepository)
+    : viewStylesRepository_(viewStylesRepository) {}
+
+const CSSKeyframesConfig &CSSKeyframesRegistry::get(
+    const std::string &animationName,
+    const std::string &componentName) {
+  const auto &registryIt = registry_.find(animationName);
+  if (registryIt == registry_.end()) {
+    throw std::runtime_error(
+        "[Reanimated] No keyframes with name `" + animationName +
+        "` were registered");
+  }
+
+  const auto &keyframesByComponentName = registryIt->second;
+  const auto &keyframesByComponentNameIt =
+      keyframesByComponentName.find(componentName);
+  if (keyframesByComponentNameIt == keyframesByComponentName.end()) {
+    throw std::runtime_error(
+        "[Reanimated] No keyframes with name `" + animationName +
+        "` were registered for component `" + componentName + "`");
+  }
+
+  return keyframesByComponentNameIt->second;
+}
+
+void CSSKeyframesRegistry::set(
+    const std::string &animationName,
+    const std::string &componentName,
+    CSSKeyframesConfig &&config) {
+  registry_[animationName][componentName] = std::move(config);
+}
+
+void CSSKeyframesRegistry::remove(
+    const std::string &animationName,
+    const std::string &componentName) {
+  registry_[animationName].erase(componentName);
+  if (registry_[animationName].empty()) {
+    registry_.erase(animationName);
+  }
+}
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/registries/CSSKeyframesRegistry.h

@@ -0,0 +1,38 @@
+#pragma once
+
+#include <reanimated/CSS/configs/CSSKeyframesConfig.h>
+#include <reanimated/CSS/interpolation/styles/AnimationStyleInterpolator.h>
+#include <reanimated/CSS/misc/ViewStylesRepository.h>
+
+#include <memory>
+#include <string>
+#include <unordered_map>
+#include <utility>
+
+namespace reanimated::css {
+
+class CSSKeyframesRegistry {
+ public:
+  CSSKeyframesRegistry(
+      const std::shared_ptr<ViewStylesRepository> &viewStylesRepository);
+
+  const CSSKeyframesConfig &get(
+      const std::string &animationName,
+      const std::string &componentName);
+  void set(
+      const std::string &animationName,
+      const std::string &componentName,
+      CSSKeyframesConfig &&config);
+  void remove(
+      const std::string &animationName,
+      const std::string &componentName);
+
+ private:
+  using ConfigsByComponentName =
+      std::unordered_map<std::string, CSSKeyframesConfig>;
+
+  std::unordered_map<std::string, ConfigsByComponentName> registry_;
+  const std::shared_ptr<ViewStylesRepository> viewStylesRepository_;
+};
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/{registry → registries}/CSSTransitionsRegistry.cpp

@@ -1,4 +1,4 @@
-#include <reanimated/CSS/registry/CSSTransitionsRegistry.h>
+#include <reanimated/CSS/registries/CSSTransitionsRegistry.h>
 
 namespace reanimated::css {
 

package/Common/cpp/reanimated/CSS/{registry → registries}/CSSTransitionsRegistry.h

@@ -1,9 +1,9 @@
 #pragma once
 
 #include <reanimated/CSS/core/CSSTransition.h>
-#include <reanimated/CSS/registry/StaticPropsRegistry.h>
-#include <reanimated/CSS/util/DelayedItemsManager.h>
-#include <reanimated/CSS/util/props.h>
+#include <reanimated/CSS/registries/StaticPropsRegistry.h>
+#include <reanimated/CSS/utils/DelayedItemsManager.h>
+#include <reanimated/CSS/utils/props.h>
 #include <reanimated/Fabric/updates/UpdatesRegistry.h>
 #include <reanimated/Tools/PlatformDepMethodsHolder.h>
 

package/Common/cpp/reanimated/CSS/{registry → registries}/StaticPropsRegistry.cpp

@@ -1,4 +1,4 @@
-#include <reanimated/CSS/registry/StaticPropsRegistry.h>
+#include <reanimated/CSS/registries/StaticPropsRegistry.h>
 
 namespace reanimated::css {
 

package/Common/cpp/reanimated/CSS/svg/configs/init.cpp

@@ -0,0 +1,15 @@
+#include <reanimated/CSS/svg/configs/init.h>
+
+namespace reanimated::css {
+
+void initSvgCssSupport() {
+  registerComponentInterpolators("RNSVGCircle", SVG_CIRCLE_INTERPOLATORS);
+  registerComponentInterpolators("RNSVGEllipse", SVG_ELLIPSE_INTERPOLATORS);
+  registerComponentInterpolators("RNSVGLine", SVG_LINE_INTERPOLATORS);
+  registerComponentInterpolators("RNSVGPath", SVG_PATH_INTERPOLATORS);
+  registerComponentInterpolators("RNSVGRect", SVG_RECT_INTERPOLATORS);
+
+  // TODO: Add more SVG components as they are implemented
+}
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/svg/configs/init.h

@@ -0,0 +1,15 @@
+#pragma once
+
+#include <reanimated/CSS/configs/interpolators/registry.h>
+
+#include <reanimated/CSS/svg/configs/interpolators/circle.h>
+#include <reanimated/CSS/svg/configs/interpolators/ellipse.h>
+#include <reanimated/CSS/svg/configs/interpolators/line.h>
+#include <reanimated/CSS/svg/configs/interpolators/path.h>
+#include <reanimated/CSS/svg/configs/interpolators/rect.h>
+
+namespace reanimated::css {
+
+void initSvgCssSupport();
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/svg/configs/interpolators/circle.h

@@ -0,0 +1,16 @@
+#pragma once
+
+#include <reanimated/CSS/svg/configs/interpolators/common.h>
+
+namespace reanimated::css {
+
+const InterpolatorFactoriesRecord SVG_CIRCLE_INTERPOLATORS = mergeInterpolators(
+    SVG_COMMON_INTERPOLATORS,
+    InterpolatorFactoriesRecord{
+        {"cx", value<SVGLength, CSSKeyword>(0)},
+        {"cy", value<SVGLength, CSSKeyword>(0)},
+        {"r", value<SVGLength, CSSKeyword>(0)},
+        {"opacity", value<CSSDouble>(1)},
+    });
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/svg/configs/interpolators/common.h

@@ -0,0 +1,65 @@
+#pragma once
+
+#include <reanimated/CSS/interpolation/InterpolatorFactory.h>
+
+#include <reanimated/CSS/configs/interpolators/constants.h>
+#include <reanimated/CSS/configs/interpolators/utils.h>
+
+#include <reanimated/CSS/common/values/CSSColor.h>
+#include <reanimated/CSS/common/values/CSSKeyword.h>
+#include <reanimated/CSS/common/values/CSSNumber.h>
+
+#include <reanimated/CSS/svg/values/SVGLength.h>
+#include <reanimated/CSS/svg/values/SVGStrokeDashArray.h>
+
+namespace reanimated::css {
+
+// TODO - check if default values are correct
+const InterpolatorFactoriesRecord SVG_COLOR_INTERPOLATORS = {
+    {"color", value<CSSColor>(BLACK)},
+};
+
+const InterpolatorFactoriesRecord SVG_FILL_INTERPOLATORS = {
+    {"fill", value<CSSColor>(BLACK)},
+    {"fillOpacity", value<CSSDouble>(1)},
+    {"fillRule", value<CSSInteger>(0)},
+};
+
+const InterpolatorFactoriesRecord SVG_STROKE_INTERPOLATORS = {
+    {"stroke", value<CSSColor>(BLACK)},
+    {"strokeWidth", value<SVGLength>(1)},
+    {"strokeOpacity", value<CSSDouble>(1)},
+    {"strokeDasharray",
+     value<SVGStrokeDashArray, CSSKeyword>(SVGStrokeDashArray())},
+    {"strokeDashoffset", value<SVGLength>(0)},
+    {"strokeLinecap", value<CSSInteger>(0)},
+    {"strokeLinejoin", value<CSSInteger>(0)},
+    {"strokeMiterlimit", value<CSSDouble>(4)},
+    {"vectorEffect", value<CSSInteger>(0)},
+};
+
+const InterpolatorFactoriesRecord SVG_CLIP_INTERPOLATORS = {
+    {"clipRule", value<CSSKeyword>("nonzero")},
+    // TODO - check which strings values it takes (keyword is added as a
+    // placeholder here)
+    {"clipPath", value<CSSKeyword>("none")},
+};
+
+const InterpolatorFactoriesRecord SVG_TRANSFORM_INTERPOLATORS = {
+    {"translateX", value<SVGLength>(0)},
+    {"translateY", value<SVGLength>(0)},
+    {"originX", value<SVGLength>(0)},
+    {"originY", value<SVGLength>(0)},
+    {"scaleX", value<CSSDouble>(1)},
+    {"scaleY", value<CSSDouble>(1)},
+    {"skewX", value<CSSAngle>(0)},
+    {"skewY", value<CSSAngle>(0)},
+    {"rotation", value<CSSAngle>(0)},
+};
+
+const InterpolatorFactoriesRecord SVG_COMMON_INTERPOLATORS = mergeInterpolators(
+    SVG_COLOR_INTERPOLATORS,
+    SVG_FILL_INTERPOLATORS,
+    SVG_STROKE_INTERPOLATORS);
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/svg/configs/interpolators/ellipse.h

@@ -0,0 +1,18 @@
+#pragma once
+
+#include <reanimated/CSS/svg/configs/interpolators/common.h>
+
+namespace reanimated::css {
+
+const InterpolatorFactoriesRecord SVG_ELLIPSE_INTERPOLATORS =
+    mergeInterpolators(
+        SVG_COMMON_INTERPOLATORS,
+        InterpolatorFactoriesRecord{
+            {"cx", value<SVGLength, CSSKeyword>(0)},
+            {"cy", value<SVGLength, CSSKeyword>(0)},
+            {"rx", value<SVGLength, CSSKeyword>(0)},
+            {"ry", value<SVGLength, CSSKeyword>(0)},
+            {"opacity", value<CSSDouble>(1)},
+        });
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/svg/configs/interpolators/line.h

@@ -0,0 +1,17 @@
+#pragma once
+
+#include <reanimated/CSS/svg/configs/interpolators/common.h>
+
+namespace reanimated::css {
+
+const InterpolatorFactoriesRecord SVG_LINE_INTERPOLATORS = mergeInterpolators(
+    SVG_COMMON_INTERPOLATORS,
+    InterpolatorFactoriesRecord{
+        {"x1", value<SVGLength, CSSKeyword>(0)},
+        {"y1", value<SVGLength, CSSKeyword>(0)},
+        {"x2", value<SVGLength, CSSKeyword>(0)},
+        {"y2", value<SVGLength, CSSKeyword>(0)},
+        {"opacity", value<CSSDouble>(1)},
+    });
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/svg/configs/interpolators/path.h

@@ -0,0 +1,12 @@
+#pragma once
+
+#include <reanimated/CSS/svg/configs/interpolators/common.h>
+
+namespace reanimated::css {
+
+const InterpolatorFactoriesRecord SVG_PATH_INTERPOLATORS = mergeInterpolators(
+    SVG_COMMON_INTERPOLATORS,
+    // TODO - add more properties
+    InterpolatorFactoriesRecord{});
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/svg/configs/interpolators/rect.h

@@ -0,0 +1,19 @@
+#pragma once
+
+#include <reanimated/CSS/svg/configs/interpolators/common.h>
+
+namespace reanimated::css {
+
+const InterpolatorFactoriesRecord SVG_RECT_INTERPOLATORS = mergeInterpolators(
+    SVG_COMMON_INTERPOLATORS,
+    InterpolatorFactoriesRecord{
+        {"x", value<SVGLength, CSSKeyword>(0)},
+        {"y", value<SVGLength, CSSKeyword>(0)},
+        {"width", value<SVGLength, CSSKeyword>(0)},
+        {"height", value<SVGLength, CSSKeyword>(0)},
+        {"rx", value<SVGLength, CSSKeyword>(0)},
+        {"ry", value<SVGLength, CSSKeyword>(0)},
+        {"opacity", value<CSSDouble>(1)},
+    });
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/svg/values/SVGLength.cpp

@@ -0,0 +1,107 @@
+#include <reanimated/CSS/svg/values/SVGLength.h>
+
+namespace reanimated::css {
+
+SVGLength::SVGLength() : value(0), isPercentage(false) {}
+
+SVGLength::SVGLength(const double value) : value(value), isPercentage(false) {}
+
+SVGLength::SVGLength(const double value, const bool isPercentage)
+    : value(value), isPercentage(isPercentage) {}
+
+SVGLength::SVGLength(const char *value) {
+  if (!canConstruct(value)) {
+    throw std::invalid_argument(
+        "[Reanimated] SVGLength: Invalid value: " + std::string(value));
+  }
+
+  std::string str = value;
+  str.pop_back();
+  this->value = std::stod(str) / 100;
+  this->isPercentage = true;
+}
+
+SVGLength::SVGLength(jsi::Runtime &rt, const jsi::Value &jsiValue) {
+  if (jsiValue.isNumber()) {
+    this->value = jsiValue.asNumber();
+    this->isPercentage = false;
+  } else if (jsiValue.isString()) {
+    std::string strValue = jsiValue.asString(rt).utf8(rt);
+    *this = SVGLength(strValue); // Delegate to the string constructor
+  } else {
+    throw std::runtime_error("[Reanimated] SVGLength: Unsupported value type");
+  }
+}
+
+SVGLength::SVGLength(const folly::dynamic &value) {
+  if (value.isNumber()) {
+    this->value = value.getDouble();
+    this->isPercentage = false;
+  } else if (value.isString()) {
+    std::string strValue = value.getString();
+    *this = SVGLength(strValue.c_str()); // Delegate to the string constructor
+  } else {
+    throw std::runtime_error("[Reanimated] SVGLength: Unsupported value type");
+  }
+}
+
+bool SVGLength::canConstruct(const std::string &value) {
+  return !value.empty() && value.back() == '%';
+}
+
+bool SVGLength::canConstruct(const char *value) {
+  return canConstruct(std::string(value));
+}
+
+bool SVGLength::canConstruct(jsi::Runtime &rt, const jsi::Value &jsiValue) {
+  return jsiValue.isNumber() ||
+      (jsiValue.isString() && canConstruct(jsiValue.getString(rt).utf8(rt)));
+}
+
+bool SVGLength::canConstruct(const folly::dynamic &value) {
+  return value.isNumber() ||
+      (value.isString() && canConstruct(value.getString()));
+}
+
+folly::dynamic SVGLength::toDynamic() const {
+  if (isPercentage) {
+    return std::to_string(value * 100) + "%";
+  }
+  return value;
+}
+
+std::string SVGLength::toString() const {
+  if (isPercentage) {
+    return std::to_string(value * 100) + "%";
+  }
+  return std::to_string(value);
+}
+
+SVGLength SVGLength::interpolate(const double progress, const SVGLength &to)
+    const {
+  // We can interpolate SVG length values only if both values are percentages or
+  // both are numbers. In other cases, we interpolate them as keywords.
+  if ((isPercentage == to.isPercentage) || (isPercentage && to.value == 0) ||
+      (to.isPercentage && value == 0)) {
+    return SVGLength(
+        value + (to.value - value) * progress, isPercentage || to.isPercentage);
+  }
+
+  // Otherwise, we interpolate values as discrete values
+  return progress < 0.5 ? *this : to;
+}
+
+bool SVGLength::operator==(const SVGLength &other) const {
+  return value == other.value && isPercentage == other.isPercentage;
+}
+
+#ifndef NDEBUG
+
+std::ostream &operator<<(std::ostream &os, const SVGLength &value) {
+  os << "SVGLength(" << value.toString() << ")";
+  return os;
+}
+
+#endif // NDEBUG
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/svg/values/SVGLength.h

@@ -0,0 +1,36 @@
+#pragma once
+
+#include <reanimated/CSS/common/values/CSSValue.h>
+
+#include <string>
+
+namespace reanimated::css {
+
+struct SVGLength : public CSSSimpleValue<SVGLength> {
+  double value;
+  bool isPercentage;
+
+  SVGLength();
+  explicit SVGLength(double value);
+  explicit SVGLength(double value, bool isPercentage);
+  explicit SVGLength(const char *value);
+  explicit SVGLength(jsi::Runtime &rt, const jsi::Value &jsiValue);
+  explicit SVGLength(const folly::dynamic &value);
+
+  static bool canConstruct(const std::string &value);
+  static bool canConstruct(const char *value);
+  static bool canConstruct(jsi::Runtime &rt, const jsi::Value &jsiValue);
+  static bool canConstruct(const folly::dynamic &value);
+
+  folly::dynamic toDynamic() const override;
+  std::string toString() const override;
+  SVGLength interpolate(double progress, const SVGLength &to) const override;
+
+  bool operator==(const SVGLength &other) const;
+
+#ifndef NDEBUG
+  friend std::ostream &operator<<(std::ostream &os, const SVGLength &dimension);
+#endif // NDEBUG
+};
+
+} // namespace reanimated::css