@react-native-ohos/react-native-reanimated 4.0.2-beta.1 → 4.1.0-beta.1

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/common/values/CSSDiscreteArray.cpp

@@ -5,13 +5,13 @@
 
 namespace reanimated::css {
 
-template <typename TValue>
+template <CSSValueDerived TValue>
 CSSDiscreteArray<TValue>::CSSDiscreteArray() : values() {}
 
-template <typename TValue>
+template <CSSValueDerived TValue>
 CSSDiscreteArray<TValue>::CSSDiscreteArray(const std::vector<TValue> &values) : values(values) {}
 
-template <typename TValue>
+template <CSSValueDerived TValue>
 CSSDiscreteArray<TValue>::CSSDiscreteArray(jsi::Runtime &rt, const jsi::Value &jsiValue) {
   const auto &array = jsiValue.asObject(rt).asArray(rt);
   values.reserve(array.size(rt));
@@ -21,7 +21,7 @@ CSSDiscreteArray<TValue>::CSSDiscreteArray(jsi::Runtime &rt, const jsi::Value &j
   }
 }
 
-template <typename TValue>
+template <CSSValueDerived TValue>
 CSSDiscreteArray<TValue>::CSSDiscreteArray(const folly::dynamic &array) {
   values.reserve(array.size());
 
@@ -30,18 +30,18 @@ CSSDiscreteArray<TValue>::CSSDiscreteArray(const folly::dynamic &array) {
   }
 }
 
-template <typename TValue>
+template <CSSValueDerived TValue>
 bool CSSDiscreteArray<TValue>::canConstruct(jsi::Runtime &rt, const jsi::Value &jsiValue) {
   // TODO - maybe add better validation
   return jsiValue.isObject() && jsiValue.asObject(rt).isArray(rt);
 }
 
-template <typename TValue>
+template <CSSValueDerived TValue>
 bool CSSDiscreteArray<TValue>::canConstruct(const folly::dynamic &value) {
   return value.isArray();
 }
 
-template <typename TValue>
+template <CSSValueDerived TValue>
 folly::dynamic CSSDiscreteArray<TValue>::toDynamic() const {
   folly::dynamic array = folly::dynamic::array;
   for (const auto &value : values) {
@@ -50,7 +50,7 @@ folly::dynamic CSSDiscreteArray<TValue>::toDynamic() const {
   return array;
 }
 
-template <typename TValue>
+template <CSSValueDerived TValue>
 std::string CSSDiscreteArray<TValue>::toString() const {
   std::stringstream ss;
 
@@ -66,13 +66,13 @@ std::string CSSDiscreteArray<TValue>::toString() const {
   return ss.str();
 }
 
-template <typename TValue>
+template <CSSValueDerived TValue>
 CSSDiscreteArray<TValue> CSSDiscreteArray<TValue>::interpolate(double progress, const CSSDiscreteArray<TValue> &other)
     const {
   return CSSDiscreteArray<TValue>(progress < 0.5 ? values : other.values);
 }
 
-template <typename TValue>
+template <CSSValueDerived TValue>
 bool CSSDiscreteArray<TValue>::operator==(const CSSDiscreteArray<TValue> &other) const {
   if (values.size() != other.values.size()) {
     return false;
@@ -87,7 +87,7 @@ bool CSSDiscreteArray<TValue>::operator==(const CSSDiscreteArray<TValue> &other)
 
 #ifndef NDEBUG
 
-template <typename TValue>
+template <CSSValueDerived TValue>
 std::ostream &operator<<(std::ostream &os, const CSSDiscreteArray<TValue> &arrayValue) {
   os << "CSSDiscreteArray(" << arrayValue.toString() << ")";
   return os;

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/common/values/CSSDiscreteArray.h

@@ -2,23 +2,19 @@
 
 #include <reanimated/CSS/common/values/CSSKeyword.h>
 
-#include <sstream>
 #include <string>
 #include <vector>
-#include <worklets/Tools/JSISerializer.h>
-#include <type_traits> 
 
 namespace reanimated::css {
-using namespace worklets;
+
 /*
  * CSSDiscreteArray is used for array interpolation when arrays need to be
  * treated as discrete values. Instead of interpolating between corresponding
  * elements of two arrays, this type interpolates between entire arrays
  * treated as single discrete values.
  */
-template <typename TValue>
+template <CSSValueDerived TValue>
 struct CSSDiscreteArray : public CSSSimpleValue<CSSDiscreteArray<TValue>> {
-  static_assert(CSSValueDerived<TValue>, "TValue must be derived from CSSValue");      
   static constexpr bool is_discrete_value = true;
 
   std::vector<TValue> values;

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/common/values/CSSLength.cpp

@@ -107,7 +107,10 @@ std::optional<double> CSSLength::resolve(const ResolvableValueInterpolationConte
 }
 
 bool CSSLength::operator==(const CSSLength &other) const {
-  return value == other.value && isRelative == other.isRelative;
+  if (isRelative == other.isRelative) {
+    return value == other.value;
+  }
+  return value == 0 && other.value == 0;
 }
 
 #ifndef NDEBUG

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/common/values/CSSNumber.cpp

@@ -55,8 +55,13 @@ CSSInteger CSSInteger::interpolate(double progress, const CSSInteger &other) con
   return CSSInteger(static_cast<int>(std::round(value + progress * (other.value - value))));
 }
 
+CSSIndex CSSIndex::interpolate(double progress, const CSSIndex &other) const {
+  return CSSIndex(progress < 0.5 ? value : other.value);
+}
+
 template struct CSSNumberBase<CSSDouble, double>;
 template struct CSSNumberBase<CSSInteger, int>;
+template struct CSSNumberBase<CSSIndex, int>;
 
 #ifdef ANDROID
 

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/common/values/CSSNumber.h

@@ -39,6 +39,7 @@ struct CSSDouble : public CSSNumberBase<CSSDouble, double> {
   // Inherit all constructors from the base class
   using CSSNumberBase::CSSNumberBase;
 };
+
 struct CSSInteger : public CSSNumberBase<CSSInteger, int> {
   // Inherit all constructors from the base class
   using CSSNumberBase::CSSNumberBase;
@@ -46,6 +47,13 @@ struct CSSInteger : public CSSNumberBase<CSSInteger, int> {
   CSSInteger interpolate(double progress, const CSSInteger &other) const override;
 };
 
+struct CSSIndex : public CSSNumberBase<CSSIndex, int> {
+  // Inherit all constructors from the base class
+  using CSSNumberBase::CSSNumberBase;
+
+  CSSIndex interpolate(double progress, const CSSIndex &other) const override;
+};
+
 #ifdef ANDROID
 
 // For some reason Android crashes when blurRadius is smaller than 1 so we use a

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/common/values/CSSValue.h

@@ -5,6 +5,7 @@
 #include <memory>
 #include <string>
 #include <type_traits>
+#include <typeinfo>
 
 namespace reanimated::css {
 
@@ -34,6 +35,8 @@ struct CSSValue {
 
   virtual ~CSSValue() = default;
 
+  virtual bool operator==(const CSSValue &other) const = 0;
+
   virtual folly::dynamic toDynamic() const = 0;
   virtual std::string toString() const = 0;
 };
@@ -43,6 +46,11 @@ template <typename TDerived>
 struct CSSSimpleValue : public CSSValue {
   static constexpr bool is_resolvable_value = false;
 
+  bool operator==(const CSSValue &other) const override {
+    return typeid(*this) == typeid(other) &&
+        *static_cast<const TDerived *>(this) == static_cast<const TDerived &>(other);
+  }
+
   virtual TDerived interpolate(double progress, const TDerived &to) const = 0;
   virtual bool canInterpolateTo(const TDerived &to) const {
     return true;
@@ -54,9 +62,16 @@ template <typename TDerived, typename TResolved = TDerived>
 struct CSSResolvableValue : public CSSValue {
   static constexpr bool is_resolvable_value = true;
 
+  bool operator==(const CSSValue &other) const override {
+    return typeid(*this) == typeid(other) &&
+        *static_cast<const TDerived *>(this) == static_cast<const TDerived &>(other);
+  }
+
   virtual TDerived interpolate(double progress, const TDerived &to, const ResolvableValueInterpolationContext &context)
       const = 0;
-  virtual std::optional<TResolved> resolve(const ResolvableValueInterpolationContext &context) const = 0;
+  virtual std::optional<TResolved> resolve(const ResolvableValueInterpolationContext &context) const {
+    return std::nullopt;
+  }
   virtual bool canInterpolateTo(const TDerived &to) const {
     return true;
   }
@@ -64,55 +79,21 @@ struct CSSResolvableValue : public CSSValue {
 
 // Checks if a type is a resolvable value that needs resolution before
 // interpolation
-//template <typename TCSSValue>
-//concept Resolvable = requires {
-//  { TCSSValue::is_resolvable_value } -> std::convertible_to<bool>;
-//  requires TCSSValue::is_resolvable_value == true;
-//};
-//TODO        
-namespace detail {
-    template <typename T>
-    auto test_resolvable(int) -> std::enable_if_t<
-        std::is_convertible_v<decltype(T::is_resolvable_value), bool> && 
-        T::is_resolvable_value == true,
-        std::true_type
-    >;
-    template <typename>
-    auto test_resolvable(...) -> std::false_type;
-}
-
 template <typename TCSSValue>
-constexpr bool Resolvable = decltype(detail::test_resolvable<TCSSValue>(0))::value;
-    
-    
-    
-// Checks if a type is a discrete value
-//template <typename TCSSValue>
-//concept Discrete = requires {
-//  { TCSSValue::is_discrete_value } -> std::convertible_to<bool>;
-//  requires TCSSValue::is_discrete_value == true;
-//};
-//TODO    
-namespace detail {
-    template <typename T>
-    auto test_discrete(int) -> std::enable_if_t<
-        std::is_convertible_v<decltype(T::is_discrete_value), bool> && 
-        T::is_discrete_value == true,
-        std::true_type
-    >;
-    template <typename>
-    auto test_discrete(...) -> std::false_type;
-}
+concept Resolvable = requires {
+  { TCSSValue::is_resolvable_value } -> std::convertible_to<bool>;
+  requires TCSSValue::is_resolvable_value == true;
+};
 
+// Checks if a type is a discrete value
 template <typename TCSSValue>
-constexpr bool Discrete = decltype(detail::test_discrete<TCSSValue>(0))::value;
-
+concept Discrete = requires {
+  { TCSSValue::is_discrete_value } -> std::convertible_to<bool>;
+  requires TCSSValue::is_discrete_value == true;
+};
 
 // Check if a type is derived from CSSValue
-//template <typename TCSSValue>
-//concept CSSValueDerived = std::is_base_of_v<CSSValue, TCSSValue>;
-//TODO        
-template<typename TCSSValue>
-constexpr bool CSSValueDerived = std::is_base_of_v<CSSValue, TCSSValue>;
+template <typename TCSSValue>
+concept CSSValueDerived = std::is_base_of_v<CSSValue, TCSSValue>;
 
 } // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/common/values/CSSValueVariant.cpp

@@ -7,11 +7,12 @@
 #include <reanimated/CSS/common/values/CSSNumber.h>
 #include <reanimated/CSS/common/values/CSSValueVariant.h>
 #include <reanimated/CSS/common/values/complex/CSSBoxShadow.h>
+#include <reanimated/CSS/svg/values/CSSLengthArray.h>
 #include <reanimated/CSS/svg/values/SVGBrush.h>
-#include <reanimated/CSS/svg/values/SVGLength.h>
+#include <reanimated/CSS/svg/values/SVGPath.h>
+#include <reanimated/CSS/svg/values/SVGStops.h>
 #include <reanimated/CSS/svg/values/SVGStrokeDashArray.h>
-
-#include <worklets/Tools/JSISerializer.h>
+#include <reanimated/Compat/WorkletsApi.h>
 
 #include <string>
 #include <utility>
@@ -19,11 +20,11 @@
 
 namespace reanimated::css {
 
-template <typename... AllowedTypes>
+template <CSSValueDerived... AllowedTypes>
 CSSValueVariant<AllowedTypes...>::CSSValueVariant(std::variant<AllowedTypes...> &&storage)
     : storage_(std::move(storage)) {}
 
-template <typename... AllowedTypes>
+template <CSSValueDerived... AllowedTypes>
 CSSValueVariant<AllowedTypes...>::CSSValueVariant(jsi::Runtime &rt, const jsi::Value &jsiValue) {
   auto tryOne = [&]<typename TCSSValue>() -> bool {
     // We have to check in a runtime if the type can be constructed from the
@@ -39,11 +40,11 @@ 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: " + worklets::stringifyJSIValue(rt, jsiValue));
+        "[Reanimated] No compatible type found for construction from: " + worklets::JSIValueToStdString(rt, jsiValue));
   }
 }
 
-template <typename... AllowedTypes>
+template <CSSValueDerived... AllowedTypes>
 CSSValueVariant<AllowedTypes...>::CSSValueVariant(const folly::dynamic &value) {
   auto tryOne = [&]<typename TCSSValue>() -> bool {
     // We have to check in a runtime if the type can be constructed from the
@@ -62,7 +63,7 @@ CSSValueVariant<AllowedTypes...>::CSSValueVariant(const folly::dynamic &value) {
   }
 }
 
-template <typename... AllowedTypes>
+template <CSSValueDerived... AllowedTypes>
 bool CSSValueVariant<AllowedTypes...>::operator==(const CSSValueVariant &other) const {
   if (storage_.index() != other.storage_.index()) {
     return false;
@@ -79,25 +80,22 @@ bool CSSValueVariant<AllowedTypes...>::operator==(const CSSValueVariant &other)
       other.storage_);
 }
 
-template <typename... AllowedTypes>
+template <CSSValueDerived... AllowedTypes>
 bool CSSValueVariant<AllowedTypes...>::operator==(const CSSValue &other) const {
-  if (auto *o = dynamic_cast<const CSSValueVariant *>(&other)) {
-    return *this == *o;
-  }
-  return false;
+  return typeid(*this) == typeid(other) && *this == static_cast<const CSSValueVariant &>(other);
 }
 
-template <typename... AllowedTypes>
+template <CSSValueDerived... AllowedTypes>
 folly::dynamic CSSValueVariant<AllowedTypes...>::toDynamic() const {
   return std::visit([](const auto &v) { return v.toDynamic(); }, storage_);
 }
 
-template <typename... AllowedTypes>
+template <CSSValueDerived... AllowedTypes>
 std::string CSSValueVariant<AllowedTypes...>::toString() const {
   return std::visit([](const auto &v) { return v.toString(); }, storage_);
 }
 
-template <typename... AllowedTypes>
+template <CSSValueDerived... AllowedTypes>
 CSSValueVariant<AllowedTypes...> CSSValueVariant<AllowedTypes...>::interpolate(
     const double progress,
     const CSSValueVariant &to,
@@ -121,7 +119,7 @@ CSSValueVariant<AllowedTypes...> CSSValueVariant<AllowedTypes...>::interpolate(
       to.storage_);
 }
 
-template <typename... AllowedTypes>
+template <CSSValueDerived... AllowedTypes>
 CSSValueVariant<AllowedTypes...> CSSValueVariant<AllowedTypes...>::interpolate(
     const double progress,
     const CSSValueVariant &to,
@@ -145,7 +143,7 @@ CSSValueVariant<AllowedTypes...> CSSValueVariant<AllowedTypes...>::interpolate(
       to.storage_);
 }
 
-template <typename... AllowedTypes>
+template <CSSValueDerived... AllowedTypes>
 CSSValueVariant<AllowedTypes...> CSSValueVariant<AllowedTypes...>::fallbackInterpolate(
     const double progress,
     const CSSValueVariant &to,
@@ -158,6 +156,7 @@ template class CSSValueVariant<CSSLength, CSSKeyword>;
 template class CSSValueVariant<CSSDouble>;
 template class CSSValueVariant<CSSDouble, CSSKeyword>;
 template class CSSValueVariant<CSSInteger>;
+template class CSSValueVariant<CSSIndex>;
 template class CSSValueVariant<CSSKeyword>;
 template class CSSValueVariant<CSSAngle>;
 template class CSSValueVariant<CSSBoolean>;
@@ -166,8 +165,9 @@ template class CSSValueVariant<CSSDisplay>;
 template class CSSValueVariant<CSSBoxShadow>;
 template class CSSValueVariant<CSSDiscreteArray<CSSKeyword>>;
 
-template class CSSValueVariant<SVGLength>;
-template class CSSValueVariant<SVGLength, CSSKeyword>;
+template class CSSValueVariant<SVGPath>;
+template class CSSValueVariant<CSSLengthArray>;
+template class CSSValueVariant<SVGStops>;
 template class CSSValueVariant<SVGStrokeDashArray, CSSKeyword>;
 template class CSSValueVariant<SVGBrush>;
 

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/common/values/CSSValueVariant.h

@@ -52,7 +52,7 @@ concept DynamicConstructibleCSSValue = requires(const folly::dynamic &value) {
  *
  * A std::variant-based container for multiple CSSValue-derived types.
  */
-template <typename... AllowedTypes>
+template <CSSValueDerived... AllowedTypes>
 class CSSValueVariant final : public CSSValue {
   static_assert(
       (JSIConstructibleCSSValue<AllowedTypes> && ...),
@@ -82,7 +82,7 @@ class CSSValueVariant final : public CSSValue {
   explicit CSSValueVariant(const folly::dynamic &value);
 
   bool operator==(const CSSValueVariant &other) const;
-  bool operator==(const CSSValue &other) const;
+  bool operator==(const CSSValue &other) const override;
 
   folly::dynamic toDynamic() const override;
   std::string toString() const override;

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/common/values/complex/CSSDropShadow.h

@@ -26,10 +26,10 @@ struct CSSDropShadow : public CSSSimpleValue<CSSDropShadow> {
   static bool canConstruct(const folly::dynamic &value);
   static bool canConstruct(jsi::Runtime &rt, const jsi::Value &jsiValue);
 
-  folly::dynamic toDynamic() const;
-  std::string toString() const;
+  folly::dynamic toDynamic() const override;
+  std::string toString() const override;
 
-  CSSDropShadow interpolate(double progress, const CSSDropShadow &to) const;
+  CSSDropShadow interpolate(double progress, const CSSDropShadow &to) const override;
 
   bool operator==(const CSSDropShadow &other) const;
 

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/configs/CSSAnimationConfig.cpp

@@ -8,6 +8,14 @@
 
 namespace reanimated::css {
 
+bool CSSAnimationSettings::hasForwardsFillMode() const {
+  return fillMode == AnimationFillMode::Forwards || fillMode == AnimationFillMode::Both;
+}
+
+bool CSSAnimationSettings::hasBackwardsFillMode() const {
+  return fillMode == AnimationFillMode::Backwards || fillMode == AnimationFillMode::Both;
+}
+
 double getIterationCount(jsi::Runtime &rt, const jsi::Object &settings) {
   return settings.getProperty(rt, "iterationCount").asNumber();
 }
@@ -59,7 +67,7 @@ CSSAnimationSettings parseCSSAnimationSettings(jsi::Runtime &rt, const jsi::Valu
 
   return {
       getDuration(rt, settingsObj),
-      getTimingFunction(rt, settingsObj),
+      getEasingConfig(rt, settingsObj),
       getDelay(rt, settingsObj),
       getIterationCount(rt, settingsObj),
       getDirection(rt, settingsObj),
@@ -76,7 +84,7 @@ PartialCSSAnimationSettings parsePartialCSSAnimationSettings(jsi::Runtime &rt, c
     result.duration = getDuration(rt, partialObj);
   }
   if (partialObj.hasProperty(rt, "timingFunction")) {
-    result.easingFunction = getTimingFunction(rt, partialObj);
+    result.easingConfig = getEasingConfig(rt, partialObj);
   }
   if (partialObj.hasProperty(rt, "delay")) {
     result.delay = getDelay(rt, partialObj);

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/configs/CSSAnimationConfig.h

@@ -2,7 +2,6 @@
 
 #include <reanimated/CSS/configs/CSSKeyframesConfig.h>
 #include <reanimated/CSS/configs/common.h>
-#include <reanimated/CSS/easing/EasingFunctions.h>
 
 #include <optional>
 #include <string>
@@ -17,17 +16,20 @@ enum class AnimationPlayState : std::uint8_t { Running, Paused };
 
 struct CSSAnimationSettings {
   double duration;
-  EasingFunction easingFunction;
+  EasingConfig easingConfig;
   double delay;
   double iterationCount;
   AnimationDirection direction;
   AnimationFillMode fillMode;
   AnimationPlayState playState;
+
+  bool hasForwardsFillMode() const;
+  bool hasBackwardsFillMode() const;
 };
 
 struct PartialCSSAnimationSettings {
   std::optional<double> duration;
-  std::optional<EasingFunction> easingFunction;
+  std::optional<EasingConfig> easingConfig;
   std::optional<double> delay;
   std::optional<double> iterationCount;
   std::optional<AnimationDirection> direction;

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/configs/CSSKeyframesConfig.cpp

@@ -1,45 +1,48 @@
 #include <reanimated/CSS/configs/CSSKeyframesConfig.h>
 
+#include <reanimated/CSS/configs/common.h>
+
 #include <memory>
 #include <string>
 
 namespace reanimated::css {
 
-std::shared_ptr<AnimationStyleInterpolator> createStyleInterpolator(
+std::shared_ptr<AnimationStyleInterpolatorFactory> createStyleInterpolatorFactory(
     jsi::Runtime &rt,
     const jsi::Object &config,
-    const std::string &componentName,
+    const std::string &nativeComponentName,
     const std::shared_ptr<ViewStylesRepository> &viewStylesRepository) {
-  return std::make_shared<AnimationStyleInterpolator>(
-      rt, config.getProperty(rt, "keyframesStyle"), componentName, viewStylesRepository);
+  return std::make_shared<AnimationStyleInterpolatorFactory>(
+      rt, config.getProperty(rt, "propKeyframes"), nativeComponentName, viewStylesRepository);
 }
 
-std::shared_ptr<KeyframeEasingFunctions> getKeyframeTimingFunctions(jsi::Runtime &rt, const jsi::Object &config) {
-  KeyframeEasingFunctions result;
-  const auto &keyframeTimingFunctions = config.getProperty(rt, "keyframeTimingFunctions").asObject(rt);
-  const auto timingFunctionOffsets = keyframeTimingFunctions.getPropertyNames(rt);
-  const auto timingFunctionsCount = timingFunctionOffsets.size(rt);
+std::shared_ptr<KeyframeEasingConfigs> getKeyframeTimingConfigs(jsi::Runtime &rt, const jsi::Object &config) {
+  KeyframeEasingConfigs result;
+  const auto &keyframeTimingConfigs = config.getProperty(rt, "keyframeTimingFunctions").asObject(rt);
+  const auto timingConfigOffsets = keyframeTimingConfigs.getPropertyNames(rt);
+  const auto timingConfigsCount = timingConfigOffsets.size(rt);
 
-  for (size_t i = 0; i < timingFunctionsCount; ++i) {
-    const auto offset = timingFunctionOffsets.getValueAtIndex(rt, i).asString(rt).utf8(rt);
-    const auto easingFunction = createEasingFunction(rt, keyframeTimingFunctions.getProperty(rt, offset.c_str()));
+  for (size_t i = 0; i < timingConfigsCount; ++i) {
+    const auto offset = timingConfigOffsets.getValueAtIndex(rt, i).asString(rt).utf8(rt);
+    const auto easingConfig = getEasingConfig(rt, keyframeTimingConfigs.getProperty(rt, offset.c_str()));
 
-    result[std::stod(offset)] = easingFunction;
+    result[std::stod(offset)] = easingConfig;
   }
 
-  return std::make_shared<KeyframeEasingFunctions>(result);
+  return std::make_shared<KeyframeEasingConfigs>(result);
 }
 
 CSSKeyframesConfig parseCSSAnimationKeyframesConfig(
     jsi::Runtime &rt,
     const jsi::Value &config,
-    const std::string &componentName,
+    const std::string &compoundComponentName,
     const std::shared_ptr<ViewStylesRepository> &viewStylesRepository) {
   const auto &configObj = config.asObject(rt);
+  const auto nativeComponentName = splitCompoundComponentName(compoundComponentName).first;
 
   return {
-      createStyleInterpolator(rt, configObj, componentName, viewStylesRepository),
-      getKeyframeTimingFunctions(rt, configObj)};
+      createStyleInterpolatorFactory(rt, configObj, nativeComponentName, viewStylesRepository),
+      getKeyframeTimingConfigs(rt, configObj)};
 }
 
 } // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/configs/CSSKeyframesConfig.h

@@ -1,26 +1,23 @@
 #pragma once
 
-#include <reanimated/CSS/easing/EasingFunctions.h>
-#include <reanimated/CSS/interpolation/styles/AnimationStyleInterpolator.h>
+#include <reanimated/CSS/easing/EasingConfigs.h>
+#include <reanimated/CSS/interpolation/styles/AnimationStyleInterpolatorFactory.h>
 #include <reanimated/CSS/misc/ViewStylesRepository.h>
 
 #include <memory>
 #include <string>
-#include <unordered_map>
 
 namespace reanimated::css {
 
-using KeyframeEasingFunctions = std::unordered_map<double, EasingFunction>;
-
 struct CSSKeyframesConfig {
-  std::shared_ptr<AnimationStyleInterpolator> styleInterpolator;
-  std::shared_ptr<KeyframeEasingFunctions> keyframeEasingFunctions;
+  std::shared_ptr<AnimationStyleInterpolatorFactory> styleInterpolatorFactory;
+  std::shared_ptr<KeyframeEasingConfigs> keyframeEasingConfigs;
 };
 
 CSSKeyframesConfig parseCSSAnimationKeyframesConfig(
     jsi::Runtime &rt,
     const jsi::Value &config,
-    const std::string &componentName,
+    const std::string &compoundComponentName,
     const std::shared_ptr<ViewStylesRepository> &viewStylesRepository);
 
 } // namespace reanimated::css