fix: Crashes during CSS transitions of complex properties

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

@@ -11,7 +11,6 @@ namespace reanimated {
 using namespace facebook;
 
 using PropertyNames = std::vector<std::string>;
-using PropertyValues = std::unique_ptr<jsi::Value>;
 using PropertyPath = std::vector<std::string>;
 /**
  * If nullopt - all style properties can trigger transition

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/CSSTransition.cpp

@@ -61,7 +61,7 @@ jsi::Value CSSTransition::run(
   progressProvider_.runProgressProviders(
       timestamp,
       changedProps.changedPropertyNames,
-      styleInterpolator_.getReversedPropertyNames(rt, *changedProps.newProps));
+      styleInterpolator_.getReversedPropertyNames(rt, changedProps.newProps));
   styleInterpolator_.updateInterpolatedProperties(
       rt, changedProps, progressProvider_.getPropertyProgressProviders());
 

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/groups/ArrayPropertiesInterpolator.cpp

@@ -52,21 +52,33 @@ void ArrayPropertiesInterpolator::updateKeyframesFromStyleChange(
     jsi::Runtime &rt,
     const jsi::Value &oldStyleValue,
     const jsi::Value &newStyleValue) {
-  const size_t valuesCount = newStyleValue.isObject()
-      ? newStyleValue.asObject(rt).asArray(rt).size(rt)
-      : oldStyleValue.asObject(rt).asArray(rt).size(rt);
+  auto getArrayFromStyle = [&rt](const jsi::Value &style) {
+    if (!style.isObject()) {
+      return jsi::Array(rt, 0);
+    }
+    auto obj = style.asObject(rt);
+    return obj.isArray(rt) ? obj.asArray(rt) : jsi::Array(rt, 0);
+  };
+
+  const auto oldStyleArray = getArrayFromStyle(oldStyleValue);
+  const auto newStyleArray = getArrayFromStyle(newStyleValue);
+
+  const size_t valuesCount =
+      std::max(oldStyleArray.size(rt), newStyleArray.size(rt));
 
   resizeInterpolators(valuesCount);
 
   for (size_t i = 0; i < valuesCount; ++i) {
-    interpolators_[i]->updateKeyframesFromStyleChange(
-        rt,
-        oldStyleValue.isObject()
-            ? oldStyleValue.asObject(rt).asArray(rt).getValueAtIndex(rt, i)
-            : jsi::Value::undefined(),
-        newStyleValue.isObject()
-            ? newStyleValue.asObject(rt).asArray(rt).getValueAtIndex(rt, i)
-            : jsi::Value::undefined());
+    // These index checks ensure that interpolation works between 2 arrays
+    // with different lengths
+    const auto oldValue = oldStyleArray.size(rt) > i
+        ? oldStyleArray.getValueAtIndex(rt, i)
+        : jsi::Value::undefined();
+    const auto newValue = newStyleArray.size(rt) > i
+        ? newStyleArray.getValueAtIndex(rt, i)
+        : jsi::Value::undefined();
+
+    interpolators_[i]->updateKeyframesFromStyleChange(rt, oldValue, newValue);
   }
 }
 

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

@@ -4,6 +4,7 @@
 #include <reanimated/CSS/interpolation/groups/GroupPropertiesInterpolator.h>
 #include <reanimated/CSS/util/interpolators.h>
 
+#include <algorithm>
 #include <memory>
 
 namespace reanimated {

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/groups/RecordPropertiesInterpolator.cpp

@@ -53,20 +53,9 @@ void RecordPropertiesInterpolator::updateKeyframes(
         propertyNames.getValueAtIndex(rt, i).asString(rt).utf8(rt);
     const jsi::Value &propertyKeyframes = keyframesObject.getProperty(
         rt, jsi::PropNameID::forUtf8(rt, propertyName));
-    auto interpolatorIt = interpolators_.find(propertyName);
-
-    if (interpolatorIt == interpolators_.end()) {
-      const auto newInterpolator = createPropertyInterpolator(
-          propertyName,
-          propertyPath_,
-          factories_,
-          progressProvider_,
-          viewStylesRepository_);
-      interpolatorIt =
-          interpolators_.emplace(propertyName, newInterpolator).first;
-    }
 
-    interpolatorIt->second->updateKeyframes(rt, propertyKeyframes);
+    maybeCreateInterpolator(propertyName);
+    interpolators_.at(propertyName)->updateKeyframes(rt, propertyKeyframes);
   }
 }
 
@@ -76,35 +65,34 @@ void RecordPropertiesInterpolator::updateKeyframesFromStyleChange(
     const jsi::Value &newStyleValue) {
   // TODO - maybe add a possibility to remove interpolators that are no longer
   // used  (for now, for simplicity, we only add new ones)
-  const jsi::Array propertyNames = newStyleValue.isObject()
-      ? newStyleValue.asObject(rt).getPropertyNames(rt)
-      : oldStyleValue.asObject(rt).getPropertyNames(rt);
-  const size_t propertiesCount = propertyNames.size(rt);
 
-  for (size_t i = 0; i < propertiesCount; ++i) {
-    const std::string propertyName =
-        propertyNames.getValueAtIndex(rt, i).asString(rt).utf8(rt);
-    auto interpolatorIt = interpolators_.find(propertyName);
-
-    if (interpolatorIt == interpolators_.end()) {
-      const auto newInterpolator = createPropertyInterpolator(
-          propertyName,
-          propertyPath_,
-          factories_,
-          progressProvider_,
-          viewStylesRepository_);
-      interpolatorIt =
-          interpolators_.emplace(propertyName, newInterpolator).first;
+  const auto oldStyleObject =
+      oldStyleValue.isObject() ? oldStyleValue.asObject(rt) : jsi::Object(rt);
+  const auto newStyleObject =
+      newStyleValue.isObject() ? newStyleValue.asObject(rt) : jsi::Object(rt);
+
+  std::unordered_set<std::string> propertyNamesSet;
+  const jsi::Object *objects[] = {&oldStyleObject, &newStyleObject};
+  for (const auto *styleObject : objects) {
+    const auto propertyNames = styleObject->getPropertyNames(rt);
+    for (size_t i = 0; i < propertyNames.size(rt); ++i) {
+      propertyNamesSet.insert(
+          propertyNames.getValueAtIndex(rt, i).asString(rt).utf8(rt));
     }
+  }
 
-    interpolatorIt->second->updateKeyframesFromStyleChange(
-        rt,
-        oldStyleValue.isObject()
-            ? oldStyleValue.asObject(rt).getProperty(rt, propertyName.c_str())
-            : jsi::Value::undefined(),
-        newStyleValue.isObject()
-            ? newStyleValue.asObject(rt).getProperty(rt, propertyName.c_str())
-            : jsi::Value::undefined());
+  for (const auto &propertyName : propertyNamesSet) {
+    maybeCreateInterpolator(propertyName);
+
+    auto getValue = [&](const jsi::Object &obj) {
+      return obj.hasProperty(rt, propertyName.c_str())
+          ? obj.getProperty(rt, jsi::PropNameID::forUtf8(rt, propertyName))
+          : jsi::Value::undefined();
+    };
+
+    interpolators_.at(propertyName)
+        ->updateKeyframesFromStyleChange(
+            rt, getValue(oldStyleObject), getValue(newStyleObject));
   }
 }
 
@@ -121,6 +109,19 @@ jsi::Value RecordPropertiesInterpolator::mapInterpolators(
   return result;
 }
 
+void RecordPropertiesInterpolator::maybeCreateInterpolator(
+    const std::string &propertyName) {
+  if (interpolators_.find(propertyName) == interpolators_.end()) {
+    const auto newInterpolator = createPropertyInterpolator(
+        propertyName,
+        propertyPath_,
+        factories_,
+        progressProvider_,
+        viewStylesRepository_);
+    interpolators_.emplace(propertyName, newInterpolator);
+  }
+}
+
 } // namespace reanimated
 
 #endif // RCT_NEW_ARCH_ENABLED

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

@@ -6,6 +6,7 @@
 
 #include <memory>
 #include <string>
+#include <unordered_set>
 
 namespace reanimated {
 
@@ -34,6 +35,8 @@ class RecordPropertiesInterpolator : public GroupPropertiesInterpolator {
       const std::function<jsi::Value(PropertyInterpolator &)> &callback)
       const override;
 
+  void maybeCreateInterpolator(const std::string &propertyName);
+
  private:
   const InterpolatorFactoriesRecord &factories_;
   PropertyInterpolatorsRecord interpolators_;

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/styles/TransitionStyleInterpolator.cpp

@@ -90,8 +90,8 @@ void TransitionStyleInterpolator::updateInterpolatedProperties(
     jsi::Runtime &rt,
     const ChangedProps &changedProps,
     const TransitionPropertyProgressProviders &progressProviders) {
-  const auto oldPropsObj = changedProps.oldProps->asObject(rt);
-  const auto newPropsObj = changedProps.newProps->asObject(rt);
+  const auto oldPropsObj = changedProps.oldProps.asObject(rt);
+  const auto newPropsObj = changedProps.newProps.asObject(rt);
 
   for (const auto &propertyName : changedProps.changedPropertyNames) {
     auto interpolatorIt = interpolators_.find(propertyName);