@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/misc/ViewStylesRepository.cpp

@@ -1,4 +1,5 @@
 #include <reanimated/CSS/misc/ViewStylesRepository.h>
+#include <reanimated/Tools/FeatureFlags.h>
 
 #include <memory>
 #include <string>
@@ -13,13 +14,11 @@ ViewStylesRepository::ViewStylesRepository(
 jsi::Value ViewStylesRepository::getNodeProp(
     const std::shared_ptr<const ShadowNode> &shadowNode,
     const std::string &propName) {
-  int tag = shadowNode->getTag();
-
-  auto &cachedNode = shadowNodeCache_[tag];
-  updateCacheIfNeeded(cachedNode, shadowNode);
+  const auto resolvedNode = getNewestNode(shadowNode);
+  const auto *layoutableShadowNode = dynamic_cast<const LayoutableShadowNode *>(resolvedNode.get());
 
   if (propName == "width" || propName == "height" || propName == "top" || propName == "left") {
-    const auto &layoutMetrics = cachedNode.layoutMetrics;
+    const auto layoutMetrics = layoutableShadowNode ? layoutableShadowNode->layoutMetrics_ : LayoutMetrics{};
 
     if (propName == "width") {
       return {layoutMetrics.frame.size.width};
@@ -31,7 +30,13 @@ jsi::Value ViewStylesRepository::getNodeProp(
       return {layoutMetrics.frame.origin.x};
     }
   } else {
-    const auto &viewProps = cachedNode.viewProps;
+    if (!layoutableShadowNode) {
+      return jsi::Value::undefined();
+    }
+    const auto viewProps = std::static_pointer_cast<const ViewProps>(resolvedNode->getProps());
+    if (!viewProps) {
+      return jsi::Value::undefined();
+    }
 
     if (propName == "opacity") {
       return {viewProps->opacity};
@@ -48,15 +53,7 @@ jsi::Value ViewStylesRepository::getNodeProp(
 jsi::Value ViewStylesRepository::getParentNodeProp(
     const std::shared_ptr<const ShadowNode> &shadowNode,
     const std::string &propName) {
-  const auto surfaceId = shadowNode->getSurfaceId();
-  const auto &shadowTreeRegistry = uiManager_->getShadowTreeRegistry();
-
-  std::shared_ptr<const ShadowNode> parentNode = nullptr;
-
-  shadowTreeRegistry.visit(surfaceId, [&](ShadowTree const &shadowTree) {
-    auto currentRevision = shadowTree.getCurrentRevision();
-    parentNode = dom::getParentNode(currentRevision.rootShadowNode, *shadowNode);
-  });
+  const auto parentNode = getParentNode(shadowNode);
 
   if (!parentNode) {
     return jsi::Value::undefined();
@@ -65,37 +62,67 @@ jsi::Value ViewStylesRepository::getParentNodeProp(
   return getNodeProp(parentNode, propName);
 }
 
-folly::dynamic ViewStylesRepository::getStyleProp(const Tag tag, const PropertyPath &propertyPath) {
-  auto animatedValue = getPropertyValue(animatedPropsRegistry_->get(tag), propertyPath);
-  if (!animatedValue.isNull()) {
-    return animatedValue;
+std::shared_ptr<const ShadowNode> ViewStylesRepository::getNewestNode(
+    const std::shared_ptr<const ShadowNode> &shadowNode) const {
+  if constexpr (StaticFeatureFlags::getFlag("USE_ANIMATION_BACKEND")) {
+    // Backend mode has no commit hook (it returns before taking the updates-registry
+    // lock), so reading the live tree here cannot deadlock and needs no snapshot.
+    const auto newestNode = uiManager_->getNewestCloneOfShadowNode(*shadowNode);
+    return newestNode ? newestNode : shadowNode;
   }
 
-  return getPropertyValue(staticPropsRegistry_->get(tag), propertyPath);
-}
+  // Resolve shadowNode against the last mounted root without the ShadowTree lock (the
+  // deadlock) that getNewestCloneOfShadowNode takes, falling back to the passed node.
+  // Mirrors RN's getShadowNodeInSubtree:
+  // https://github.com/facebook/react-native/blob/v0.86.0-rc.3/packages/react-native/ReactCommon/react/renderer/uimanager/UIManager.cpp#L339
+  const auto it = lastMountedRootBySurface_.find(shadowNode->getSurfaceId());
+  if (it == lastMountedRootBySurface_.end()) {
+    return shadowNode;
+  }
+  const auto &root = it->second;
 
-void ViewStylesRepository::clearNodesCache() {
-  shadowNodeCache_.clear();
+  if (ShadowNode::sameFamily(*root, *shadowNode)) {
+    return root;
+  }
+
+  const auto ancestors = shadowNode->getFamily().getAncestors(*root);
+  if (ancestors.empty()) {
+    return shadowNode;
+  }
+
+  const auto &deepest = ancestors.back();
+  return deepest.first.get().getChildren().at(deepest.second);
 }
 
-void ViewStylesRepository::updateCacheIfNeeded(
-    CachedShadowNode &cachedNode,
-    const std::shared_ptr<const ShadowNode> &shadowNode) {
-  auto newestCloneOfShadowNode = uiManager_->getNewestCloneOfShadowNode(*shadowNode);
+std::shared_ptr<const ShadowNode> ViewStylesRepository::getParentNode(
+    const std::shared_ptr<const ShadowNode> &shadowNode) const {
+  if constexpr (StaticFeatureFlags::getFlag("USE_ANIMATION_BACKEND")) {
+    // Backend mode resolves against the live tree (see getNewestNode).
+    std::shared_ptr<const ShadowNode> parentNode = nullptr;
+    uiManager_->getShadowTreeRegistry().visit(shadowNode->getSurfaceId(), [&](const ShadowTree &shadowTree) {
+      parentNode = dom::getParentNode(shadowTree.getCurrentRevision().rootShadowNode, *shadowNode);
+    });
+    return parentNode;
+  }
 
-  // Check if newestCloneOfShadowNode is valid (is already mounted / not
-  // yet unmounted)
-  if (!newestCloneOfShadowNode) {
-    return;
+  const auto it = lastMountedRootBySurface_.find(shadowNode->getSurfaceId());
+  if (it == lastMountedRootBySurface_.end()) {
+    return nullptr;
   }
+  return dom::getParentNode(it->second, *shadowNode);
+}
+
+void ViewStylesRepository::setLastMountedRoot(const RootShadowNode::Shared &rootShadowNode) {
+  lastMountedRootBySurface_[rootShadowNode->getSurfaceId()] = rootShadowNode;
+}
 
-  auto layoutableShadowNode = dynamic_cast<const LayoutableShadowNode *>(newestCloneOfShadowNode.get());
-  if (!layoutableShadowNode) {
-    return;
+folly::dynamic ViewStylesRepository::getStyleProp(const Tag tag, const PropertyPath &propertyPath) {
+  auto animatedValue = getPropertyValue(animatedPropsRegistry_->get(tag), propertyPath);
+  if (!animatedValue.isNull()) {
+    return animatedValue;
   }
 
-  cachedNode.layoutMetrics = layoutableShadowNode->layoutMetrics_;
-  cachedNode.viewProps = std::static_pointer_cast<const ViewProps>(newestCloneOfShadowNode->getProps());
+  return getPropertyValue(staticPropsRegistry_->get(tag), propertyPath);
 }
 
 folly::dynamic ViewStylesRepository::getPropertyValue(const folly::dynamic &value, const PropertyPath &propertyPath) {

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/misc/ViewStylesRepository.h

@@ -4,9 +4,11 @@
 #include <reanimated/CSS/registries/StaticPropsRegistry.h>
 #include <reanimated/Fabric/updates/AnimatedPropsRegistry.h>
 
+#include <react/renderer/components/root/RootShadowNode.h>
 #include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/core/LayoutableShadowNode.h>
 #include <react/renderer/dom/DOM.h>
+#include <react/renderer/uimanager/UIManager.h>
 
 #include <memory>
 #include <string>
@@ -17,11 +19,6 @@ namespace reanimated::css {
 using namespace facebook;
 using namespace react;
 
-struct CachedShadowNode {
-  LayoutMetrics layoutMetrics;
-  std::shared_ptr<const ViewProps> viewProps;
-};
-
 class ViewStylesRepository {
  public:
   ViewStylesRepository(
@@ -36,16 +33,17 @@ class ViewStylesRepository {
   jsi::Value getParentNodeProp(const std::shared_ptr<const ShadowNode> &shadowNode, const std::string &propName);
   folly::dynamic getStyleProp(Tag tag, const PropertyPath &propertyPath);
 
-  void clearNodesCache();
+  void setLastMountedRoot(const RootShadowNode::Shared &rootShadowNode);
 
  private:
   std::shared_ptr<UIManager> uiManager_;
   std::shared_ptr<StaticPropsRegistry> staticPropsRegistry_;
   std::shared_ptr<AnimatedPropsRegistry> animatedPropsRegistry_;
 
-  std::unordered_map<int, CachedShadowNode> shadowNodeCache_;
+  std::unordered_map<SurfaceId, RootShadowNode::Shared> lastMountedRootBySurface_;
 
-  void updateCacheIfNeeded(CachedShadowNode &cachedNode, const std::shared_ptr<const ShadowNode> &shadowNode);
+  std::shared_ptr<const ShadowNode> getNewestNode(const std::shared_ptr<const ShadowNode> &shadowNode) const;
+  std::shared_ptr<const ShadowNode> getParentNode(const std::shared_ptr<const ShadowNode> &shadowNode) const;
 
   static folly::dynamic getPropertyValue(const folly::dynamic &value, const PropertyPath &propertyPath);
 };

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/progress/AnimationProgressProvider.cpp

@@ -12,12 +12,12 @@ AnimationProgressProvider::AnimationProgressProvider(
     const double iterationCount,
     const AnimationDirection direction,
     EasingFunction easingFunction,
-    const std::shared_ptr<KeyframeEasingFunctions> &keyframeEasingFunctions)
+    const std::shared_ptr<KeyframeEasingConfigs> &keyframeEasingConfigs)
     : RawProgressProvider(timestamp, duration, delay),
       iterationCount_(iterationCount),
       direction_(direction),
       easingFunction_(std::move(easingFunction)),
-      keyframeEasingFunctions_(keyframeEasingFunctions) {}
+      keyframeEasingConfigs_(keyframeEasingConfigs) {}
 
 void AnimationProgressProvider::setIterationCount(double iterationCount) {
   iterationCount_ = iterationCount;
@@ -39,34 +39,6 @@ double AnimationProgressProvider::getGlobalProgress() const {
   return applyAnimationDirection(rawProgress_.value_or(0));
 }
 
-AnimationProgressState AnimationProgressProvider::getState(const double timestamp) const {
-  if (shouldFinish(timestamp)) {
-    return AnimationProgressState::Finished;
-  }
-  if (pauseTimestamp_ > 0) {
-    return AnimationProgressState::Paused;
-  }
-  if (timestamp < getStartTimestamp(timestamp) || !rawProgress_.has_value()) {
-    return AnimationProgressState::Pending;
-  }
-  return AnimationProgressState::Running;
-}
-
-double AnimationProgressProvider::getPauseTimestamp() const {
-  return pauseTimestamp_;
-}
-
-double AnimationProgressProvider::getTotalPausedTime(const double timestamp) const {
-  return pauseTimestamp_ > 0 ? (totalPausedTime_ + (timestamp - pauseTimestamp_)) : totalPausedTime_;
-}
-
-double AnimationProgressProvider::getStartTimestamp(const double timestamp) const {
-  // Start timestamp is the timestamp when the first animation keyframe
-  // should be applied (it depends on the animation delay and the total
-  // time when the animation was paused)
-  return creationTimestamp_ + delay_ + getTotalPausedTime(timestamp);
-}
-
 double AnimationProgressProvider::getKeyframeProgress(const double fromOffset, const double toOffset) const {
   if (fromOffset == toOffset) {
     return 1;
@@ -76,14 +48,25 @@ double AnimationProgressProvider::getKeyframeProgress(const double fromOffset, c
 
   // Use the overridden easing function if it was overridden for the
   // current keyframe
-  const auto easingFunctionIt = keyframeEasingFunctions_->find(fromOffset);
-  if (easingFunctionIt != keyframeEasingFunctions_->end()) {
-    return easingFunctionIt->second(keyframeProgress);
+  const auto easingConfigIt = keyframeEasingConfigs_->find(fromOffset);
+  if (easingConfigIt != keyframeEasingConfigs_->end()) {
+    return getEasingFunctionFromConfig(easingConfigIt->second)(keyframeProgress);
   }
 
   return easingFunction_(keyframeProgress);
 }
 
+AnimationProgressState AnimationProgressProvider::getState() const {
+  return state_;
+}
+
+double AnimationProgressProvider::getStartTimestamp(const double timestamp) const {
+  // Start timestamp is the timestamp when the first animation keyframe
+  // should be applied (it depends on the animation delay and the total
+  // time when the animation was paused)
+  return creationTimestamp_ + delay_ + getTotalPausedTime(timestamp);
+}
+
 void AnimationProgressProvider::pause(const double timestamp) {
   pauseTimestamp_ = timestamp;
 }
@@ -95,26 +78,21 @@ void AnimationProgressProvider::play(const double timestamp) {
   pauseTimestamp_ = 0;
 }
 
+void AnimationProgressProvider::update(const double timestamp) {
+  RawProgressProvider::update(timestamp);
+  state_ = computeState(timestamp);
+}
+
 void AnimationProgressProvider::resetProgress() {
   RawProgressProvider::resetProgress();
   currentIteration_ = 1;
   previousIterationsDuration_ = 0;
-}
-
-bool AnimationProgressProvider::shouldFinish(const double timestamp) const {
-  if (iterationCount_ == 0) {
-    return true;
-  }
-  if (iterationCount_ == -1) {
-    return false;
-  }
-  const auto elapsedDuration = timestamp - getStartTimestamp(timestamp);
-  return elapsedDuration >= duration_ * iterationCount_;
+  state_ = AnimationProgressState::Pending;
 }
 
 std::optional<double> AnimationProgressProvider::calculateRawProgress(const double timestamp) {
-  const double currentIterationElapsedTime =
-      timestamp - (creationTimestamp_ + delay_ + previousIterationsDuration_ + getTotalPausedTime(timestamp));
+  const double startTimestamp = getStartTimestamp(timestamp);
+  const double currentIterationElapsedTime = timestamp - (startTimestamp + previousIterationsDuration_);
 
   if (currentIterationElapsedTime < 0) {
     return std::nullopt;
@@ -132,6 +110,37 @@ std::optional<double> AnimationProgressProvider::calculateRawProgress(const doub
   return iterationProgress;
 }
 
+double AnimationProgressProvider::getTotalPausedTime(const double timestamp) const {
+  if (pauseTimestamp_ > 0) {
+    return totalPausedTime_ + (timestamp - pauseTimestamp_);
+  }
+  return totalPausedTime_;
+}
+
+bool AnimationProgressProvider::shouldFinish(const double timestamp) const {
+  if (iterationCount_ == 0) {
+    return true;
+  }
+  if (iterationCount_ == -1) {
+    return false;
+  }
+  const auto elapsedDuration = timestamp - getStartTimestamp(timestamp);
+  return elapsedDuration >= duration_ * iterationCount_;
+}
+
+AnimationProgressState AnimationProgressProvider::computeState(const double timestamp) const {
+  if (shouldFinish(timestamp)) {
+    return AnimationProgressState::Finished;
+  }
+  if (pauseTimestamp_ > 0) {
+    return AnimationProgressState::Paused;
+  }
+  if (timestamp < getStartTimestamp(timestamp) || !rawProgress_.has_value()) {
+    return AnimationProgressState::Pending;
+  }
+  return AnimationProgressState::Running;
+}
+
 double AnimationProgressProvider::updateIterationProgress(const double currentIterationElapsedTime) {
   if (duration_ == 0) {
     return 1;

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/progress/AnimationProgressProvider.h

@@ -26,7 +26,7 @@ class AnimationProgressProvider final : public KeyframeProgressProvider, public
       double iterationCount,
       AnimationDirection direction,
       EasingFunction easingFunction,
-      const std::shared_ptr<KeyframeEasingFunctions> &keyframeEasingFunctions);
+      const std::shared_ptr<KeyframeEasingConfigs> &keyframeEasingConfigs);
 
   void setIterationCount(double iterationCount);
   void setDirection(AnimationDirection direction);
@@ -35,13 +35,13 @@ class AnimationProgressProvider final : public KeyframeProgressProvider, public
   AnimationDirection getDirection() const;
   double getGlobalProgress() const override;
   double getKeyframeProgress(double fromOffset, double toOffset) const override;
-  AnimationProgressState getState(double timestamp) const;
-  double getPauseTimestamp() const;
-  double getTotalPausedTime(double timestamp) const;
+
+  AnimationProgressState getState() const;
   double getStartTimestamp(double timestamp) const;
 
   void pause(double timestamp);
   void play(double timestamp);
+  void update(double timestamp) override;
   void resetProgress() override;
 
  protected:
@@ -51,14 +51,17 @@ class AnimationProgressProvider final : public KeyframeProgressProvider, public
   double iterationCount_;
   AnimationDirection direction_;
   EasingFunction easingFunction_;
-  std::shared_ptr<KeyframeEasingFunctions> keyframeEasingFunctions_;
+  std::shared_ptr<KeyframeEasingConfigs> keyframeEasingConfigs_;
 
+  AnimationProgressState state_ = AnimationProgressState::Pending;
   unsigned currentIteration_ = 1;
   double previousIterationsDuration_ = 0;
   double pauseTimestamp_ = 0;
   double totalPausedTime_ = 0;
 
+  double getTotalPausedTime(double timestamp) const;
   bool shouldFinish(double timestamp) const;
+  AnimationProgressState computeState(double timestamp) const;
 
   double updateIterationProgress(double currentIterationElapsedTime);
   double applyAnimationDirection(double iterationProgress) const;

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/progress/RawProgressProvider.cpp

@@ -15,11 +15,10 @@ void RawProgressProvider::setDelay(double delay) {
 
 void RawProgressProvider::resetProgress() {
   rawProgress_.reset();
-  previousRawProgress_.reset();
 }
 
 void RawProgressProvider::update(const double timestamp) {
-  previousRawProgress_ = rawProgress_;
+  lastTimestamp_ = timestamp;
 
   if (timestamp - creationTimestamp_ < delay_) {
     rawProgress_.reset();

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/progress/RawProgressProvider.h

@@ -1,6 +1,7 @@
 #pragma once
 
 #include <optional>
+
 namespace reanimated::css {
 
 class RawProgressProvider {
@@ -11,15 +12,15 @@ class RawProgressProvider {
   void setDelay(double delay);
 
   virtual void resetProgress();
-  void update(double timestamp);
+  virtual void update(double timestamp);
 
  protected:
   double duration_;
   double delay_;
   double creationTimestamp_;
+  double lastTimestamp_{0};
 
   std::optional<double> rawProgress_;
-  std::optional<double> previousRawProgress_;
 
   /**
    * Calculates the progress of the animation at the given timestamp without

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/progress/TransitionProgressProvider.cpp

@@ -1,9 +1,12 @@
 #include <reanimated/CSS/progress/TransitionProgressProvider.h>
 
+#include <reanimated/CSS/utils/reversingShortening.h>
+
 #include <limits>
 #include <memory>
 #include <string>
 #include <unordered_set>
+#include <utility>
 
 namespace reanimated::css {
 
@@ -13,17 +16,20 @@ TransitionPropertyProgressProvider::TransitionPropertyProgressProvider(
     const double timestamp,
     const double duration,
     const double delay,
-    const EasingFunction &easingFunction)
-    : RawProgressProvider(timestamp, duration, delay), easingFunction_(easingFunction) {}
+    EasingConfig easing)
+    : RawProgressProvider(timestamp, duration, delay),
+      easing_(std::move(easing)),
+      easingFunction_(getEasingFunctionFromConfig(easing_)) {}
 
 TransitionPropertyProgressProvider::TransitionPropertyProgressProvider(
     const double timestamp,
     const double duration,
     const double delay,
-    const EasingFunction &easingFunction,
+    EasingConfig easing,
     const double reversingShorteningFactor)
     : RawProgressProvider(timestamp, duration, delay),
-      easingFunction_(easingFunction),
+      easing_(std::move(easing)),
+      easingFunction_(getEasingFunctionFromConfig(easing_)),
       reversingShorteningFactor_(reversingShorteningFactor) {}
 
 double TransitionPropertyProgressProvider::getGlobalProgress() const {
@@ -41,17 +47,18 @@ double TransitionPropertyProgressProvider::getRemainingDelay(const double timest
   return delay_ - (timestamp - creationTimestamp_);
 }
 
-double TransitionPropertyProgressProvider::getReversingShorteningFactor() const {
-  return reversingShorteningFactor_;
+ReversingState TransitionPropertyProgressProvider::getReversingState() const {
+  return {reversingShorteningFactor_, creationTimestamp_ + delay_, duration_, delay_, easing_};
 }
 
 TransitionProgressState TransitionPropertyProgressProvider::getState() const {
+  // rawProgress_ is empty until the property's delay has passed
+  // (RawProgressProvider::update resets it while timestamp < creationTimestamp + delay)
   if (!rawProgress_.has_value()) {
     return TransitionProgressState::Pending;
   }
-  const auto rawProgress = rawProgress_.value();
-  if (rawProgress >= 1) {
-    return TransitionProgressState::Finished;
+  if (rawProgress_.value() >= 1) {
+    return TransitionProgressState::Idle;
   }
   return TransitionProgressState::Running;
 }
@@ -70,12 +77,14 @@ double TransitionPropertyProgressProvider::getElapsedTime(const double timestamp
 // TransitionProgressProvider
 
 TransitionProgressState TransitionProgressProvider::getState() const {
-  for (const auto &[_, propertyProgressProvider] : propertyProgressProviders_) {
-    if (propertyProgressProvider->getState() == TransitionProgressState::Running) {
-      return TransitionProgressState::Running;
+  for (const auto &[_, progressProvider] : propertyProgressProviders_) {
+    const auto state = progressProvider->getState();
+    if (state != TransitionProgressState::Idle) {
+      return state;
     }
   }
-  return TransitionProgressState::Pending;
+
+  return TransitionProgressState::Idle;
 }
 
 double TransitionProgressProvider::getMinDelay(const double timestamp) const {
@@ -102,63 +111,51 @@ std::unordered_set<std::string> TransitionProgressProvider::getRemovedProperties
   return removedProperties_;
 }
 
-void TransitionProgressProvider::discardFinishedProgressProviders() {
-  for (auto it = propertyProgressProviders_.begin(); it != propertyProgressProviders_.end();) {
-    if (it->second->getState() == TransitionProgressState::Finished) {
-      it = propertyProgressProviders_.erase(it);
-    } else {
-      ++it;
+void TransitionProgressProvider::runProgressProvider(
+    const std::string &propertyName,
+    const bool isReversed,
+    const double timestamp) {
+
+  const auto &settings = propertySettings_.at(propertyName);
+
+  const auto providerIt = propertyProgressProviders_.find(propertyName);
+
+  if (providerIt != propertyProgressProviders_.end()) {
+    const auto &progressProvider = providerIt->second;
+    progressProvider->update(timestamp);
+
+    if (isReversed && progressProvider->getState() != TransitionProgressState::Idle) {
+      // Create reversing shortening progress provider for interrupted reversing transition
+      propertyProgressProviders_.insert_or_assign(
+          propertyName, createReversingShorteningProgressProvider(timestamp, settings, *progressProvider));
+      return;
     }
   }
+
+  // Create progress provider with the new settings
+  propertyProgressProviders_.insert_or_assign(
+      propertyName,
+      std::make_shared<TransitionPropertyProgressProvider>(
+          timestamp, settings.duration, settings.delay, settings.easingConfig));
 }
 
-void TransitionProgressProvider::discardIrrelevantProgressProviders(
-    const std::unordered_set<std::string> &transitionPropertyNames) {
-  for (auto it = propertyProgressProviders_.begin(); it != propertyProgressProviders_.end();) {
-    // Remove property progress providers for properties not specified in the
-    // transition property names
-    if (transitionPropertyNames.find(it->first) == transitionPropertyNames.end()) {
-      it = propertyProgressProviders_.erase(it);
-    } else {
-      ++it;
-    }
+void TransitionProgressProvider::removeProperties(const std::vector<std::string> &propertyNames) {
+  for (const auto &propertyName : propertyNames) {
+    propertyProgressProviders_.erase(propertyName);
   }
 }
 
-void TransitionProgressProvider::runProgressProviders(
-    const double timestamp,
-    const CSSTransitionPropertiesSettings &propertiesSettings,
-    const PropertyNames &changedPropertyNames,
-    const std::unordered_set<std::string> &reversedPropertyNames) {
-  for (const auto &propertyName : changedPropertyNames) {
-    const auto propertySettingsOptional = getTransitionPropertySettings(propertiesSettings, propertyName);
-
-    if (!propertySettingsOptional.has_value()) {
-      throw std::invalid_argument("[Reanimated] Property '" + propertyName + "' is not a valid transition property");
-    }
+void TransitionProgressProvider::removeProperty(const std::string &propertyName) {
+  propertyProgressProviders_.erase(propertyName);
+}
 
-    const auto &propertySettings = propertySettingsOptional.value();
-    const auto it = propertyProgressProviders_.find(propertyName);
-
-    if (it != propertyProgressProviders_.end()) {
-      const auto &progressProvider = it->second;
-      progressProvider->update(timestamp);
-
-      if (reversedPropertyNames.find(propertyName) != reversedPropertyNames.end() &&
-          progressProvider->getState() != TransitionProgressState::Finished) {
-        // Create reversing shortening progress provider for interrupted
-        // reversing transition
-        propertyProgressProviders_.insert_or_assign(
-            propertyName, createReversingShorteningProgressProvider(timestamp, propertySettings, *progressProvider));
-        continue;
-      }
+void TransitionProgressProvider::discardFinishedProgressProviders() {
+  for (auto it = propertyProgressProviders_.begin(); it != propertyProgressProviders_.end();) {
+    if (it->second->getState() == TransitionProgressState::Idle) {
+      it = propertyProgressProviders_.erase(it);
+    } else {
+      ++it;
     }
-
-    // Create progress provider with the new settings
-    propertyProgressProviders_.insert_or_assign(
-        propertyName,
-        std::make_shared<TransitionPropertyProgressProvider>(
-            timestamp, propertySettings.duration, propertySettings.delay, propertySettings.easingFunction));
   }
 }
 
@@ -167,7 +164,7 @@ void TransitionProgressProvider::update(const double timestamp) {
 
   for (const auto &[propertyName, propertyProgressProvider] : propertyProgressProviders_) {
     propertyProgressProvider->update(timestamp);
-    if (propertyProgressProvider->getState() == TransitionProgressState::Finished) {
+    if (propertyProgressProvider->getState() == TransitionProgressState::Idle) {
       removedProperties_.insert(propertyName);
     }
   }
@@ -178,16 +175,24 @@ TransitionProgressProvider::createReversingShorteningProgressProvider(
     const double timestamp,
     const CSSTransitionPropertySettings &propertySettings,
     const TransitionPropertyProgressProvider &existingProgressProvider) {
-  const auto oldProgress = existingProgressProvider.getKeyframeProgress(0, 1);
-  const auto oldReversingShorteningFactor = existingProgressProvider.getReversingShorteningFactor();
-  auto newReversingShorteningFactor = oldProgress * oldReversingShorteningFactor + (1 - oldReversingShorteningFactor);
-
-  return std::make_shared<TransitionPropertyProgressProvider>(
+  const auto rs = reverseShorten(
+      existingProgressProvider.getReversingState(),
       timestamp,
-      propertySettings.duration * newReversingShorteningFactor,
-      propertySettings.delay < 0 ? newReversingShorteningFactor * propertySettings.delay : propertySettings.delay,
-      propertySettings.easingFunction,
-      newReversingShorteningFactor);
+      propertySettings.duration,
+      propertySettings.delay,
+      propertySettings.easingConfig);
+
+  return std::make_shared<TransitionPropertyProgressProvider>(timestamp, rs.duration, rs.delay, rs.easing, rs.factor);
+}
+
+void TransitionProgressProvider::setPropertySettings(const PropertiesSettingsMap &changedPropertiesSettings) {
+  for (const auto &[propertyName, propertySettings] : changedPropertiesSettings) {
+    propertySettings_[propertyName] = propertySettings;
+  }
+}
+
+CSSTransitionPropertySettings TransitionProgressProvider::getPropertySettings(const std::string &propertyName) const {
+  return propertySettings_.at(propertyName);
 }
 
 } // namespace reanimated::css