chore: More detailed invalid CSS keyframes object error message (#8618)

## Summary

This PR adds more details to the error thrown when CSS animation
keyframes passed from JS aren't valid. It adds the property path to the
error message, as well as the value that is not valid. This should make
debugging simpler if problems like this occur in the future.

## Examples

| Before | After |
|-|-|
| <img width="1206" height="2622" alt="Simulator Screenshot - iPhone 17
Pro - 2025-11-18 at 16 38 50"
src="https://github.com/user-attachments/assets/c84c09ba-e68b-44d0-afbc-419884fe637f"
/> | <img width="1206" height="2622" alt="Simulator Screenshot - iPhone
17 Pro - 2025-11-18 at 16 46 57"
src="https://github.com/user-attachments/assets/cfca507f-6792-4f55-9468-e5be0658cd4b"
/> |

I have to check what happened to the `transformOrigin` property and why
it crashes now 😅

Author: MatiPl01

packages/react-native-reanimated/Common/cpp/reanimated/CSS/common/values/CSSValueVariant.cpp

@@ -11,6 +11,8 @@
 #include <reanimated/CSS/svg/values/SVGLength.h>
 #include <reanimated/CSS/svg/values/SVGStrokeDashArray.h>
 
+#include <worklets/Tools/JSISerializer.h>
+
 #include <string>
 #include <utility>
 #include <vector>
@@ -37,7 +39,7 @@ CSSValueVariant<AllowedTypes...>::CSSValueVariant(jsi::Runtime &rt, const jsi::V
   // Try constructing with each allowed type until one succeeds
   if (!(tryOne.template operator()<AllowedTypes>() || ...)) {
     throw std::runtime_error(
-        "[Reanimated] No compatible type found for construction from: " + stringifyJSIValue(rt, jsiValue));
+        "[Reanimated] No compatible type found for construction from: " + worklets::stringifyJSIValue(rt, jsiValue));
   }
 }
 

packages/react-native-reanimated/Common/cpp/reanimated/CSS/common/values/CSSValueVariant.h

@@ -1,7 +1,6 @@
 #pragma once
 
 #include <reanimated/CSS/common/values/CSSValue.h>
-#include <worklets/Tools/JSISerializer.h>
 
 #include <folly/json.h>
 
@@ -13,8 +12,6 @@
 
 namespace reanimated::css {
 
-using namespace worklets;
-
 /**
  * Macro to check if two lambda parameters have the same reference-removed type.
  *

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/PropertyInterpolator.cpp

@@ -1,5 +1,7 @@
 #include <reanimated/CSS/interpolation/PropertyInterpolator.h>
 
+#include <worklets/Tools/JSISerializer.h>
+
 #include <memory>
 #include <utility>
 
@@ -14,4 +16,61 @@ bool PropertyInterpolatorFactory::isDiscreteProperty() const {
   return false;
 }
 
+std::string PropertyInterpolator::getPropertyPathString() const {
+  if (propertyPath_.empty()) {
+    return "";
+  }
+
+  std::string result = propertyPath_[0];
+  for (size_t i = 1; i < propertyPath_.size(); ++i) {
+    result += "." + propertyPath_[i];
+  }
+  return result;
+}
+
+std::vector<std::pair<double, jsi::Value>> PropertyInterpolator::parseJSIKeyframes(
+    jsi::Runtime &rt,
+    const jsi::Value &keyframes) const {
+  if (!keyframes.isObject() || !keyframes.asObject(rt).isArray(rt)) {
+    throw std::invalid_argument(
+        "[Reanimated] Received invalid keyframes object for property: " + getPropertyPathString() +
+        ".\n\nExpected an array of objects with 'offset' and 'value' properties, got: " +
+        worklets::stringifyJSIValue(rt, keyframes));
+  }
+
+  const auto keyframeArray = keyframes.asObject(rt).asArray(rt);
+  const auto keyframesCount = keyframeArray.size(rt);
+
+  const auto getKeyframeAtIndexOffset = [&](size_t index) -> double {
+    return keyframeArray.getValueAtIndex(rt, index).asObject(rt).getProperty(rt, "offset").asNumber();
+  };
+
+  const bool hasOffset0 = getKeyframeAtIndexOffset(0) == 0;
+  const bool hasOffset1 = getKeyframeAtIndexOffset(keyframesCount - 1) == 1;
+
+  std::vector<std::pair<double, jsi::Value>> result;
+  result.reserve(keyframesCount + (hasOffset0 ? 0 : 1) + (hasOffset1 ? 0 : 1));
+
+  // Insert the keyframe without value at offset 0 if it is not present
+  if (!hasOffset0) {
+    result.emplace_back(0.0, jsi::Value::undefined());
+  }
+
+  // Insert all provided keyframes
+  for (size_t i = 0; i < keyframesCount; ++i) {
+    jsi::Object keyframeObject = keyframeArray.getValueAtIndex(rt, i).asObject(rt);
+    double offset = keyframeObject.getProperty(rt, "offset").asNumber();
+    jsi::Value value = keyframeObject.getProperty(rt, "value");
+
+    result.emplace_back(offset, std::move(value));
+  }
+
+  // Insert the keyframe without value at offset 1 if it is not present
+  if (!hasOffset1) {
+    result.emplace_back(1.0, jsi::Value::undefined());
+  }
+
+  return result;
+}
+
 } // namespace reanimated::css

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/PropertyInterpolator.h

@@ -8,6 +8,7 @@
 #include <memory>
 #include <string>
 #include <unordered_map>
+#include <utility>
 #include <vector>
 
 namespace reanimated::css {
@@ -38,6 +39,9 @@ class PropertyInterpolator {
  protected:
   const PropertyPath propertyPath_;
   const std::shared_ptr<ViewStylesRepository> viewStylesRepository_;
+
+  std::string getPropertyPathString() const;
+  std::vector<std::pair<double, jsi::Value>> parseJSIKeyframes(jsi::Runtime &rt, const jsi::Value &keyframes) const;
 };
 
 class PropertyInterpolatorFactory {

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/filters/FilterStyleInterpolator.h

@@ -2,7 +2,6 @@
 
 #include <reanimated/CSS/interpolation/PropertyInterpolator.h>
 #include <reanimated/CSS/interpolation/filters/FilterOperationInterpolator.h>
-#include <reanimated/CSS/utils/keyframes.h>
 
 #include <memory>
 #include <tuple>

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/transforms/TransformsStyleInterpolator.h

@@ -3,7 +3,6 @@
 #include <reanimated/CSS/interpolation/PropertyInterpolator.h>
 #include <reanimated/CSS/interpolation/transforms/TransformOperationInterpolator.h>
 #include <reanimated/CSS/interpolation/transforms/operations/matrix.h>
-#include <reanimated/CSS/utils/keyframes.h>
 
 #include <memory>
 #include <unordered_map>

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/values/ValueInterpolator.h

@@ -2,7 +2,6 @@
 
 #include <reanimated/CSS/common/values/CSSValueVariant.h>
 #include <reanimated/CSS/interpolation/PropertyInterpolator.h>
-#include <reanimated/CSS/utils/keyframes.h>
 
 #include <memory>
 #include <optional>