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

package/Common/cpp/reanimated/CSS/{config → configs}/CSSKeyframesConfig.h

@@ -5,6 +5,7 @@
 #include <reanimated/CSS/misc/ViewStylesRepository.h>
 
 #include <memory>
+#include <string>
 #include <unordered_map>
 
 namespace reanimated::css {
@@ -16,18 +17,10 @@ struct CSSKeyframesConfig {
   std::shared_ptr<KeyframeEasingFunctions> keyframeEasingFunctions;
 };
 
-std::shared_ptr<AnimationStyleInterpolator> getStyleInterpolator(
-    jsi::Runtime &rt,
-    const jsi::Object &config,
-    const std::shared_ptr<ViewStylesRepository> &viewStylesRepository);
-
-std::shared_ptr<KeyframeEasingFunctions> getKeyframeTimingFunctions(
-    jsi::Runtime &rt,
-    const jsi::Object &config);
-
 CSSKeyframesConfig parseCSSAnimationKeyframesConfig(
     jsi::Runtime &rt,
     const jsi::Value &config,
+    const std::string &componentName,
     const std::shared_ptr<ViewStylesRepository> &viewStylesRepository);
 
 } // namespace reanimated::css

package/Common/cpp/reanimated/CSS/{config → configs}/CSSTransitionConfig.cpp

@@ -1,4 +1,4 @@
-#include <reanimated/CSS/config/CSSTransitionConfig.h>
+#include <reanimated/CSS/configs/CSSTransitionConfig.h>
 
 namespace reanimated::css {
 

package/Common/cpp/reanimated/CSS/{config → configs}/CSSTransitionConfig.h

@@ -1,7 +1,7 @@
 #pragma once
 
 #include <reanimated/CSS/common/definitions.h>
-#include <reanimated/CSS/config/common.h>
+#include <reanimated/CSS/configs/common.h>
 #include <reanimated/CSS/easing/EasingFunctions.h>
 
 #include <string>

package/Common/cpp/reanimated/CSS/{config → configs}/common.cpp

@@ -1,4 +1,4 @@
-#include <reanimated/CSS/config/common.h>
+#include <reanimated/CSS/configs/common.h>
 
 namespace reanimated::css {
 

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

@@ -0,0 +1,138 @@
+#pragma once
+
+#include <reanimated/CSS/configs/interpolators/constants.h>
+#include <reanimated/CSS/configs/interpolators/utils.h>
+
+#include <reanimated/CSS/interpolation/InterpolatorFactory.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 <reanimated/CSS/common/transforms/TransformMatrix3D.h>
+#include <reanimated/CSS/common/values/CSSColor.h>
+#include <reanimated/CSS/common/values/CSSKeyword.h>
+#include <reanimated/CSS/common/values/CSSLength.h>
+#include <reanimated/CSS/common/values/CSSNumber.h>
+
+namespace reanimated::css {
+
+const InterpolatorFactoriesRecord FLEX_INTERPOLATORS = {
+    {"alignContent", value<CSSKeyword>("flex-start")},
+    {"alignItems", value<CSSKeyword>("stretch")},
+    {"alignSelf", value<CSSKeyword>("auto")},
+    {"aspectRatio", value<CSSDouble, CSSKeyword>("auto")},
+    {"borderBottomWidth", value<CSSDouble>(0)},
+    {"borderEndWidth", value<CSSDouble>(0)},
+    {"borderLeftWidth", value<CSSDouble>(0)},
+    {"borderRightWidth", value<CSSDouble>(0)},
+    {"borderStartWidth", value<CSSDouble>(0)},
+    {"borderTopWidth", value<CSSDouble>(0)},
+    {"borderWidth", value<CSSDouble>(0)},
+    {"bottom",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "height", "auto")},
+    {"boxSizing", value<CSSKeyword>("border-box")},
+    {"display", value<CSSDisplay>("flex")},
+    {"end", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
+    {"flex", value<CSSDouble>(0)},
+    {"flexBasis",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
+    {"flexDirection", value<CSSKeyword>("column")},
+    {"rowGap", value<CSSLength>(RelativeTo::Self, "height", 0)},
+    {"columnGap", value<CSSLength>(RelativeTo::Self, "width", 0)},
+    {"flexGrow", value<CSSDouble>(0)},
+    {"flexShrink", value<CSSDouble>(0)},
+    {"flexWrap", value<CSSKeyword>("no-wrap")},
+    {"height",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "height", "auto")},
+    {"justifyContent", value<CSSKeyword>("flex-start")},
+    {"left", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
+    {"margin", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"marginBottom",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"marginEnd", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"marginHorizontal",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"marginLeft",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"marginRight",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"marginStart",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"marginTop", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"marginVertical",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"maxHeight",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "height", "auto")},
+    {"maxWidth",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
+    {"minHeight",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "height", "auto")},
+    {"minWidth",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
+    {"overflow", value<CSSKeyword>("visible")},
+    {"padding", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"paddingBottom",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"paddingEnd",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"paddingHorizontal",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"paddingLeft",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"paddingRight",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"paddingStart",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"paddingTop",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"paddingVertical",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
+    {"position", value<CSSKeyword>("relative")},
+    {"right",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
+    {"start",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
+    {"top", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "height", "auto")},
+    {"width",
+     value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
+    {"zIndex", value<CSSInteger>(0)},
+    {"direction", value<CSSKeyword>("inherit")}};
+
+const InterpolatorFactoriesRecord SHADOW_INTERPOLATORS_IOS = {
+    {"shadowColor", value<CSSColor>(BLACK)},
+    {"shadowOffset",
+     record({{"width", value<CSSDouble>(0)}, {"height", value<CSSDouble>(0)}})},
+    {"shadowRadius", value<CSSDouble>(0)},
+    {"shadowOpacity", value<CSSDouble>(1)}};
+
+const InterpolatorFactoriesRecord TRANSFORMS_INTERPOLATORS = {
+    {"transformOrigin",
+     array(
+         {value<CSSLength>(RelativeTo::Self, "width", "50%"),
+          value<CSSLength>(RelativeTo::Self, "height", "50%"),
+          value<CSSDouble>(0)})},
+    {"transform",
+     transforms(
+         {{"perspective",
+           transformOp<PerspectiveOperation>(0)}, // 0 - no perspective
+          {"rotate", transformOp<RotateOperation>("0deg")},
+          {"rotateX", transformOp<RotateXOperation>("0deg")},
+          {"rotateY", transformOp<RotateYOperation>("0deg")},
+          {"rotateZ", transformOp<RotateZOperation>("0deg")},
+          {"scale", transformOp<ScaleOperation>(1)},
+          {"scaleX", transformOp<ScaleXOperation>(1)},
+          {"scaleY", transformOp<ScaleYOperation>(1)},
+          {"translateX",
+           transformOp<TranslateXOperation>(RelativeTo::Self, "width", 0)},
+          {"translateY",
+           transformOp<TranslateYOperation>(RelativeTo::Self, "height", 0)},
+          {"skewX", transformOp<SkewXOperation>("0deg")},
+          {"skewY", transformOp<SkewYOperation>("0deg")},
+          {"matrix",
+           transformOp<MatrixOperation>(TransformMatrix3D::Identity())}})},
+};
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/configs/interpolators/base/image.h

@@ -0,0 +1,15 @@
+#pragma once
+
+#include <reanimated/CSS/configs/interpolators/base/view.h>
+
+namespace reanimated::css {
+
+const InterpolatorFactoriesRecord IMAGE_INTERPOLATORS = mergeInterpolators(
+    VIEW_INTERPOLATORS,
+    InterpolatorFactoriesRecord{
+        {"resizeMode", value<CSSKeyword>("cover")},
+        {"overlayColor", value<CSSColor>(BLACK)},
+        {"tintColor", value<CSSColor>(BLACK)},
+    });
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/configs/interpolators/base/text.h

@@ -0,0 +1,51 @@
+#pragma once
+
+#include <reanimated/CSS/configs/interpolators/base/view.h>
+
+#include <reanimated/CSS/common/values/CSSBoolean.h>
+#include <reanimated/CSS/common/values/CSSDiscreteArray.h>
+
+#include <vector>
+
+namespace reanimated::css {
+
+const InterpolatorFactoriesRecord TEXT_INTERPOLATORS_IOS = {
+    {"fontVariant",
+     value<CSSDiscreteArray<CSSKeyword>>(std::vector<CSSKeyword>{})},
+    {"textDecorationColor", value<CSSColor>(BLACK)},
+    {"textDecorationStyle", value<CSSKeyword>("solid")},
+    {"writingDirection", value<CSSKeyword>("auto")},
+};
+
+const InterpolatorFactoriesRecord TEXT_INTERPOLATORS_ANDROID = {
+    {"textAlignVertical", value<CSSKeyword>("auto")},
+    {"verticalAlign", value<CSSKeyword>("auto")},
+    {"includeFontPadding", value<CSSBoolean>(false)},
+};
+
+const InterpolatorFactoriesRecord TEXT_INTERPOLATORS = mergeInterpolators(
+    VIEW_INTERPOLATORS,
+    TEXT_INTERPOLATORS_IOS,
+    TEXT_INTERPOLATORS_ANDROID,
+    InterpolatorFactoriesRecord{
+        {"color", value<CSSColor>(BLACK)},
+        {"fontFamily", value<CSSKeyword>("inherit")},
+        {"fontSize", value<CSSDouble>(14)},
+        {"fontStyle", value<CSSKeyword>("normal")},
+        {"fontWeight", value<CSSKeyword>("normal")},
+        {"letterSpacing", value<CSSDouble>(0)},
+        {"lineHeight",
+         value<CSSDouble>(14)}, // TODO - should inherit from fontSize
+        {"textAlign", value<CSSKeyword>("auto")},
+        {"textDecorationLine", value<CSSKeyword>("none")},
+        {"textShadowColor", value<CSSColor>(BLACK)},
+        {"textShadowOffset",
+         record(
+             {{"width", value<CSSDouble>(0)},
+              {"height", value<CSSDouble>(0)}})},
+        {"textShadowRadius", value<CSSDouble>(0)},
+        {"textTransform", value<CSSKeyword>("none")},
+        {"userSelect", value<CSSKeyword>("auto")},
+    });
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/configs/interpolators/base/view.h

@@ -0,0 +1,77 @@
+#pragma once
+
+#include <reanimated/CSS/configs/interpolators/base/common.h>
+
+#include <reanimated/CSS/common/values/CSSBoolean.h>
+
+namespace reanimated::css {
+
+const InterpolatorFactoriesRecord VIEW_INTERPOLATORS = mergeInterpolators(
+    FLEX_INTERPOLATORS,
+    SHADOW_INTERPOLATORS_IOS,
+    TRANSFORMS_INTERPOLATORS,
+    InterpolatorFactoriesRecord{
+        {"backfaceVisibility", value<CSSKeyword>("visible")},
+        {"backgroundColor", value<CSSColor>(TRANSPARENT)},
+        {"borderBlockColor", value<CSSColor>(BLACK)},
+        {"borderBlockEndColor", value<CSSColor>(BLACK)},
+        {"borderBlockStartColor", value<CSSColor>(BLACK)},
+        {"borderBottomColor", value<CSSColor>(BLACK)},
+        {"borderBottomEndRadius",
+         value<CSSLength>(RelativeTo::Self, "width", 0)},
+        {"borderBottomLeftRadius",
+         value<CSSLength>(RelativeTo::Self, "width", 0)},
+        {"borderBottomRightRadius",
+         value<CSSLength>(RelativeTo::Self, "width", 0)},
+        {"borderBottomStartRadius",
+         value<CSSLength>(RelativeTo::Self, "width", 0)},
+        {"borderColor", value<CSSColor>(BLACK)},
+        {"borderCurve", value<CSSKeyword>("circular")}, // TODO
+        {"borderEndColor", value<CSSColor>(BLACK)},
+        {"borderEndEndRadius", value<CSSLength>(RelativeTo::Self, "width", 0)},
+        {"borderEndStartRadius",
+         value<CSSLength>(RelativeTo::Self, "width", 0)},
+        {"borderLeftColor", value<CSSColor>(BLACK)},
+        {"borderRadius", value<CSSLength>(RelativeTo::Self, "width", 0)},
+        {"borderRightColor", value<CSSColor>(BLACK)},
+        {"borderStartColor", value<CSSColor>(BLACK)},
+        {"borderStartEndRadius",
+         value<CSSLength>(RelativeTo::Self, "width", 0)},
+        {"borderStartStartRadius",
+         value<CSSLength>(RelativeTo::Self, "width", 0)},
+        {"borderStyle", value<CSSKeyword>("solid")},
+        {"borderTopColor", value<CSSColor>(BLACK)},
+        {"borderTopEndRadius", value<CSSLength>(RelativeTo::Self, "width", 0)},
+        {"borderTopLeftRadius", value<CSSLength>(RelativeTo::Self, "width", 0)},
+        {"borderTopRightRadius",
+         value<CSSLength>(RelativeTo::Self, "width", 0)},
+        {"borderTopStartRadius",
+         value<CSSLength>(RelativeTo::Self, "width", 0)},
+        {"outlineColor", value<CSSColor>(BLACK)},
+        {"outlineOffset", value<CSSDouble>(0)},
+        {"outlineStyle", value<CSSKeyword>("solid")},
+        {"outlineWidth", value<CSSDouble>(0)},
+        {"opacity", value<CSSDouble>(1)},
+        {"elevation", value<CSSDouble>(0)},
+        {"pointerEvents", value<CSSKeyword>("auto")},
+        {"isolation", value<CSSKeyword>("auto")},
+        {"cursor", value<CSSKeyword>("auto")},
+        {"boxShadow",
+         array({record({
+             {"offsetX", value<CSSDouble>(0)},
+             {"offsetY", value<CSSDouble>(0)},
+#ifdef ANDROID
+             // For some reason Android crashes when blurRadius is smaller
+             // than 1, so we use a custom value type that will never be
+             // smaller than 1
+             {"blurRadius", value<CSSShadowRadiusAndroid>(1)},
+#else
+             {"blurRadius", value<CSSDouble>(0)},
+#endif
+             {"spreadDistance", value<CSSDouble>(0)},
+             {"color", value<CSSColor>(TRANSPARENT)},
+             {"inset", value<CSSBoolean>(false)},
+         })})},
+        {"mixBlendMode", value<CSSKeyword>("normal")}});
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/configs/interpolators/constants.h

@@ -0,0 +1,13 @@
+#pragma once
+
+#include <reanimated/CSS/common/values/CSSColor.h>
+
+namespace reanimated::css {
+
+/**
+ * COLORS
+ */
+const auto BLACK = CSSColor(0, 0, 0, 255);
+const auto TRANSPARENT = CSSColor::Transparent;
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/configs/interpolators/registry.cpp

@@ -0,0 +1,39 @@
+#include <reanimated/CSS/configs/interpolators/registry.h>
+
+namespace reanimated::css {
+
+namespace {
+
+ComponentInterpolatorsMap registry = {
+    {"View", VIEW_INTERPOLATORS},
+    {"Paragraph", TEXT_INTERPOLATORS},
+    {"Image", IMAGE_INTERPOLATORS},
+};
+
+} // namespace
+
+bool hasInterpolators(const std::string &componentName) {
+  return registry.contains(componentName);
+}
+
+const InterpolatorFactoriesRecord &getComponentInterpolators(
+    const std::string &componentName) {
+  const auto it = registry.find(componentName);
+
+  if (it == registry.end()) {
+    // Use View interpolators as a fallback for unknown components
+    // (e.g. we get the ScrollView component name for the ScrollView component
+    // but it should be styled in the same way as a View)
+    return VIEW_INTERPOLATORS;
+  }
+
+  return it->second;
+}
+
+void registerComponentInterpolators(
+    const std::string &componentName,
+    const InterpolatorFactoriesRecord &interpolators) {
+  registry[componentName] = interpolators;
+}
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/configs/interpolators/registry.h

@@ -0,0 +1,28 @@
+#pragma once
+
+#include <reanimated/CSS/interpolation/PropertyInterpolator.h>
+
+#include <reanimated/CSS/configs/interpolators/base/image.h>
+#include <reanimated/CSS/configs/interpolators/base/text.h>
+#include <reanimated/CSS/configs/interpolators/base/view.h>
+
+#include <stdexcept>
+#include <string>
+#include <unordered_map>
+#include <utility>
+
+namespace reanimated::css {
+
+using ComponentInterpolatorsMap =
+    std::unordered_map<std::string, InterpolatorFactoriesRecord>;
+
+bool hasInterpolators(const std::string &componentName);
+
+const InterpolatorFactoriesRecord &getComponentInterpolators(
+    const std::string &componentName);
+
+void registerComponentInterpolators(
+    const std::string &componentName,
+    const InterpolatorFactoriesRecord &interpolators);
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/configs/interpolators/utils.h

@@ -0,0 +1,20 @@
+#pragma once
+
+#include <reanimated/CSS/interpolation/PropertyInterpolator.h>
+
+namespace reanimated::css {
+
+inline InterpolatorFactoriesRecord mergeInterpolators(
+    const InterpolatorFactoriesRecord &map) {
+  return map;
+}
+
+template <typename... TInterpolatorMaps>
+InterpolatorFactoriesRecord mergeInterpolators(
+    const TInterpolatorMaps &...maps) {
+  InterpolatorFactoriesRecord result;
+  (result.insert(maps.begin(), maps.end()), ...);
+  return result;
+}
+
+} // namespace reanimated::css

package/Common/cpp/reanimated/CSS/core/CSSAnimation.cpp

@@ -1,19 +1,18 @@
 #include <reanimated/CSS/core/CSSAnimation.h>
 
-#include <utility>
-
 namespace reanimated::css {
 
 CSSAnimation::CSSAnimation(
     jsi::Runtime &rt,
     std::shared_ptr<const ShadowNode> shadowNode,
-    std::string name,
-    const CSSKeyframesConfig &keyframesConfig,
+    std::string animationName,
+    const CSSKeyframesConfig &cssKeyframesConfig,
     const CSSAnimationSettings &settings,
     const double timestamp)
-    : name_(std::move(name)),
+    : name_(std::move(animationName)),
       shadowNode_(std::move(shadowNode)),
       fillMode_(settings.fillMode),
+      styleInterpolator_(cssKeyframesConfig.styleInterpolator),
       progressProvider_(std::make_shared<AnimationProgressProvider>(
           timestamp,
           settings.duration,
@@ -21,8 +20,7 @@ CSSAnimation::CSSAnimation(
           settings.iterationCount,
           settings.direction,
           settings.easingFunction,
-          keyframesConfig.keyframeEasingFunctions)),
-      styleInterpolator_(keyframesConfig.styleInterpolator) {
+          cssKeyframesConfig.keyframeEasingFunctions)) {
   if (settings.playState == AnimationPlayState::Paused) {
     progressProvider_->pause(timestamp);
   }

package/Common/cpp/reanimated/CSS/core/CSSAnimation.h

@@ -1,8 +1,7 @@
 #pragma once
 
-#include <reanimated/CSS/config/CSSAnimationConfig.h>
-#include <reanimated/CSS/easing/EasingFunctions.h>
-#include <reanimated/CSS/interpolation/styles/AnimationStyleInterpolator.h>
+#include <reanimated/CSS/configs/CSSAnimationConfig.h>
+#include <reanimated/CSS/configs/CSSKeyframesConfig.h>
 #include <reanimated/CSS/progress/AnimationProgressProvider.h>
 
 #include <memory>
@@ -17,8 +16,8 @@ class CSSAnimation {
   CSSAnimation(
       jsi::Runtime &rt,
       std::shared_ptr<const ShadowNode> shadowNode,
-      std::string name,
-      const CSSKeyframesConfig &keyframesConfig,
+      std::string animationName,
+      const CSSKeyframesConfig &cssKeyframesConfig,
       const CSSAnimationSettings &settings,
       double timestamp);
 
@@ -47,8 +46,8 @@ class CSSAnimation {
   const std::shared_ptr<const ShadowNode> shadowNode_;
   AnimationFillMode fillMode_;
 
-  std::shared_ptr<AnimationProgressProvider> progressProvider_;
-  std::shared_ptr<AnimationStyleInterpolator> styleInterpolator_;
+  const std::shared_ptr<AnimationStyleInterpolator> styleInterpolator_;
+  const std::shared_ptr<AnimationProgressProvider> progressProvider_;
 };
 
 } // namespace reanimated::css

package/Common/cpp/reanimated/CSS/core/CSSTransition.cpp

@@ -10,8 +10,10 @@ CSSTransition::CSSTransition(
       viewStylesRepository_(viewStylesRepository),
       properties_(config.properties),
       settings_(config.settings),
-      progressProvider_(TransitionProgressProvider()),
-      styleInterpolator_(TransitionStyleInterpolator(viewStylesRepository)) {}
+      styleInterpolator_(TransitionStyleInterpolator(
+          shadowNode_->getComponentName(),
+          viewStylesRepository)),
+      progressProvider_(TransitionProgressProvider()) {}
 
 Tag CSSTransition::getViewTag() const {
   return shadowNode_->getTag();
@@ -125,7 +127,7 @@ void CSSTransition::updateTransitionProperties(
 }
 
 bool CSSTransition::isAllowedProperty(const std::string &propertyName) const {
-  if (!isDiscreteProperty(propertyName)) {
+  if (!isDiscreteProperty(propertyName, shadowNode_->getComponentName())) {
     return true;
   }
 

package/Common/cpp/reanimated/CSS/core/CSSTransition.h

@@ -1,6 +1,6 @@
 #pragma once
 
-#include <reanimated/CSS/config/CSSTransitionConfig.h>
+#include <reanimated/CSS/configs/CSSTransitionConfig.h>
 #include <reanimated/CSS/easing/EasingFunctions.h>
 #include <reanimated/CSS/interpolation/styles/TransitionStyleInterpolator.h>
 #include <reanimated/CSS/progress/TransitionProgressProvider.h>
@@ -41,8 +41,8 @@ class CSSTransition {
   const std::shared_ptr<ViewStylesRepository> viewStylesRepository_;
   TransitionProperties properties_;
   CSSTransitionPropertiesSettings settings_;
-  TransitionProgressProvider progressProvider_;
   TransitionStyleInterpolator styleInterpolator_;
+  TransitionProgressProvider progressProvider_;
 
   void updateTransitionProperties(const TransitionProperties &properties);
   bool isAllowedProperty(const std::string &propertyName) const;

package/Common/cpp/reanimated/CSS/easing/linear.h

@@ -1,7 +1,7 @@
 #pragma once
 
 #include <reanimated/CSS/common/definitions.h>
-#include <reanimated/CSS/util/algorithms.h>
+#include <reanimated/CSS/utils/algorithms.h>
 
 #include <vector>
 

package/Common/cpp/reanimated/CSS/easing/steps.h

@@ -1,7 +1,7 @@
 #pragma once
 
 #include <reanimated/CSS/common/definitions.h>
-#include <reanimated/CSS/util/algorithms.h>
+#include <reanimated/CSS/utils/algorithms.h>
 
 #include <vector>
 

package/Common/cpp/reanimated/CSS/interpolation/InterpolatorFactory.cpp

@@ -89,8 +89,8 @@ class TransformsInterpolatorFactory : public PropertyInterpolatorFactory {
   }
 
  private:
-  static TransformMatrix &getIdentityMatrix() {
-    static TransformMatrix identityMatrix = TransformMatrix::Identity();
+  static TransformMatrix3D &getIdentityMatrix() {
+    static TransformMatrix3D identityMatrix = TransformMatrix3D::Identity();
     return identityMatrix;
   }
 

package/Common/cpp/reanimated/CSS/interpolation/PropertyInterpolator.h

@@ -27,7 +27,9 @@ class PropertyInterpolator {
   virtual bool equalsReversingAdjustedStartValue(
       const folly::dynamic &propertyValue) const = 0;
 
-  virtual void updateKeyframes(const folly::dynamic &keyframes) = 0;
+  virtual void updateKeyframes(
+      jsi::Runtime &rt,
+      const jsi::Value &keyframes) = 0;
   virtual void updateKeyframesFromStyleChange(
       const folly::dynamic &oldStyleValue,
       const folly::dynamic &newStyleValue,

package/Common/cpp/reanimated/CSS/interpolation/groups/ArrayPropertiesInterpolator.cpp

@@ -31,13 +31,16 @@ bool ArrayPropertiesInterpolator::equalsReversingAdjustedStartValue(
 }
 
 void ArrayPropertiesInterpolator::updateKeyframes(
-    const folly::dynamic &keyframes) {
-  const size_t valuesCount = keyframes.size();
+    jsi::Runtime &rt,
+    const jsi::Value &keyframes) {
+  const jsi::Array keyframesArray = keyframes.asObject(rt).asArray(rt);
+  const size_t valuesCount = keyframesArray.size(rt);
 
   resizeInterpolators(valuesCount);
 
   for (size_t i = 0; i < valuesCount; ++i) {
-    interpolators_[i]->updateKeyframes(keyframes[i]);
+    interpolators_[i]->updateKeyframes(
+        rt, keyframesArray.getValueAtIndex(rt, i));
   }
 }
 
@@ -45,14 +48,19 @@ void ArrayPropertiesInterpolator::updateKeyframesFromStyleChange(
     const folly::dynamic &oldStyleValue,
     const folly::dynamic &newStyleValue,
     const folly::dynamic &lastUpdateValue) {
-  const folly::dynamic empty = folly::dynamic::array();
-  const auto oldStyleArray = !oldStyleValue.empty() ? oldStyleValue : empty;
-  const auto newStyleArray = !newStyleValue.empty() ? newStyleValue : empty;
-  const auto lastUpdateArray =
-      !lastUpdateValue.empty() ? lastUpdateValue : empty;
+  const auto emptyArray = folly::dynamic::array();
+  const auto null = folly::dynamic();
+
+  const auto &oldStyleArray =
+      oldStyleValue.empty() ? emptyArray : oldStyleValue;
+  const auto &newStyleArray =
+      newStyleValue.empty() ? emptyArray : newStyleValue;
+  const auto &lastUpdateArray =
+      lastUpdateValue.empty() ? emptyArray : lastUpdateValue;
 
   const size_t oldSize = oldStyleArray.size();
   const size_t newSize = newStyleArray.size();
+  const size_t lastSize = lastUpdateArray.size();
   const size_t valuesCount = std::max(oldSize, newSize);
 
   resizeInterpolators(valuesCount);
@@ -61,9 +69,9 @@ void ArrayPropertiesInterpolator::updateKeyframesFromStyleChange(
     // These index checks ensure that interpolation works between 2 arrays
     // with different lengths
     interpolators_[i]->updateKeyframesFromStyleChange(
-        i < oldSize ? oldStyleArray[i] : empty,
-        i < newSize ? newStyleArray[i] : empty,
-        i < valuesCount ? lastUpdateArray[i] : empty);
+        i < oldSize ? oldStyleArray[i] : null,
+        i < newSize ? newStyleArray[i] : null,
+        i < lastSize ? lastUpdateArray[i] : null);
   }
 }