react-native 0.0.0-17be3a003 → 0.0.0-18697adec

package/ReactCommon/react/renderer/animations/LayoutAnimationKeyFrameManager.cpp

@@ -8,25 +8,24 @@
 #include "LayoutAnimationKeyFrameManager.h"
 
 #include <algorithm>
-#include <chrono>
 
 #include <react/debug/flags.h>
 #include <react/debug/react_native_assert.h>
 
+#include <logger/react_native_log.h>
+#include <react/renderer/animations/conversions.h>
+#include <react/renderer/animations/utils.h>
 #include <react/renderer/componentregistry/ComponentDescriptorFactory.h>
-#include <react/renderer/components/root/RootShadowNode.h>
+#include <react/renderer/components/image/ImageProps.h>
 #include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/core/ComponentDescriptor.h>
 #include <react/renderer/core/LayoutMetrics.h>
-#include <react/renderer/core/LayoutableShadowNode.h>
 #include <react/renderer/core/Props.h>
+#include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/core/RawValue.h>
 #include <react/renderer/mounting/MountingCoordinator.h>
-#include <react/renderer/mounting/ShadowViewMutation.h>
-
-#include <react/renderer/mounting/Differentiator.h>
-#include <react/renderer/mounting/ShadowTreeRevision.h>
 #include <react/renderer/mounting/ShadowView.h>
+#include <react/renderer/mounting/ShadowViewMutation.h>
 
 #include <glog/logging.h>
 
@@ -74,6 +73,7 @@ void PrintMutationInstruction(
     return stream;
   }(LOG(ERROR));
 }
+
 void PrintMutationInstructionRelative(
     std::string message,
     ShadowViewMutation const &mutation,
@@ -85,199 +85,27 @@ void PrintMutationInstructionRelative(
 }
 #endif
 
-static better::optional<AnimationType> parseAnimationType(std::string param) {
-  if (param == "spring") {
-    return AnimationType::Spring;
-  }
-  if (param == "linear") {
-    return AnimationType::Linear;
-  }
-  if (param == "easeInEaseOut") {
-    return AnimationType::EaseInEaseOut;
-  }
-  if (param == "easeIn") {
-    return AnimationType::EaseIn;
-  }
-  if (param == "easeOut") {
-    return AnimationType::EaseOut;
-  }
-  if (param == "keyboard") {
-    return AnimationType::Keyboard;
-  }
-
-  LOG(ERROR) << "Error parsing animation type: " << param;
-  return {};
-}
-
-static better::optional<AnimationProperty> parseAnimationProperty(
-    std::string param) {
-  if (param == "opacity") {
-    return AnimationProperty::Opacity;
-  }
-  if (param == "scaleX") {
-    return AnimationProperty::ScaleX;
-  }
-  if (param == "scaleY") {
-    return AnimationProperty::ScaleY;
-  }
-  if (param == "scaleXY") {
-    return AnimationProperty::ScaleXY;
-  }
-
-  LOG(ERROR) << "Error parsing animation property: " << param;
-  return {};
-}
-
-static better::optional<AnimationConfig> parseAnimationConfig(
-    folly::dynamic const &config,
-    double defaultDuration,
-    bool parsePropertyType) {
-  if (config.empty() || !config.isObject()) {
-    return AnimationConfig{
-        AnimationType::Linear,
-        AnimationProperty::NotApplicable,
-        defaultDuration,
-        0,
-        0,
-        0};
-  }
-
-  auto const typeIt = config.find("type");
-  if (typeIt == config.items().end()) {
-    LOG(ERROR) << "Error parsing animation config: could not find field `type`";
-    return {};
-  }
-  auto const animationTypeParam = typeIt->second;
-  if (animationTypeParam.empty() || !animationTypeParam.isString()) {
-    LOG(ERROR)
-        << "Error parsing animation config: could not unwrap field `type`";
-    return {};
-  }
-  const auto animationType = parseAnimationType(animationTypeParam.asString());
-  if (!animationType) {
-    LOG(ERROR)
-        << "Error parsing animation config: could not parse field `type`";
-    return {};
-  }
-
-  AnimationProperty animationProperty = AnimationProperty::NotApplicable;
-  if (parsePropertyType) {
-    auto const propertyIt = config.find("property");
-    if (propertyIt == config.items().end()) {
-      LOG(ERROR)
-          << "Error parsing animation config: could not find field `property`";
-      return {};
-    }
-    auto const animationPropertyParam = propertyIt->second;
-    if (animationPropertyParam.empty() || !animationPropertyParam.isString()) {
-      LOG(ERROR)
-          << "Error parsing animation config: could not unwrap field `property`";
-      return {};
-    }
-    const auto animationPropertyParsed =
-        parseAnimationProperty(animationPropertyParam.asString());
-    if (!animationPropertyParsed) {
-      LOG(ERROR)
-          << "Error parsing animation config: could not parse field `property`";
-      return {};
-    }
-    animationProperty = *animationPropertyParsed;
-  }
-
-  double duration = defaultDuration;
-  double delay = 0;
-  double springDamping = 0.5;
-  double initialVelocity = 0;
-
-  auto const durationIt = config.find("duration");
-  if (durationIt != config.items().end()) {
-    if (durationIt->second.isDouble()) {
-      duration = durationIt->second.asDouble();
-    } else {
-      LOG(ERROR)
-          << "Error parsing animation config: field `duration` must be a number";
-      return {};
-    }
-  }
-
-  auto const delayIt = config.find("delay");
-  if (delayIt != config.items().end()) {
-    if (delayIt->second.isDouble()) {
-      delay = delayIt->second.asDouble();
-    } else {
-      LOG(ERROR)
-          << "Error parsing animation config: field `delay` must be a number";
-      return {};
-    }
-  }
-
-  auto const springDampingIt = config.find("springDamping");
-  if (springDampingIt != config.items().end() &&
-      springDampingIt->second.isDouble()) {
-    if (springDampingIt->second.isDouble()) {
-      springDamping = springDampingIt->second.asDouble();
-    } else {
-      LOG(ERROR)
-          << "Error parsing animation config: field `springDamping` must be a number";
-      return {};
-    }
-  }
-
-  auto const initialVelocityIt = config.find("initialVelocity");
-  if (initialVelocityIt != config.items().end()) {
-    if (initialVelocityIt->second.isDouble()) {
-      initialVelocity = initialVelocityIt->second.asDouble();
-    } else {
-      LOG(ERROR)
-          << "Error parsing animation config: field `initialVelocity` must be a number";
-      return {};
-    }
-  }
-
-  return better::optional<AnimationConfig>(AnimationConfig{
-      *animationType,
-      animationProperty,
-      duration,
-      delay,
-      springDamping,
-      initialVelocity});
+static inline float
+interpolateFloats(float coefficient, float oldValue, float newValue) {
+  return oldValue + (newValue - oldValue) * coefficient;
 }
 
-// Parse animation config from JS
-static better::optional<LayoutAnimationConfig> parseLayoutAnimationConfig(
-    folly::dynamic const &config) {
-  if (config.empty() || !config.isObject()) {
-    return {};
-  }
-
-  const auto durationIt = config.find("duration");
-  if (durationIt == config.items().end() || !durationIt->second.isDouble()) {
-    return {};
-  }
-  const double duration = durationIt->second.asDouble();
-
-  const auto createConfigIt = config.find("create");
-  const auto createConfig = createConfigIt == config.items().end()
-      ? better::optional<AnimationConfig>(AnimationConfig{})
-      : parseAnimationConfig(createConfigIt->second, duration, true);
-
-  const auto updateConfigIt = config.find("update");
-  const auto updateConfig = updateConfigIt == config.items().end()
-      ? better::optional<AnimationConfig>(AnimationConfig{})
-      : parseAnimationConfig(updateConfigIt->second, duration, false);
+#pragma mark -
 
-  const auto deleteConfigIt = config.find("delete");
-  const auto deleteConfig = deleteConfigIt == config.items().end()
-      ? better::optional<AnimationConfig>(AnimationConfig{})
-      : parseAnimationConfig(deleteConfigIt->second, duration, true);
+LayoutAnimationKeyFrameManager::LayoutAnimationKeyFrameManager(
+    RuntimeExecutor runtimeExecutor,
+    ContextContainer::Shared &contextContainer,
+    LayoutAnimationStatusDelegate *delegate)
+    : runtimeExecutor_(runtimeExecutor),
+      contextContainer_(contextContainer),
+      layoutAnimationStatusDelegate_(delegate),
+      now_([]() {
+        return std::chrono::duration_cast<std::chrono::milliseconds>(
+                   std::chrono::high_resolution_clock::now().time_since_epoch())
+            .count();
+      }) {}
 
-  if (!createConfig || !updateConfig || !deleteConfig) {
-    return {};
-  }
-
-  return better::optional<LayoutAnimationConfig>(LayoutAnimationConfig{
-      duration, *createConfig, *updateConfig, *deleteConfig});
-}
+#pragma mark UIManagerAnimationDelegate methods
 
 /**
  * Globally configure next LayoutAnimation.
@@ -307,14 +135,14 @@ void LayoutAnimationKeyFrameManager::uiManagerDidConfigureNextLayoutAnimation(
   if (layoutAnimationConfig) {
     std::lock_guard<std::mutex> lock(currentAnimationMutex_);
 
-    currentAnimation_ = better::optional<LayoutAnimation>{LayoutAnimation{
+    uiManagerDidConfigureNextLayoutAnimation(LayoutAnimation{
         -1,
         0,
         false,
         *layoutAnimationConfig,
         successCallback,
         failureCallback,
-        {}}};
+        {}});
   } else {
     LOG(ERROR) << "Parsing LayoutAnimationConfig failed: "
                << (folly::dynamic)config;
@@ -323,19 +151,9 @@ void LayoutAnimationKeyFrameManager::uiManagerDidConfigureNextLayoutAnimation(
   }
 }
 
-void LayoutAnimationKeyFrameManager::setLayoutAnimationStatusDelegate(
-    LayoutAnimationStatusDelegate *delegate) const {
-  std::lock_guard<std::mutex> lock(layoutAnimationStatusDelegateMutex_);
-  layoutAnimationStatusDelegate_ = delegate;
-}
-
-bool LayoutAnimationKeyFrameManager::shouldOverridePullTransaction() const {
-  return shouldAnimateFrame();
-}
-
-void LayoutAnimationKeyFrameManager::stopSurface(SurfaceId surfaceId) {
-  std::lock_guard<std::mutex> lock(surfaceIdsToStopMutex_);
-  surfaceIdsToStop_.push_back(surfaceId);
+void LayoutAnimationKeyFrameManager::setComponentDescriptorRegistry(
+    const SharedComponentDescriptorRegistry &componentDescriptorRegistry) {
+  componentDescriptorRegistry_ = componentDescriptorRegistry;
 }
 
 bool LayoutAnimationKeyFrameManager::shouldAnimateFrame() const {
@@ -343,980 +161,582 @@ bool LayoutAnimationKeyFrameManager::shouldAnimateFrame() const {
   return currentAnimation_ || !inflightAnimations_.empty();
 }
 
-static inline const float
-interpolateFloats(float coefficient, float oldValue, float newValue) {
-  return oldValue + (newValue - oldValue) * coefficient;
+void LayoutAnimationKeyFrameManager::stopSurface(SurfaceId surfaceId) {
+  std::lock_guard<std::mutex> lock(surfaceIdsToStopMutex_);
+  surfaceIdsToStop_.insert(surfaceId);
 }
 
-std::pair<double, double>
-LayoutAnimationKeyFrameManager::calculateAnimationProgress(
-    uint64_t now,
-    const LayoutAnimation &animation,
-    const AnimationConfig &mutationConfig) const {
-  if (mutationConfig.animationType == AnimationType::None) {
-    return {1, 1};
-  }
-
-  uint64_t startTime = animation.startTime;
-  uint64_t delay = mutationConfig.delay;
-  uint64_t endTime = startTime + delay + mutationConfig.duration;
+#pragma mark - MountingOverrideDelegate methods
 
-  static const float PI = 3.14159265358979323846;
-
-  if (now >= endTime) {
-    return {1, 1};
-  }
-  if (now < startTime + delay) {
-    return {0, 0};
-  }
-
-  double linearTimeProgression = 1 -
-      (double)(endTime - delay - now) / (double)(endTime - animation.startTime);
-
-  if (mutationConfig.animationType == AnimationType::Linear) {
-    return {linearTimeProgression, linearTimeProgression};
-  } else if (mutationConfig.animationType == AnimationType::EaseIn) {
-    // This is an accelerator-style interpolator.
-    // In the future, this parameter (2.0) could be adjusted. This has been the
-    // default for Classic RN forever.
-    return {linearTimeProgression, pow(linearTimeProgression, 2.0)};
-  } else if (mutationConfig.animationType == AnimationType::EaseOut) {
-    // This is an decelerator-style interpolator.
-    // In the future, this parameter (2.0) could be adjusted. This has been the
-    // default for Classic RN forever.
-    return {linearTimeProgression, 1.0 - pow(1 - linearTimeProgression, 2.0)};
-  } else if (mutationConfig.animationType == AnimationType::EaseInEaseOut) {
-    // This is a combination of accelerate+decelerate.
-    // The animation starts and ends slowly, and speeds up in the middle.
-    return {
-        linearTimeProgression,
-        cos((linearTimeProgression + 1.0) * PI) / 2 + 0.5};
-  } else if (mutationConfig.animationType == AnimationType::Spring) {
-    // Using mSpringDamping in this equation is not really the exact
-    // mathematical springDamping, but a good approximation We need to replace
-    // this equation with the right Factor that accounts for damping and
-    // friction
-    double damping = mutationConfig.springDamping;
-    return {
-        linearTimeProgression,
-        (1 +
-         pow(2, -10 * linearTimeProgression) *
-             sin((linearTimeProgression - damping / 4) * PI * 2 / damping))};
-  } else {
-    return {linearTimeProgression, linearTimeProgression};
-  }
+bool LayoutAnimationKeyFrameManager::shouldOverridePullTransaction() const {
+  return shouldAnimateFrame();
 }
 
-void LayoutAnimationKeyFrameManager::
-    adjustImmediateMutationIndicesForDelayedMutations(
-        SurfaceId surfaceId,
-        ShadowViewMutation &mutation,
-        bool skipLastAnimation,
-        bool lastAnimationOnly) const {
-  bool isRemoveMutation = mutation.type == ShadowViewMutation::Type::Remove;
-  react_native_assert(
-      isRemoveMutation || mutation.type == ShadowViewMutation::Type::Insert);
-
-  // TODO: turn all of this into a lambda and share code?
-  if (mutation.mutatedViewIsVirtual()) {
-    PrintMutationInstruction(
-        "[IndexAdjustment] Not calling adjustImmediateMutationIndicesForDelayedMutations, is virtual, for:",
-        mutation);
-    return;
-  }
+better::optional<MountingTransaction>
+LayoutAnimationKeyFrameManager::pullTransaction(
+    SurfaceId surfaceId,
+    MountingTransaction::Number transactionNumber,
+    TransactionTelemetry const &telemetry,
+    ShadowViewMutationList mutations) const {
+  simulateImagePropsMemoryAccess(mutations);
+  // Current time in milliseconds
+  uint64_t now = now_();
 
-  PrintMutationInstruction(
-      "[IndexAdjustment] Calling adjustImmediateMutationIndicesForDelayedMutations for:",
-      mutation);
+  bool inflightAnimationsExistInitially = !inflightAnimations_.empty();
+  deleteAnimationsForStoppedSurfaces();
 
-  // First, collect all final mutations that could impact this immediate
-  // mutation.
-  std::vector<ShadowViewMutation *> candidateMutations{};
+  if (!mutations.empty()) {
+#ifdef RN_SHADOW_TREE_INTROSPECTION
+    {
+      std::stringstream ss(getDebugDescription(mutations, {}));
+      std::string to;
+      while (std::getline(ss, to, '\n')) {
+        LOG(ERROR)
+            << "LayoutAnimationKeyFrameManager.cpp: got mutation list: Line: "
+            << to;
+      }
+    };
+#endif
 
-  for (auto inflightAnimationIt =
-           inflightAnimations_.rbegin() + (skipLastAnimation ? 1 : 0);
-       inflightAnimationIt != inflightAnimations_.rend();
-       inflightAnimationIt++) {
-    auto &inflightAnimation = *inflightAnimationIt;
-    if (inflightAnimation.surfaceId != surfaceId) {
-      continue;
-    }
-    if (inflightAnimation.completed) {
-      continue;
+      // DEBUG ONLY: list existing inflight animations
+#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
+    LOG(ERROR) << "BEGINNING DISPLAYING ONGOING inflightAnimations_!";
+    int i = 0;
+    int j = 0;
+    for (auto const &inflightAnimation : inflightAnimations_) {
+      i++;
+      j = 0;
+      if (inflightAnimation.completed) {
+        continue;
+      }
+      for (auto &keyframe : inflightAnimation.keyFrames) {
+        j++;
+        if (keyframe.invalidated) {
+          continue;
+        }
+        for (const auto &finalMutationForKeyFrame :
+             keyframe.finalMutationsForKeyFrame) {
+          if (finalMutationForKeyFrame.mutatedViewIsVirtual()) {
+            std::string msg = "Animation " + std::to_string(i) + " keyframe " +
+                std::to_string(j) + ": Final Animation";
+            PrintMutationInstruction(msg, finalMutationForKeyFrame);
+          } else {
+            LOG(ERROR) << "Animation " << i << " keyframe " << j
+                       << ": on tag: [" << keyframe.viewStart.tag << "]";
+          }
+        }
+      }
     }
+    LOG(ERROR) << "BEGINNING DONE DISPLAYING ONGOING inflightAnimations_!";
+#endif
 
-    for (auto it = inflightAnimation.keyFrames.begin();
-         it != inflightAnimation.keyFrames.end();
-         it++) {
-      auto &animatedKeyFrame = *it;
+    PropsParserContext propsParserContext{surfaceId, *contextContainer_};
 
-      if (animatedKeyFrame.invalidated) {
-        continue;
-      }
+    // What to do if we detect a conflict? Get current value and make
+    // that the baseline of the next animation. Scale the remaining time
+    // in the animation
+    // Types of conflicts and how we handle them:
+    // Update -> update: remove the previous update, make it the baseline of the
+    // next update (with current progress) Update -> remove: same, with final
+    // mutation being a remove Insert -> update: treat as update->update Insert
+    // -> remove: same, as update->remove Remove -> update/insert: not possible
+    // We just collect pairs here of <Mutation, AnimationConfig> and delete them
+    // from active animations. If another animation is queued up from the
+    // current mutations then these deleted mutations will serve as the baseline
+    // for the next animation. If not, the current mutations are executed
+    // immediately without issues.
+    std::vector<AnimationKeyFrame> conflictingAnimations{};
+    getAndEraseConflictingAnimations(
+        surfaceId, mutations, conflictingAnimations);
 
-      // Detect if they're in the same view hierarchy, but not equivalent
-      // We've already detected direct conflicts and removed them.
-      if (animatedKeyFrame.parentView.tag != mutation.parentShadowView.tag) {
-        continue;
+    // Are we animating this list of mutations?
+    better::optional<LayoutAnimation> currentAnimation{};
+    {
+      std::lock_guard<std::mutex> lock(currentAnimationMutex_);
+      if (currentAnimation_) {
+        currentAnimation = std::move(currentAnimation_);
+        currentAnimation_.reset();
       }
+    }
 
-      for (auto &delayedMutation : animatedKeyFrame.finalMutationsForKeyFrame) {
-        if (delayedMutation.type != ShadowViewMutation::Type::Remove) {
-          continue;
+    if (currentAnimation.hasValue()) {
+      LayoutAnimation animation = std::move(currentAnimation).value();
+      animation.surfaceId = surfaceId;
+      animation.startTime = now;
+
+      // Pre-process list to:
+      //   Catch remove+reinsert (reorders)
+      //   Catch delete+create (reparenting) (this should be optimized away at
+      //   the diffing level eventually?)
+      // TODO: to prevent this step we could tag Remove/Insert mutations as
+      // being moves on the Differ level, since we know that there? We could use
+      // TinyMap here, but it's not exposed by Differentiator (yet).
+      better::set<Tag> insertedTags;
+      better::set<Tag> deletedTags;
+      better::set<Tag> reparentedTags; // tags that are deleted and recreated
+      std::unordered_map<Tag, ShadowViewMutation> movedTags;
+      for (const auto &mutation : mutations) {
+        if (mutation.type == ShadowViewMutation::Type::Insert) {
+          insertedTags.insert(mutation.newChildShadowView.tag);
         }
-        if (delayedMutation.mutatedViewIsVirtual()) {
-          continue;
+        if (mutation.type == ShadowViewMutation::Type::Delete) {
+          deletedTags.insert(mutation.oldChildShadowView.tag);
         }
-        if (delayedMutation.oldChildShadowView.tag ==
-            (isRemoveMutation ? mutation.oldChildShadowView.tag
-                              : mutation.newChildShadowView.tag)) {
-          continue;
+        if (mutation.type == ShadowViewMutation::Type::Create) {
+          if (deletedTags.find(mutation.newChildShadowView.tag) !=
+              deletedTags.end()) {
+            reparentedTags.insert(mutation.newChildShadowView.tag);
+          }
         }
-
-        PrintMutationInstructionRelative(
-            "[IndexAdjustment] adjustImmediateMutationIndicesForDelayedMutations CANDIDATE for:",
-            mutation,
-            delayedMutation);
-        candidateMutations.push_back(&delayedMutation);
       }
-    }
 
-    if (lastAnimationOnly) {
-      break;
-    }
-  }
+      // Process mutations list into operations that can be sent to platform
+      // immediately, and those that need to be animated Deletions, removals,
+      // updates are delayed and animated. Creations and insertions are sent to
+      // platform and then "animated in" with opacity updates. Upon completion,
+      // removals and deletions are sent to platform
+      ShadowViewMutation::List immediateMutations;
 
-  // While the mutation keeps being affected, keep checking. We use the vector
-  // so we only perform one adjustment per delayed mutation. See comments at
-  // bottom of adjustDelayedMutationIndicesForMutation for further explanation.
-  bool changed = true;
-  int adjustedDelta = 0;
-  while (changed) {
-    changed = false;
-    candidateMutations.erase(
-        std::remove_if(
-            candidateMutations.begin(),
-            candidateMutations.end(),
-            [&changed, &mutation, &adjustedDelta, &isRemoveMutation](
-                ShadowViewMutation *candidateMutation) {
-              bool indexConflicts =
-                  (candidateMutation->index < mutation.index ||
-                   (isRemoveMutation &&
-                    candidateMutation->index == mutation.index));
-              if (indexConflicts) {
-                mutation.index++;
-                adjustedDelta++;
-                changed = true;
-                PrintMutationInstructionRelative(
-                    "[IndexAdjustment] adjustImmediateMutationIndicesForDelayedMutations: Adjusting mutation UPWARD",
-                    mutation,
-                    *candidateMutation);
-                return true;
-              }
-              return false;
-            }),
-        candidateMutations.end());
-  }
-}
-
-void LayoutAnimationKeyFrameManager::adjustDelayedMutationIndicesForMutation(
-    SurfaceId surfaceId,
-    ShadowViewMutation const &mutation,
-    bool skipLastAnimation) const {
-  bool isRemoveMutation = mutation.type == ShadowViewMutation::Type::Remove;
-  bool isInsertMutation = mutation.type == ShadowViewMutation::Type::Insert;
-  auto tag = isRemoveMutation ? mutation.oldChildShadowView.tag
-                              : mutation.newChildShadowView.tag;
-  react_native_assert(isRemoveMutation || isInsertMutation);
+      // Remove operations that are actually moves should be copied to
+      // "immediate mutations". The corresponding "insert" will also be executed
+      // immediately and animated as an update.
+      std::vector<AnimationKeyFrame> keyFramesToAnimate;
+      auto const layoutAnimationConfig = animation.layoutAnimationConfig;
+      for (auto const &mutation : mutations) {
+        ShadowView baselineShadowView =
+            (mutation.type == ShadowViewMutation::Type::Delete ||
+                     mutation.type == ShadowViewMutation::Type::Remove ||
+                     mutation.type == ShadowViewMutation::Type::Update
+                 ? mutation.oldChildShadowView
+                 : mutation.newChildShadowView);
+        react_native_assert(baselineShadowView.tag > 0);
+        bool haveComponentDescriptor =
+            hasComponentDescriptorForShadowView(baselineShadowView);
 
-  if (mutation.mutatedViewIsVirtual()) {
-    PrintMutationInstruction(
-        "[IndexAdjustment] Not calling adjustDelayedMutationIndicesForMutation, is virtual, for:",
-        mutation);
-    return;
-  }
+        // Immediately execute any mutations on a root node
+        if (baselineShadowView.traits.check(
+                ShadowNodeTraits::Trait::RootNodeKind)) {
+          immediateMutations.push_back(mutation);
+          continue;
+        }
 
-  // First, collect all final mutations that could impact this immediate
-  // mutation.
-  std::vector<ShadowViewMutation *> candidateMutations{};
+        better::optional<ShadowViewMutation> executeMutationImmediately{};
 
-  for (auto inflightAnimationIt =
-           inflightAnimations_.rbegin() + (skipLastAnimation ? 1 : 0);
-       inflightAnimationIt != inflightAnimations_.rend();
-       inflightAnimationIt++) {
-    auto &inflightAnimation = *inflightAnimationIt;
+        bool isRemoveReinserted =
+            mutation.type == ShadowViewMutation::Type::Remove &&
+            insertedTags.find(mutation.oldChildShadowView.tag) !=
+                insertedTags.end();
 
-    if (inflightAnimation.surfaceId != surfaceId) {
-      continue;
-    }
-    if (inflightAnimation.completed) {
-      continue;
-    }
+        // Reparenting can result in a node being removed, inserted (moved) and
+        // also deleted and created in the same frame, with the same props etc.
+        // This should eventually be optimized out of the diffing algorithm, but
+        // for now we detect reparenting and prevent the corresponding
+        // Delete/Create instructions from being animated.
+        bool isReparented =
+            reparentedTags.find(baselineShadowView.tag) != reparentedTags.end();
 
-    for (auto it = inflightAnimation.keyFrames.begin();
-         it != inflightAnimation.keyFrames.end();
-         it++) {
-      auto &animatedKeyFrame = *it;
+        if (isRemoveReinserted) {
+          movedTags.insert({mutation.oldChildShadowView.tag, mutation});
+        }
 
-      if (animatedKeyFrame.invalidated) {
-        continue;
-      }
+        // Inserts that follow a "remove" of the same tag should be treated as
+        // an update (move) animation.
+        bool wasInsertedTagRemoved = false;
+        auto movedIt = movedTags.end();
+        if (mutation.type == ShadowViewMutation::Type::Insert) {
+          // If this is a move, we actually don't want to copy this insert
+          // instruction to animated instructions - we want to
+          // generate an Update mutation for Remove+Insert pairs to animate
+          // the layout.
+          // The corresponding Remove and Insert instructions will instead
+          // be treated as "immediate" instructions.
+          movedIt = movedTags.find(mutation.newChildShadowView.tag);
+          wasInsertedTagRemoved = movedIt != movedTags.end();
+        }
 
-      // Detect if they're in the same view hierarchy, but not equivalent
-      // (We've already detected direct conflicts and handled them above)
-      if (animatedKeyFrame.parentView.tag != mutation.parentShadowView.tag) {
-        continue;
-      }
+        auto const &mutationConfig =
+            (mutation.type == ShadowViewMutation::Type::Delete ||
+                     (mutation.type == ShadowViewMutation::Type::Remove &&
+                      !wasInsertedTagRemoved)
+                 ? layoutAnimationConfig.deleteConfig
+                 : (mutation.type == ShadowViewMutation::Type::Insert &&
+                            !wasInsertedTagRemoved
+                        ? layoutAnimationConfig.createConfig
+                        : layoutAnimationConfig.updateConfig));
+        bool haveConfiguration =
+            mutationConfig.animationType != AnimationType::None;
 
-      for (auto &finalAnimationMutation :
-           animatedKeyFrame.finalMutationsForKeyFrame) {
-        if (finalAnimationMutation.oldChildShadowView.tag == tag) {
-          continue;
-        }
+        // Creates and inserts should also be executed immediately.
+        // Mutations that would otherwise be animated, but have no
+        // configuration, are also executed immediately.
+        if (isRemoveReinserted || !haveConfiguration || isReparented ||
+            mutation.type == ShadowViewMutation::Type::Create ||
+            mutation.type == ShadowViewMutation::Type::Insert) {
+          executeMutationImmediately = mutation;
 
-        if (finalAnimationMutation.type != ShadowViewMutation::Type::Remove) {
-          continue;
-        }
-        if (finalAnimationMutation.mutatedViewIsVirtual()) {
-          continue;
-        }
+          // It is possible, especially in the case of "moves", that we have a
+          // sequence of operations like:
+          // UPDATE X
+          // REMOVE X
+          // INSERT X
+          // In these cases, we will have queued up an animation for the UPDATE
+          // and delayed its execution; the REMOVE and INSERT will be executed
+          // first; and then the UPDATE will be animating to/from ShadowViews
+          // that are out-of-sync with what's on the mounting layer. Thus, for
+          // any UPDATE animations already queued up for this tag, we adjust the
+          // "previous" ShadowView.
+          if (mutation.type == ShadowViewMutation::Type::Insert) {
+            for (auto &keyframe : keyFramesToAnimate) {
+              if (keyframe.tag == baselineShadowView.tag) {
+                // If there's already an animation queued up, followed by this
+                // Insert, it *must* be an Update mutation animation. Other
+                // sequences should not be possible.
+                react_native_assert(
+                    keyframe.type == AnimationConfigurationType::Update);
 
-        PrintMutationInstructionRelative(
-            "[IndexAdjustment] adjustDelayedMutationIndicesForMutation: CANDIDATE:",
-            mutation,
-            finalAnimationMutation);
-        candidateMutations.push_back(&finalAnimationMutation);
-      }
-    }
-  }
+                // The mutation is an "insert", so it must have a
+                // "newChildShadowView"
+                react_native_assert(mutation.newChildShadowView.tag > 0);
 
-  // Because the finalAnimations are not sorted in any way, it is possible to
-  // have some sequence like:
-  // * DELAYED REMOVE 10 from {TAG}
-  // * DELAYED REMOVE 9 from {TAG}
-  // * ...
-  // * DELAYED REMOVE 5 from {TAG}
-  // with mutation: INSERT 6/REMOVE 6. This would cause the first few mutations
-  // to *not* be adjusted, even though they would be impacted by mutation or
-  // vice-versa after later adjustments are applied. Therefore, we just keep
-  // recursing while there are any changes. This isn't great, but is good enough
-  // for now until we change these data-structures.
-  bool changed = true;
-  while (changed) {
-    changed = false;
-    candidateMutations.erase(
-        std::remove_if(
-            candidateMutations.begin(),
-            candidateMutations.end(),
-            [&mutation, &isRemoveMutation, &isInsertMutation, &changed](
-                ShadowViewMutation *candidateMutation) {
-              if (isRemoveMutation &&
-                  mutation.index <= candidateMutation->index) {
-                candidateMutation->index--;
-                changed = true;
-                PrintMutationInstructionRelative(
-                    "[IndexAdjustment] adjustDelayedMutationIndicesForMutation: Adjusting mutation DOWNWARD",
-                    mutation,
-                    *candidateMutation);
-                return true;
-              } else if (
-                  isInsertMutation &&
-                  mutation.index <= candidateMutation->index) {
-                candidateMutation->index++;
-                changed = true;
-                PrintMutationInstructionRelative(
-                    "[IndexAdjustment] adjustDelayedMutationIndicesForMutation: Adjusting mutation UPWARD",
-                    mutation,
-                    *candidateMutation);
-                return true;
+                // Those asserts don't run in prod. If there's some edge-case
+                // that we haven't caught yet, we'd crash in debug; make sure we
+                // don't mutate the prevView in prod.
+                if (keyframe.type == AnimationConfigurationType::Update &&
+                    mutation.newChildShadowView.tag > 0) {
+                  keyframe.viewPrev = mutation.newChildShadowView;
+                }
               }
-              return false;
-            }),
-        candidateMutations.end());
-  }
-}
-
-void LayoutAnimationKeyFrameManager::getAndEraseConflictingAnimations(
-    SurfaceId surfaceId,
-    ShadowViewMutationList const &mutations,
-    std::vector<AnimationKeyFrame> &conflictingAnimations) const {
-  ShadowViewMutationList localConflictingMutations{};
-  for (auto const &mutation : mutations) {
-    bool mutationIsCreateOrDelete =
-        mutation.type == ShadowViewMutation::Type::Create ||
-        mutation.type == ShadowViewMutation::Type::Delete;
-    auto const &baselineShadowView =
-        (mutation.type == ShadowViewMutation::Type::Insert ||
-         mutation.type == ShadowViewMutation::Type::Create)
-        ? mutation.newChildShadowView
-        : mutation.oldChildShadowView;
-    auto baselineTag = baselineShadowView.tag;
+            }
+          } else if (mutation.type == ShadowViewMutation::Type::Remove) {
+            for (auto &keyframe : keyFramesToAnimate) {
+              if (keyframe.tag == baselineShadowView.tag) {
+                // If there's already an animation queued up, followed by this
+                // Insert, it *must* be an Update mutation animation. Other
+                // sequences should not be possible.
+                react_native_assert(
+                    keyframe.type == AnimationConfigurationType::Update);
 
-    for (auto &inflightAnimation : inflightAnimations_) {
-      if (inflightAnimation.surfaceId != surfaceId) {
-        continue;
-      }
-      if (inflightAnimation.completed) {
-        continue;
-      }
+                // The mutation is a "remove", so it must have a
+                // "oldChildShadowView"
+                react_native_assert(mutation.oldChildShadowView.tag > 0);
 
-      for (auto it = inflightAnimation.keyFrames.begin();
-           it != inflightAnimation.keyFrames.end();) {
-        auto &animatedKeyFrame = *it;
-
-        if (animatedKeyFrame.invalidated) {
-          continue;
+                // Those asserts don't run in prod. If there's some edge-case
+                // that we haven't caught yet, we'd crash in debug; make sure we
+                // don't mutate the prevView in prod.
+                // Since normally the UPDATE would have been executed first and
+                // now it's deferred, we need to change the `oldChildShadowView`
+                // that is being referenced by the REMOVE mutation.
+                if (keyframe.type == AnimationConfigurationType::Update &&
+                    mutation.oldChildShadowView.tag > 0) {
+                  executeMutationImmediately =
+                      ShadowViewMutation::RemoveMutation(
+                          mutation.parentShadowView,
+                          keyframe.viewPrev,
+                          mutation.index);
+                }
+              }
+            }
+          }
         }
 
-        // A conflict is when either: the animated node itself is mutated
-        // directly; or, the parent of the node is created or deleted. In cases
-        // of reparenting - say, the parent is deleted but the node was moved to
-        // a different parent first - the reparenting (remove/insert) conflict
-        // will be detected before we process the parent DELETE.
-        // Parent deletion is important because deleting a parent recursively
-        // deletes all children. If we previously deferred deletion of a child,
-        // we need to force deletion/removal to happen immediately.
-        bool conflicting = animatedKeyFrame.tag == baselineTag ||
-            (mutationIsCreateOrDelete &&
-             animatedKeyFrame.parentView.tag == baselineTag &&
-             animatedKeyFrame.parentView.tag != 0);
-
-        // Conflicting animation detected: if we're mutating a tag under
-        // animation, or deleting the parent of a tag under animation, or
-        // reparenting.
-        if (conflicting) {
-          animatedKeyFrame.invalidated = true;
+        // Deletes, non-move inserts, updates get animated
+        if (!wasInsertedTagRemoved && !isRemoveReinserted && !isReparented &&
+            haveConfiguration &&
+            mutation.type != ShadowViewMutation::Type::Create) {
+          ShadowView viewStart = ShadowView(
+              mutation.type == ShadowViewMutation::Type::Insert
+                  ? mutation.newChildShadowView
+                  : mutation.oldChildShadowView);
+          react_native_assert(viewStart.tag > 0);
+          ShadowView viewFinal = ShadowView(
+              mutation.type == ShadowViewMutation::Type::Update
+                  ? mutation.newChildShadowView
+                  : viewStart);
+          react_native_assert(viewFinal.tag > 0);
+          ShadowView parent = mutation.parentShadowView;
+          react_native_assert(
+              parent.tag > 0 ||
+              mutation.type == ShadowViewMutation::Type::Update ||
+              mutation.type == ShadowViewMutation::Type::Delete);
+          Tag tag = viewStart.tag;
 
-          // We construct a list of all conflicting animations, whether or not
-          // they have a "final mutation" to execute. This is important with,
-          // for example, "insert" mutations where the final update needs to set
-          // opacity to "1", even if there's no final ShadowNode update.
-          // TODO: don't animate virtual views in the first place?
-          bool isVirtual = false;
-          for (const auto &finalMutationForKeyFrame :
-               animatedKeyFrame.finalMutationsForKeyFrame) {
-            isVirtual =
-                isVirtual || finalMutationForKeyFrame.mutatedViewIsVirtual();
+          AnimationKeyFrame keyFrame{};
+          if (mutation.type == ShadowViewMutation::Type::Insert) {
+            if (mutationConfig.animationProperty ==
+                    AnimationProperty::Opacity &&
+                haveComponentDescriptor) {
+              auto props =
+                  getComponentDescriptorForShadowView(baselineShadowView)
+                      .cloneProps(propsParserContext, viewStart.props, {});
 
-#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
-            PrintMutationInstructionRelative(
-                "Found mutation that conflicts with existing in-flight animation:",
-                mutation,
-                finalMutationForKeyFrame);
-#endif
-          }
+              if (baselineShadowView.traits.check(
+                      ShadowNodeTraits::Trait::ViewKind)) {
+                auto const &viewProps =
+                    *std::static_pointer_cast<ViewProps const>(props);
+                const_cast<ViewProps &>(viewProps).opacity = 0;
+              }
 
-          conflictingAnimations.push_back(animatedKeyFrame);
-          for (const auto &finalMutationForKeyFrame :
-               animatedKeyFrame.finalMutationsForKeyFrame) {
-            if (!isVirtual ||
-                finalMutationForKeyFrame.type ==
-                    ShadowViewMutation::Type::Delete) {
-              localConflictingMutations.push_back(finalMutationForKeyFrame);
+              react_native_assert(props != nullptr);
+              if (props != nullptr) {
+                viewStart.props = props;
+              }
             }
-          }
+            bool isScaleX =
+                mutationConfig.animationProperty == AnimationProperty::ScaleX ||
+                mutationConfig.animationProperty == AnimationProperty::ScaleXY;
+            bool isScaleY =
+                mutationConfig.animationProperty == AnimationProperty::ScaleY ||
+                mutationConfig.animationProperty == AnimationProperty::ScaleXY;
+            if ((isScaleX || isScaleY) && haveComponentDescriptor) {
+              auto props =
+                  getComponentDescriptorForShadowView(baselineShadowView)
+                      .cloneProps(propsParserContext, viewStart.props, {});
+              if (baselineShadowView.traits.check(
+                      ShadowNodeTraits::Trait::ViewKind)) {
+                auto const &viewProps =
+                    *std::static_pointer_cast<ViewProps const>(props);
+                const_cast<ViewProps &>(viewProps).transform =
+                    Transform::Scale(isScaleX ? 0 : 1, isScaleY ? 0 : 1, 1);
+              }
 
-          // Delete from existing animation
-          it = inflightAnimation.keyFrames.erase(it);
-        } else {
-          it++;
-        }
-      }
-    }
-  }
+              react_native_assert(props != nullptr);
+              if (props != nullptr) {
+                viewStart.props = props;
+              }
+            }
 
-  // Recurse, in case conflicting mutations conflict with other existing
-  // animations
-  if (!localConflictingMutations.empty()) {
-    getAndEraseConflictingAnimations(
-        surfaceId, localConflictingMutations, conflictingAnimations);
-  }
-}
+            PrintMutationInstruction(
+                "Setting up animation KeyFrame for INSERT mutation (Create animation)",
+                mutation);
 
-better::optional<MountingTransaction>
-LayoutAnimationKeyFrameManager::pullTransaction(
-    SurfaceId surfaceId,
-    MountingTransaction::Number transactionNumber,
-    TransactionTelemetry const &telemetry,
-    ShadowViewMutationList mutations) const {
-  // Current time in milliseconds
-  uint64_t now =
-      std::chrono::duration_cast<std::chrono::milliseconds>(
-          std::chrono::high_resolution_clock::now().time_since_epoch())
-          .count();
+            keyFrame = AnimationKeyFrame{
+                /* .finalMutationsForKeyFrame = */ {},
+                /* .type = */ AnimationConfigurationType::Create,
+                /* .tag = */ tag,
+                /* .parentView = */ parent,
+                /* .viewStart = */ viewStart,
+                /* .viewEnd = */ viewFinal,
+                /* .viewPrev = */ baselineShadowView,
+                /* .initialProgress = */ 0};
+          } else if (mutation.type == ShadowViewMutation::Type::Delete) {
+// This is just for assertion purposes.
+// The NDEBUG check here is to satisfy the compiler in certain environments
+// complaining about correspondingRemoveIt being unused.
+#ifdef REACT_NATIVE_DEBUG
+#ifndef NDEBUG
+// This block is temporarily disabled to fix some internal builds.
+// In some build configurations, we get a compiler error that
+// `correspondingRemoveIt` is unused.
+/*            Tag deleteTag = mutation.oldChildShadowView.tag;
+            auto correspondingRemoveIt = std::find_if(
+                mutations.begin(),
+                mutations.end(),
+                [&deleteTag](auto &mutation) {
+                  return mutation.type == ShadowViewMutation::Type::Remove &&
+                      mutation.oldChildShadowView.tag == deleteTag;
+                });
+            react_native_assert(correspondingRemoveIt != mutations.end());
+*/
+#endif
+#endif
+            continue;
+          } else if (mutation.type == ShadowViewMutation::Type::Update) {
+            viewFinal = ShadowView(mutation.newChildShadowView);
 
-  bool inflightAnimationsExistInitially = !inflightAnimations_.empty();
+            PrintMutationInstruction(
+                "Setting up animation KeyFrame for UPDATE mutation (Update animation)",
+                mutation);
 
-  // Execute stopSurface on any ongoing animations
-  if (inflightAnimationsExistInitially) {
-    std::vector<SurfaceId> surfaceIdsToStop{};
-    {
-      std::lock_guard<std::mutex> lock(surfaceIdsToStopMutex_);
-      surfaceIdsToStop = surfaceIdsToStop_;
-      surfaceIdsToStop_ = {};
-    }
+            keyFrame = AnimationKeyFrame{
+                /* .finalMutationsForKeyFrame = */ {mutation},
+                /* .type = */ AnimationConfigurationType::Update,
+                /* .tag = */ tag,
+                /* .parentView = */ parent,
+                /* .viewStart = */ viewStart,
+                /* .viewEnd = */ viewFinal,
+                /* .viewPrev = */ baselineShadowView,
+                /* .initialProgress = */ 0};
+          } else {
+            // This should just be "Remove" instructions that are not animated
+            // (either this is a "move", or there's a corresponding "Delete"
+            // that is animated).
+            react_native_assert(
+                mutation.type == ShadowViewMutation::Type::Remove);
 
-    for (auto it = inflightAnimations_.begin();
-         it != inflightAnimations_.end();) {
-      const auto &animation = *it;
+            Tag removeTag = mutation.oldChildShadowView.tag;
+            auto correspondingInsertIt = std::find_if(
+                mutations.begin(),
+                mutations.end(),
+                [&removeTag](auto &mutation) {
+                  return mutation.type == ShadowViewMutation::Type::Insert &&
+                      mutation.newChildShadowView.tag == removeTag;
+                });
+            if (correspondingInsertIt == mutations.end()) {
+              // This is a REMOVE not paired with an INSERT (move), so it must
+              // be paired with a DELETE.
+              auto correspondingDeleteIt = std::find_if(
+                  mutations.begin(),
+                  mutations.end(),
+                  [&removeTag](auto &mutation) {
+                    return mutation.type == ShadowViewMutation::Type::Delete &&
+                        mutation.oldChildShadowView.tag == removeTag;
+                  });
+              react_native_assert(correspondingDeleteIt != mutations.end());
 
-      if (std::find(
-              surfaceIdsToStop.begin(),
-              surfaceIdsToStop.end(),
-              animation.surfaceId) != surfaceIdsToStop.end()) {
-#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
-        LOG(ERROR)
-            << "LayoutAnimations: stopping animation due to stopSurface on "
-            << surfaceId;
-#endif
-        it = inflightAnimations_.erase(it);
-      } else {
-        it++;
-      }
-    }
-  }
+              auto deleteMutation = *correspondingDeleteIt;
 
-  if (!mutations.empty()) {
-#ifdef RN_SHADOW_TREE_INTROSPECTION
-    {
-      std::stringstream ss(getDebugDescription(mutations, {}));
-      std::string to;
-      while (std::getline(ss, to, '\n')) {
-        LOG(ERROR)
-            << "LayoutAnimationKeyFrameManager.cpp: got mutation list: Line: "
-            << to;
-      }
-    };
-#endif
+              if (mutationConfig.animationProperty ==
+                      AnimationProperty::Opacity &&
+                  haveComponentDescriptor) {
+                auto props =
+                    getComponentDescriptorForShadowView(baselineShadowView)
+                        .cloneProps(propsParserContext, viewFinal.props, {});
 
-      // DEBUG ONLY: list existing inflight animations
-#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
-    LOG(ERROR) << "BEGINNING DISPLAYING ONGOING inflightAnimations_!";
-    int i = 0;
-    int j = 0;
-    for (auto const &inflightAnimation : inflightAnimations_) {
-      i++;
-      j = 0;
-      if (inflightAnimation.completed) {
-        continue;
-      }
-      for (auto &keyframe : inflightAnimation.keyFrames) {
-        j++;
-        if (keyframe.invalidated) {
-          continue;
-        }
-        for (const auto &finalMutationForKeyFrame :
-             keyframe.finalMutationsForKeyFrame) {
-          if (finalMutationForKeyFrame.mutatedViewIsVirtual()) {
-            std::string msg = "Animation " + std::to_string(i) + " keyframe " +
-                std::to_string(j) + ": Final Animation";
-            PrintMutationInstruction(msg, finalMutationForKeyFrame);
-          } else {
-            LOG(ERROR) << "Animation " << i << " keyframe " << j
-                       << ": on tag: [" << keyframe.viewStart.tag << "]";
-          }
-        }
-      }
-    }
-    LOG(ERROR) << "BEGINNING DONE DISPLAYING ONGOING inflightAnimations_!";
-#endif
+                if (baselineShadowView.traits.check(
+                        ShadowNodeTraits::Trait::ViewKind)) {
+                  auto const &viewProps =
+                      *std::static_pointer_cast<ViewProps const>(props);
+                  const_cast<ViewProps &>(viewProps).opacity = 0;
+                }
 
-    // What to do if we detect a conflict? Get current value and make
-    // that the baseline of the next animation. Scale the remaining time
-    // in the animation
-    // Types of conflicts and how we handle them:
-    // Update -> update: remove the previous update, make it the baseline of the
-    // next update (with current progress) Update -> remove: same, with final
-    // mutation being a remove Insert -> update: treat as update->update Insert
-    // -> remove: same, as update->remove Remove -> update/insert: not possible
-    // We just collect pairs here of <Mutation, AnimationConfig> and delete them
-    // from active animations. If another animation is queued up from the
-    // current mutations then these deleted mutations will serve as the baseline
-    // for the next animation. If not, the current mutations are executed
-    // immediately without issues.
-    std::vector<AnimationKeyFrame> conflictingAnimations{};
-    getAndEraseConflictingAnimations(
-        surfaceId, mutations, conflictingAnimations);
+                react_native_assert(props != nullptr);
+                if (props != nullptr) {
+                  viewFinal.props = props;
+                }
+              }
+              bool isScaleX = mutationConfig.animationProperty ==
+                      AnimationProperty::ScaleX ||
+                  mutationConfig.animationProperty ==
+                      AnimationProperty::ScaleXY;
+              bool isScaleY = mutationConfig.animationProperty ==
+                      AnimationProperty::ScaleY ||
+                  mutationConfig.animationProperty ==
+                      AnimationProperty::ScaleXY;
+              if ((isScaleX || isScaleY) && haveComponentDescriptor) {
+                auto props =
+                    getComponentDescriptorForShadowView(baselineShadowView)
+                        .cloneProps(propsParserContext, viewFinal.props, {});
 
-    // Are we animating this list of mutations?
-    better::optional<LayoutAnimation> currentAnimation{};
-    {
-      std::lock_guard<std::mutex> lock(currentAnimationMutex_);
-      if (currentAnimation_) {
-        currentAnimation = std::move(currentAnimation_);
-        currentAnimation_ = {};
-      }
-    }
+                if (baselineShadowView.traits.check(
+                        ShadowNodeTraits::Trait::ViewKind)) {
+                  auto const &viewProps =
+                      *std::static_pointer_cast<ViewProps const>(props);
+                  const_cast<ViewProps &>(viewProps).transform =
+                      Transform::Scale(isScaleX ? 0 : 1, isScaleY ? 0 : 1, 1);
+                }
 
-    if (currentAnimation) {
-      LayoutAnimation animation = std::move(currentAnimation.value());
-      currentAnimation = {};
-      animation.surfaceId = surfaceId;
-      animation.startTime = now;
+                react_native_assert(props != nullptr);
+                if (props != nullptr) {
+                  viewFinal.props = props;
+                }
+              }
 
-      // Pre-process list to:
-      //   Catch remove+reinsert (reorders)
-      //   Catch delete+create (reparenting) (this should be optimized away at
-      //   the diffing level eventually?)
-      // TODO: to prevent this step we could tag Remove/Insert mutations as
-      // being moves on the Differ level, since we know that there? We could use
-      // TinyMap here, but it's not exposed by Differentiator (yet).
-      std::vector<Tag> insertedTags;
-      std::vector<Tag> deletedTags;
-      std::vector<Tag> reparentedTags; // tags that are deleted and recreated
-      std::unordered_map<Tag, ShadowViewMutation> movedTags;
-      for (const auto &mutation : mutations) {
-        if (mutation.type == ShadowViewMutation::Type::Insert) {
-          insertedTags.push_back(mutation.newChildShadowView.tag);
-        }
-        if (mutation.type == ShadowViewMutation::Type::Delete) {
-          deletedTags.push_back(mutation.oldChildShadowView.tag);
-        }
-        if (mutation.type == ShadowViewMutation::Type::Create) {
-          if (std::find(
-                  deletedTags.begin(),
-                  deletedTags.end(),
-                  mutation.newChildShadowView.tag) != deletedTags.end()) {
-            reparentedTags.push_back(mutation.newChildShadowView.tag);
+              PrintMutationInstruction(
+                  "Setting up animation KeyFrame for REMOVE mutation (Delete animation)",
+                  mutation);
+
+              keyFrame = AnimationKeyFrame{
+                  /* .finalMutationsForKeyFrame */ {mutation, deleteMutation},
+                  /* .type */ AnimationConfigurationType::Delete,
+                  /* .tag */ tag,
+                  /* .parentView */ parent,
+                  /* .viewStart */ viewStart,
+                  /* .viewEnd */ viewFinal,
+                  /* .viewPrev */ baselineShadowView,
+                  /* .initialProgress */ 0};
+            } else {
+              PrintMutationInstruction(
+                  "Executing Remove Immediately, due to reordering operation",
+                  mutation);
+              immediateMutations.push_back(mutation);
+              continue;
+            }
           }
-        }
-      }
 
-      // Process mutations list into operations that can be sent to platform
-      // immediately, and those that need to be animated Deletions, removals,
-      // updates are delayed and animated. Creations and insertions are sent to
-      // platform and then "animated in" with opacity updates. Upon completion,
-      // removals and deletions are sent to platform
-      ShadowViewMutation::List immediateMutations;
+          // Handle conflicting animations
+          for (auto &conflictingKeyFrame : conflictingAnimations) {
+            auto const &conflictingMutationBaselineShadowView =
+                conflictingKeyFrame.viewStart;
 
-      // Remove operations that are actually moves should be copied to
-      // "immediate mutations". The corresponding "insert" will also be executed
-      // immediately and animated as an update.
-      std::vector<AnimationKeyFrame> keyFramesToAnimate;
-      std::vector<AnimationKeyFrame> movesToAnimate;
-      auto const layoutAnimationConfig = animation.layoutAnimationConfig;
-      for (auto const &mutation : mutations) {
-        ShadowView baselineShadowView =
-            (mutation.type == ShadowViewMutation::Type::Delete ||
-                     mutation.type == ShadowViewMutation::Type::Remove ||
-                     mutation.type == ShadowViewMutation::Type::Update
-                 ? mutation.oldChildShadowView
-                 : mutation.newChildShadowView);
-        react_native_assert(baselineShadowView.tag > 0);
-        bool haveComponentDescriptor =
-            hasComponentDescriptorForShadowView(baselineShadowView);
+            // We've found a conflict.
+            if (conflictingMutationBaselineShadowView.tag == tag) {
+              conflictingKeyFrame.generateFinalSyntheticMutations = false;
 
-        bool executeMutationImmediately = false;
+              // Do NOT update viewStart for a CREATE animation.
+              if (keyFrame.type == AnimationConfigurationType::Create) {
+                break;
+              }
 
-        bool isRemoveReinserted =
-            mutation.type == ShadowViewMutation::Type::Remove &&
-            std::find(
-                insertedTags.begin(),
-                insertedTags.end(),
-                mutation.oldChildShadowView.tag) != insertedTags.end();
+#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
+              LOG(ERROR)
+                  << "Due to conflict, replacing 'viewStart' of animated keyframe: ["
+                  << conflictingKeyFrame.viewPrev.tag << "] with ##"
+                  << std::hash<ShadowView>{}(conflictingKeyFrame.viewPrev);
+#endif
+              // Pick a Prop or layout property, depending on the current
+              // animation configuration. Figure out how much progress we've
+              // already made in the current animation, and start the animation
+              // from this point.
+              keyFrame.viewPrev = conflictingKeyFrame.viewPrev;
+              keyFrame.viewStart = conflictingKeyFrame.viewPrev;
+              react_native_assert(keyFrame.viewStart.tag > 0);
+              keyFrame.initialProgress = 0;
 
-        // Reparenting can result in a node being removed, inserted (moved) and
-        // also deleted and created in the same frame, with the same props etc.
-        // This should eventually be optimized out of the diffing algorithm, but
-        // for now we detect reparenting and prevent the corresponding
-        // Delete/Create instructions from being animated.
-        bool isReparented = std::find(
-                                reparentedTags.begin(),
-                                reparentedTags.end(),
-                                baselineShadowView.tag) != reparentedTags.end();
+              // We're guaranteed that a tag only has one animation associated
+              // with it, so we can break here. If we support multiple
+              // animations and animation curves over the same tag in the
+              // future, this will need to be modified to support that.
+              break;
+            }
+          }
 
-        if (isRemoveReinserted) {
-          movedTags.insert({mutation.oldChildShadowView.tag, mutation});
+#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
+          LOG(ERROR) << "Checking validity of keyframe: ["
+                     << keyFrame.viewStart.tag << "] [" << keyFrame.viewEnd.tag
+                     << "] [" << keyFrame.viewPrev.tag
+                     << "] animation type: " << (int)keyFrame.type;
+#endif
+          react_native_assert(keyFrame.viewStart.tag > 0);
+          react_native_assert(keyFrame.viewEnd.tag > 0);
+          react_native_assert(keyFrame.viewPrev.tag > 0);
+          keyFramesToAnimate.push_back(keyFrame);
         }
 
-        // Inserts that follow a "remove" of the same tag should be treated as
-        // an update (move) animation.
-        bool wasInsertedTagRemoved = false;
-        auto movedIt = movedTags.end();
-        if (mutation.type == ShadowViewMutation::Type::Insert) {
-          // If this is a move, we actually don't want to copy this insert
-          // instruction to animated instructions - we want to
-          // generate an Update mutation for Remove+Insert pairs to animate
-          // the layout.
-          // The corresponding Remove and Insert instructions will instead
-          // be treated as "immediate" instructions.
-          movedIt = movedTags.find(mutation.newChildShadowView.tag);
-          wasInsertedTagRemoved = movedIt != movedTags.end();
+        if (executeMutationImmediately.hasValue()) {
+          PrintMutationInstruction(
+              "Queue Up For Immediate Execution", *executeMutationImmediately);
+          immediateMutations.push_back(*executeMutationImmediately);
         }
+      }
 
-        auto const &mutationConfig =
-            (mutation.type == ShadowViewMutation::Type::Delete ||
-                     (mutation.type == ShadowViewMutation::Type::Remove &&
-                      !wasInsertedTagRemoved)
-                 ? layoutAnimationConfig.deleteConfig
-                 : (mutation.type == ShadowViewMutation::Type::Insert &&
-                            !wasInsertedTagRemoved
-                        ? layoutAnimationConfig.createConfig
-                        : layoutAnimationConfig.updateConfig));
-        bool haveConfiguration =
-            mutationConfig.animationType != AnimationType::None;
-
-        if (wasInsertedTagRemoved && haveConfiguration) {
-          movesToAnimate.push_back(AnimationKeyFrame{
-              {},
-              AnimationConfigurationType::Update,
-              mutation.newChildShadowView.tag,
-              mutation.parentShadowView,
-              movedIt->second.oldChildShadowView,
-              mutation.newChildShadowView});
+#ifdef RN_SHADOW_TREE_INTROSPECTION
+#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
+      {
+        int idx = 0;
+        for (auto &mutation : immediateMutations) {
+          PrintMutationInstruction(
+              std::string("IMMEDIATE list: ") + std::to_string(idx) + "/" +
+                  std::to_string(immediateMutations.size()),
+              mutation);
+          idx++;
         }
+      }
 
-        // Creates and inserts should also be executed immediately.
-        // Mutations that would otherwise be animated, but have no
-        // configuration, are also executed immediately.
-        if (isRemoveReinserted || !haveConfiguration || isReparented ||
-            mutation.type == ShadowViewMutation::Type::Create ||
-            mutation.type == ShadowViewMutation::Type::Insert) {
-          executeMutationImmediately = true;
-
-          // It is possible, especially in the case of "moves", that we have a
-          // sequence of operations like:
-          // UPDATE X
-          // REMOVE X
-          // INSERT X
-          // In these cases, we will have queued up an animation for the UPDATE
-          // and delayed its execution; the REMOVE and INSERT will be executed
-          // first; and then the UPDATE will be animating to/from ShadowViews
-          // that are out-of-sync with what's on the mounting layer. Thus, for
-          // any UPDATE animations already queued up for this tag, we adjust the
-          // "previous" ShadowView.
-          if (mutation.type == ShadowViewMutation::Type::Insert) {
-            for (auto &keyframe : keyFramesToAnimate) {
-              if (keyframe.tag == baselineShadowView.tag) {
-                // If there's already an animation queued up, followed by this
-                // Insert, it *must* be an Update mutation animation. Other
-                // sequences should not be possible.
-                react_native_assert(
-                    keyframe.type == AnimationConfigurationType::Update);
-
-                // The mutation is an "insert", so it must have a
-                // "newChildShadowView"
-                react_native_assert(mutation.newChildShadowView.tag > 0);
-
-                // Those asserts don't run in prod. If there's some edge-case
-                // that we haven't caught yet, we'd crash in debug; make sure we
-                // don't mutate the prevView in prod.
-                if (keyframe.type == AnimationConfigurationType::Update &&
-                    mutation.newChildShadowView.tag > 0) {
-                  keyframe.viewPrev = mutation.newChildShadowView;
-                }
-              }
-            }
+      {
+        int idx = 0;
+        for (const auto &keyframe : keyFramesToAnimate) {
+          for (const auto &finalMutationForKeyFrame :
+               keyframe.finalMutationsForKeyFrame) {
+            PrintMutationInstruction(
+                std::string("FINAL list: ") + std::to_string(idx) + "/" +
+                    std::to_string(keyFramesToAnimate.size()),
+                finalMutationForKeyFrame);
           }
+          idx++;
         }
-
-        // Deletes, non-move inserts, updates get animated
-        if (!wasInsertedTagRemoved && !isRemoveReinserted && !isReparented &&
-            haveConfiguration &&
-            mutation.type != ShadowViewMutation::Type::Create) {
-          ShadowView viewStart = ShadowView(
-              mutation.type == ShadowViewMutation::Type::Insert
-                  ? mutation.newChildShadowView
-                  : mutation.oldChildShadowView);
-          react_native_assert(viewStart.tag > 0);
-          ShadowView viewFinal = ShadowView(
-              mutation.type == ShadowViewMutation::Type::Update
-                  ? mutation.newChildShadowView
-                  : viewStart);
-          react_native_assert(viewFinal.tag > 0);
-          ShadowView parent = mutation.parentShadowView;
-          react_native_assert(
-              parent.tag > 0 ||
-              mutation.type == ShadowViewMutation::Type::Update ||
-              mutation.type == ShadowViewMutation::Type::Delete);
-          Tag tag = viewStart.tag;
-
-          AnimationKeyFrame keyFrame{};
-          if (mutation.type == ShadowViewMutation::Type::Insert) {
-            if (mutationConfig.animationProperty ==
-                    AnimationProperty::Opacity &&
-                haveComponentDescriptor) {
-              auto props =
-                  getComponentDescriptorForShadowView(baselineShadowView)
-                      .cloneProps(viewStart.props, {});
-
-              // Dynamic cast, because - we don't know the type of this
-              // ShadowNode, it could be Image or Text or something else with
-              // different base props.
-              const auto viewProps =
-                  dynamic_cast<const ViewProps *>(props.get());
-              if (viewProps != nullptr) {
-                const_cast<ViewProps *>(viewProps)->opacity = 0;
-              }
-
-              react_native_assert(props != nullptr);
-              if (props != nullptr) {
-                viewStart.props = props;
-              }
-            }
-            bool isScaleX =
-                mutationConfig.animationProperty == AnimationProperty::ScaleX ||
-                mutationConfig.animationProperty == AnimationProperty::ScaleXY;
-            bool isScaleY =
-                mutationConfig.animationProperty == AnimationProperty::ScaleY ||
-                mutationConfig.animationProperty == AnimationProperty::ScaleXY;
-            if ((isScaleX || isScaleY) && haveComponentDescriptor) {
-              auto props =
-                  getComponentDescriptorForShadowView(baselineShadowView)
-                      .cloneProps(viewStart.props, {});
-
-              // Dynamic cast, because - we don't know the type of this
-              // ShadowNode, it could be Image or Text or something else with
-              // different base props.
-              const auto viewProps =
-                  dynamic_cast<const ViewProps *>(props.get());
-              if (viewProps != nullptr) {
-                const_cast<ViewProps *>(viewProps)->transform =
-                    Transform::Scale(isScaleX ? 0 : 1, isScaleY ? 0 : 1, 1);
-              }
-
-              react_native_assert(props != nullptr);
-              if (props != nullptr) {
-                viewStart.props = props;
-              }
-            }
-
-            PrintMutationInstruction(
-                "Setting up animation KeyFrame for INSERT mutation (Create animation)",
-                mutation);
-
-            keyFrame = AnimationKeyFrame{
-                {},
-                AnimationConfigurationType::Create,
-                tag,
-                parent,
-                viewStart,
-                viewFinal,
-                baselineShadowView,
-                0};
-          } else if (mutation.type == ShadowViewMutation::Type::Delete) {
-// This is just for assertion purposes.
-// The NDEBUG check here is to satisfy the compiler in certain environments
-// complaining about correspondingRemoveIt being unused.
-#ifdef REACT_NATIVE_DEBUG
-#ifndef NDEBUG
-// This block is temporarily disabled to fix some internal builds.
-// In some build configurations, we get a compiler error that
-// `correspondingRemoveIt` is unused.
-/*            Tag deleteTag = mutation.oldChildShadowView.tag;
-            auto correspondingRemoveIt = std::find_if(
-                mutations.begin(),
-                mutations.end(),
-                [&deleteTag](auto &mutation) {
-                  return mutation.type == ShadowViewMutation::Type::Remove &&
-                      mutation.oldChildShadowView.tag == deleteTag;
-                });
-            react_native_assert(correspondingRemoveIt != mutations.end());
-*/
-#endif
-#endif
-            continue;
-          } else if (mutation.type == ShadowViewMutation::Type::Update) {
-            viewFinal = ShadowView(mutation.newChildShadowView);
-
-            PrintMutationInstruction(
-                "Setting up animation KeyFrame for UPDATE mutation (Update animation)",
-                mutation);
-
-            keyFrame = AnimationKeyFrame{
-                {mutation},
-                AnimationConfigurationType::Update,
-                tag,
-                parent,
-                viewStart,
-                viewFinal,
-                baselineShadowView,
-                0};
-          } else {
-            // This should just be "Remove" instructions that are not animated
-            // (either this is a "move", or there's a corresponding "Delete"
-            // that is animated).
-            react_native_assert(
-                mutation.type == ShadowViewMutation::Type::Remove);
-
-            Tag removeTag = mutation.oldChildShadowView.tag;
-            auto correspondingInsertIt = std::find_if(
-                mutations.begin(),
-                mutations.end(),
-                [&removeTag](auto &mutation) {
-                  return mutation.type == ShadowViewMutation::Type::Insert &&
-                      mutation.newChildShadowView.tag == removeTag;
-                });
-            if (correspondingInsertIt == mutations.end()) {
-              // This is a REMOVE not paired with an INSERT (move), so it must
-              // be paired with a DELETE.
-              auto correspondingDeleteIt = std::find_if(
-                  mutations.begin(),
-                  mutations.end(),
-                  [&removeTag](auto &mutation) {
-                    return mutation.type == ShadowViewMutation::Type::Delete &&
-                        mutation.oldChildShadowView.tag == removeTag;
-                  });
-              react_native_assert(correspondingDeleteIt != mutations.end());
-
-              auto deleteMutation = *correspondingDeleteIt;
-
-              if (mutationConfig.animationProperty ==
-                      AnimationProperty::Opacity &&
-                  haveComponentDescriptor) {
-                auto props =
-                    getComponentDescriptorForShadowView(baselineShadowView)
-                        .cloneProps(viewFinal.props, {});
-
-                // Dynamic cast, because - we don't know the type of this
-                // ShadowNode, it could be Image or Text or something else with
-                // different base props.
-                const auto viewProps =
-                    dynamic_cast<const ViewProps *>(props.get());
-                if (viewProps != nullptr) {
-                  const_cast<ViewProps *>(viewProps)->opacity = 0;
-                }
-
-                react_native_assert(props != nullptr);
-                if (props != nullptr) {
-                  viewFinal.props = props;
-                }
-              }
-              bool isScaleX = mutationConfig.animationProperty ==
-                      AnimationProperty::ScaleX ||
-                  mutationConfig.animationProperty ==
-                      AnimationProperty::ScaleXY;
-              bool isScaleY = mutationConfig.animationProperty ==
-                      AnimationProperty::ScaleY ||
-                  mutationConfig.animationProperty ==
-                      AnimationProperty::ScaleXY;
-              if ((isScaleX || isScaleY) && haveComponentDescriptor) {
-                auto props =
-                    getComponentDescriptorForShadowView(baselineShadowView)
-                        .cloneProps(viewFinal.props, {});
-
-                // Dynamic cast, because - we don't know the type of this
-                // ShadowNode, it could be Image or Text or something else with
-                // different base props.
-                const auto viewProps =
-                    dynamic_cast<const ViewProps *>(props.get());
-                if (viewProps != nullptr) {
-                  const_cast<ViewProps *>(viewProps)->transform =
-                      Transform::Scale(isScaleX ? 0 : 1, isScaleY ? 0 : 1, 1);
-                }
-
-                react_native_assert(props != nullptr);
-                if (props != nullptr) {
-                  viewFinal.props = props;
-                }
-              }
-
-              PrintMutationInstruction(
-                  "Setting up animation KeyFrame for REMOVE mutation (Delete animation)",
-                  mutation);
-
-              keyFrame = AnimationKeyFrame{
-                  {mutation, deleteMutation},
-                  AnimationConfigurationType::Delete,
-                  tag,
-                  parent,
-                  viewStart,
-                  viewFinal,
-                  baselineShadowView,
-                  0};
-            } else {
-              PrintMutationInstruction(
-                  "Executing Remove Immediately, due to reordering operation",
-                  mutation);
-              immediateMutations.push_back(mutation);
-              continue;
-            }
-          }
-
-          // Handle conflicting animations
-          for (auto &conflictingKeyFrame : conflictingAnimations) {
-            auto const &conflictingMutationBaselineShadowView =
-                conflictingKeyFrame.viewStart;
-
-            // We've found a conflict.
-            if (conflictingMutationBaselineShadowView.tag == tag) {
-              conflictingKeyFrame.generateFinalSyntheticMutations = false;
-
-              // Do NOT update viewStart for a CREATE animation.
-              if (keyFrame.type == AnimationConfigurationType::Create) {
-                break;
-              }
-
-#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
-              LOG(ERROR)
-                  << "Due to conflict, replacing 'viewStart' of animated keyframe: ["
-                  << conflictingKeyFrame.viewPrev.tag << "] with ##"
-                  << std::hash<ShadowView>{}(conflictingKeyFrame.viewPrev);
-#endif
-              // Pick a Prop or layout property, depending on the current
-              // animation configuration. Figure out how much progress we've
-              // already made in the current animation, and start the animation
-              // from this point.
-              keyFrame.viewPrev = conflictingKeyFrame.viewPrev;
-              keyFrame.viewStart = conflictingKeyFrame.viewPrev;
-              react_native_assert(keyFrame.viewStart.tag > 0);
-              keyFrame.initialProgress = 0;
-
-              // We're guaranteed that a tag only has one animation associated
-              // with it, so we can break here. If we support multiple
-              // animations and animation curves over the same tag in the
-              // future, this will need to be modified to support that.
-              break;
-            }
-          }
-
-#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
-          LOG(ERROR) << "Checking validity of keyframe: ["
-                     << keyFrame.viewStart.tag << "] [" << keyFrame.viewEnd.tag
-                     << "] [" << keyFrame.viewPrev.tag
-                     << "] animation type: " << (int)keyFrame.type;
-#endif
-          react_native_assert(keyFrame.viewStart.tag > 0);
-          react_native_assert(keyFrame.viewEnd.tag > 0);
-          react_native_assert(keyFrame.viewPrev.tag > 0);
-          keyFramesToAnimate.push_back(keyFrame);
-        }
-
-        if (executeMutationImmediately) {
-          PrintMutationInstruction(
-              "Queue Up Animation For Immediate Execution", mutation);
-          immediateMutations.push_back(mutation);
-        }
-      }
-
-#ifdef RN_SHADOW_TREE_INTROSPECTION
-#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
-      {
-        int idx = 0;
-        for (auto &mutation : immediateMutations) {
-          PrintMutationInstruction(
-              std::string("IMMEDIATE list: ") + std::to_string(idx) + "/" +
-                  std::to_string(immediateMutations.size()),
-              mutation);
-          idx++;
-        }
-      }
-
-      {
-        int idx = 0;
-        for (const auto &keyframe : keyFramesToAnimate) {
-          for (const auto &finalMutationForKeyFrame :
-               keyframe.finalMutationsForKeyFrame) {
-            PrintMutationInstruction(
-                std::string("FINAL list: ") + std::to_string(idx) + "/" +
-                    std::to_string(keyFramesToAnimate.size()),
-                finalMutationForKeyFrame);
-          }
-          idx++;
-        }
-      }
-#endif
-#endif
+      }
+#endif
+#endif
 
       auto finalConflictingMutations = ShadowViewMutationList{};
       for (auto &keyFrame : conflictingAnimations) {
@@ -1362,7 +782,7 @@ LayoutAnimationKeyFrameManager::pullTransaction(
         // don't want to queue up any final UPDATE mutations here.
         bool shouldGenerateSyntheticMutations =
             keyFrame.generateFinalSyntheticMutations;
-        bool numFinalMutations = keyFrame.finalMutationsForKeyFrame.size();
+        auto numFinalMutations = keyFrame.finalMutationsForKeyFrame.size();
         bool onlyMutationIsUpdate =
             (numFinalMutations == 1 &&
              keyFrame.finalMutationsForKeyFrame[0].type ==
@@ -1522,328 +942,738 @@ LayoutAnimationKeyFrameManager::pullTransaction(
             "Conflict with non-animated mutation");
       }
 
-      // Make sure that all operations execute in the proper order.
-      // REMOVE operations with highest indices must operate first.
-      std::stable_sort(
-          finalMutationsForConflictingAnimations.begin(),
-          finalMutationsForConflictingAnimations.end(),
-          &shouldFirstComeBeforeSecondMutation);
+      // Make sure that all operations execute in the proper order.
+      // REMOVE operations with highest indices must operate first.
+      std::stable_sort(
+          finalMutationsForConflictingAnimations.begin(),
+          finalMutationsForConflictingAnimations.end(),
+          &shouldFirstComeBeforeSecondMutation);
+
+#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
+      LOG(ERROR)
+          << "No Animation: Adjust delayed mutations based on all finalMutationsForConflictingAnimations";
+#endif
+      for (auto const &mutation : finalMutationsForConflictingAnimations) {
+        if (mutation.type == ShadowViewMutation::Type::Remove ||
+            mutation.type == ShadowViewMutation::Type::Insert) {
+          adjustDelayedMutationIndicesForMutation(surfaceId, mutation);
+        }
+      }
+
+      // The ShadowTree layer doesn't realize that certain operations have
+      // been delayed, so we must adjust all Remove and Insert operations
+      // based on what else has been deferred, whether we are executing this
+      // immediately or later.
+#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
+      LOG(ERROR)
+          << "No Animation: Adjust mutations based on remaining delayed mutations / adjust delayed, based on each";
+#endif
+      for (auto &mutation : mutations) {
+        if (mutation.type == ShadowViewMutation::Type::Remove ||
+            mutation.type == ShadowViewMutation::Type::Insert) {
+          adjustImmediateMutationIndicesForDelayedMutations(
+              surfaceId, mutation);
+          adjustDelayedMutationIndicesForMutation(surfaceId, mutation);
+        }
+      }
+
+      // Append mutations to this list and swap - so that the final
+      // conflicting mutations happen before any other mutations
+      finalMutationsForConflictingAnimations.insert(
+          finalMutationsForConflictingAnimations.end(),
+          mutations.begin(),
+          mutations.end());
+      mutations = finalMutationsForConflictingAnimations;
+    }
+  } // if (mutations)
+
+  // We never commit a different root or modify anything -
+  // we just send additional mutations to the mounting layer until the
+  // animations are finished and the mounting layer (view) represents exactly
+  // what is in the most recent shadow tree
+  // Add animation mutations to the end of our existing mutations list in this
+  // function.
+  ShadowViewMutationList mutationsForAnimation{};
+  animationMutationsForFrame(surfaceId, mutationsForAnimation, now);
+
+  // If any delayed removes were executed, update remaining delayed keyframes
+#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
+  LOG(ERROR)
+      << "Adjust all delayed mutations based on final mutations generated by animation driver";
+#endif
+  for (auto const &mutation : mutationsForAnimation) {
+    if (mutation.type == ShadowViewMutation::Type::Remove) {
+      adjustDelayedMutationIndicesForMutation(surfaceId, mutation);
+    }
+  }
+
+  mutations.insert(
+      mutations.end(),
+      mutationsForAnimation.begin(),
+      mutationsForAnimation.end());
+
+  // DEBUG ONLY: list existing inflight animations
+#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
+  LOG(ERROR) << "FINISHING DISPLAYING ONGOING inflightAnimations_!";
+  int i = 0;
+  int j = 0;
+  for (auto const &inflightAnimation : inflightAnimations_) {
+    i++;
+    j = 0;
+    if (inflightAnimation.completed) {
+      continue;
+    }
+    for (auto &keyframe : inflightAnimation.keyFrames) {
+      j++;
+      if (keyframe.invalidated) {
+        continue;
+      }
+      for (auto const &finalMutation : keyframe.finalMutationsForKeyFrame) {
+        if (!finalMutation.mutatedViewIsVirtual()) {
+          std::string msg = "Animation " + std::to_string(i) + " keyframe " +
+              std::to_string(j) + ": Final Animation";
+          PrintMutationInstruction(msg, finalMutation);
+        }
+      }
+    }
+  }
+  LOG(ERROR) << "FINISHING DONE DISPLAYING ONGOING inflightAnimations_!";
+#endif
+
+  // Signal to delegate if all animations are complete, or if we were not
+  // animating anything and now some animation exists.
+  if (inflightAnimationsExistInitially && inflightAnimations_.empty()) {
+    std::lock_guard<std::mutex> lock(layoutAnimationStatusDelegateMutex_);
+    if (layoutAnimationStatusDelegate_ != nullptr) {
+      layoutAnimationStatusDelegate_->onAllAnimationsComplete();
+    }
+  } else if (
+      !inflightAnimationsExistInitially && !inflightAnimations_.empty()) {
+    std::lock_guard<std::mutex> lock(layoutAnimationStatusDelegateMutex_);
+    if (layoutAnimationStatusDelegate_ != nullptr) {
+      layoutAnimationStatusDelegate_->onAnimationStarted();
+    }
+  }
+
+  simulateImagePropsMemoryAccess(mutations);
+
+  return MountingTransaction{
+      surfaceId, transactionNumber, std::move(mutations), telemetry};
+}
+
+void LayoutAnimationKeyFrameManager::uiManagerDidConfigureNextLayoutAnimation(
+    LayoutAnimation layoutAnimation) const {
+  currentAnimation_ = better::optional<LayoutAnimation>{layoutAnimation};
+}
+
+void LayoutAnimationKeyFrameManager::setLayoutAnimationStatusDelegate(
+    LayoutAnimationStatusDelegate *delegate) const {
+  std::lock_guard<std::mutex> lock(layoutAnimationStatusDelegateMutex_);
+  layoutAnimationStatusDelegate_ = delegate;
+}
+
+void LayoutAnimationKeyFrameManager::setClockNow(
+    std::function<uint64_t()> now) {
+  now_ = now;
+}
+
+void LayoutAnimationKeyFrameManager::enableSkipInvalidatedKeyFrames() {
+  skipInvalidatedKeyFrames_ = true;
+}
+
+void LayoutAnimationKeyFrameManager::enableCrashOnMissingComponentDescriptor() {
+  crashOnMissingComponentDescriptor_ = true;
+}
+
+void LayoutAnimationKeyFrameManager::enableSimulateImagePropsMemoryAccess() {
+  simulateImagePropsMemoryAccess_ = true;
+}
+
+#pragma mark - Protected
+
+bool LayoutAnimationKeyFrameManager::hasComponentDescriptorForShadowView(
+    ShadowView const &shadowView) const {
+  auto hasComponentDescriptor =
+      componentDescriptorRegistry_->hasComponentDescriptorAt(
+          shadowView.componentHandle);
+
+  if (crashOnMissingComponentDescriptor_ && !hasComponentDescriptor) {
+    LOG(FATAL) << "Component descriptor with handle: "
+               << shadowView.componentHandle
+               << " doesn't exist. The component name: "
+               << shadowView.componentName;
+  }
+
+  return hasComponentDescriptor;
+}
+
+ComponentDescriptor const &
+LayoutAnimationKeyFrameManager::getComponentDescriptorForShadowView(
+    ShadowView const &shadowView) const {
+  return componentDescriptorRegistry_->at(shadowView.componentHandle);
+}
+
+ShadowView LayoutAnimationKeyFrameManager::createInterpolatedShadowView(
+    double progress,
+    ShadowView const &startingView,
+    ShadowView const &finalView) const {
+  react_native_assert(startingView.tag > 0);
+  react_native_assert(finalView.tag > 0);
+  if (!hasComponentDescriptorForShadowView(startingView)) {
+    LOG(ERROR) << "No ComponentDescriptor for ShadowView being animated: ["
+               << startingView.tag << "]";
+    react_native_assert(false);
+    return finalView;
+  }
+
+  ComponentDescriptor const &componentDescriptor =
+      getComponentDescriptorForShadowView(startingView);
+
+  // Base the mutated view on the finalView, so that the following stay
+  // consistent:
+  // - state
+  // - eventEmitter
+  // For now, we do not allow interpolation of state. And we probably never
+  // will, so make sure we always keep the mounting layer consistent with the
+  // "final" state.
+  auto mutatedShadowView = ShadowView(finalView);
+  react_native_assert(mutatedShadowView.tag > 0);
+
+  react_native_assert(startingView.props != nullptr);
+  react_native_assert(finalView.props != nullptr);
+  if (startingView.props == nullptr || finalView.props == nullptr) {
+    return finalView;
+  }
+
+  // Animate opacity or scale/transform
+  PropsParserContext propsParserContext{
+      finalView.surfaceId, *contextContainer_};
+  mutatedShadowView.props = componentDescriptor.interpolateProps(
+      propsParserContext, progress, startingView.props, finalView.props);
+  react_native_assert(mutatedShadowView.props != nullptr);
+  if (mutatedShadowView.props == nullptr) {
+    return finalView;
+  }
+
+  // Interpolate LayoutMetrics
+  LayoutMetrics const &finalLayoutMetrics = finalView.layoutMetrics;
+  LayoutMetrics const &baselineLayoutMetrics = startingView.layoutMetrics;
+  LayoutMetrics interpolatedLayoutMetrics = finalLayoutMetrics;
+  interpolatedLayoutMetrics.frame.origin.x = interpolateFloats(
+      progress,
+      baselineLayoutMetrics.frame.origin.x,
+      finalLayoutMetrics.frame.origin.x);
+  interpolatedLayoutMetrics.frame.origin.y = interpolateFloats(
+      progress,
+      baselineLayoutMetrics.frame.origin.y,
+      finalLayoutMetrics.frame.origin.y);
+  interpolatedLayoutMetrics.frame.size.width = interpolateFloats(
+      progress,
+      baselineLayoutMetrics.frame.size.width,
+      finalLayoutMetrics.frame.size.width);
+  interpolatedLayoutMetrics.frame.size.height = interpolateFloats(
+      progress,
+      baselineLayoutMetrics.frame.size.height,
+      finalLayoutMetrics.frame.size.height);
+  mutatedShadowView.layoutMetrics = interpolatedLayoutMetrics;
+
+  return mutatedShadowView;
+}
+
+void LayoutAnimationKeyFrameManager::callCallback(
+    LayoutAnimationCallbackWrapper const &callback) const {
+  runtimeExecutor_(
+      [callback](jsi::Runtime &runtime) { callback.call(runtime); });
+}
+
+void LayoutAnimationKeyFrameManager::queueFinalMutationsForCompletedKeyFrame(
+    AnimationKeyFrame const &keyframe,
+    ShadowViewMutation::List &mutationsList,
+    bool interrupted,
+    const std::string &logPrefix) const {
+  if (skipInvalidatedKeyFrames_ && keyframe.invalidated) {
+    return;
+  }
+  if (keyframe.finalMutationsForKeyFrame.size() > 0) {
+    // TODO: modularize this segment, it is repeated 2x in KeyFrameManager
+    // as well.
+    ShadowView prev = keyframe.viewPrev;
+    for (auto const &finalMutation : keyframe.finalMutationsForKeyFrame) {
+      PrintMutationInstruction(
+          logPrefix + ": Queuing up Final Mutation:", finalMutation);
+      // Copy so that if something else mutates the inflight animations,
+      // it won't change this mutation after this point.
+      switch (finalMutation.type) {
+          // For CREATE/INSERT this will contain CREATE, INSERT in that order.
+          // For REMOVE/DELETE, same.
+        case ShadowViewMutation::Type::Create:
+          mutationsList.push_back(ShadowViewMutation::CreateMutation(
+              finalMutation.newChildShadowView));
+          break;
+        case ShadowViewMutation::Type::Delete:
+          mutationsList.push_back(ShadowViewMutation::DeleteMutation(prev));
+          break;
+        case ShadowViewMutation::Type::Insert:
+          mutationsList.push_back(ShadowViewMutation::InsertMutation(
+              finalMutation.parentShadowView,
+              finalMutation.newChildShadowView,
+              finalMutation.index));
+          break;
+        case ShadowViewMutation::Type::Remove:
+          mutationsList.push_back(ShadowViewMutation::RemoveMutation(
+              finalMutation.parentShadowView, prev, finalMutation.index));
+          break;
+        case ShadowViewMutation::Type::Update:
+          mutationsList.push_back(ShadowViewMutation::UpdateMutation(
+              prev, finalMutation.newChildShadowView));
+          break;
+      }
+      if (finalMutation.newChildShadowView.tag > 0) {
+        prev = finalMutation.newChildShadowView;
+      }
+    }
+  } else {
+    // If there's no final mutation associated, create a mutation that
+    // corresponds to the animation being 100% complete. This is
+    // important for, for example, INSERT mutations being animated from
+    // opacity 0 to 1. If the animation is interrupted we must force the
+    // View to be at opacity 1. For Android - since it passes along only
+    // deltas, not an entire bag of props - generate an "animation"
+    // frame corresponding to a final update for this view. Only then,
+    // generate an update that will cause the ShadowTree to be
+    // consistent with the Mounting layer by passing viewEnd,
+    // unmodified, to the mounting layer. This helps with, for example,
+    // opacity animations.
+    // This is necessary for INSERT (create) and UPDATE (update) mutations, but
+    // not REMOVE/DELETE mutations ("delete" animations).
+    if (interrupted) {
+      auto mutatedShadowView =
+          createInterpolatedShadowView(1, keyframe.viewStart, keyframe.viewEnd);
+      auto generatedPenultimateMutation = ShadowViewMutation::UpdateMutation(
+          keyframe.viewPrev, mutatedShadowView);
+      react_native_assert(
+          generatedPenultimateMutation.oldChildShadowView.tag > 0);
+      react_native_assert(
+          generatedPenultimateMutation.newChildShadowView.tag > 0);
+      PrintMutationInstruction(
+          "Queueing up penultimate mutation instruction - synthetic",
+          generatedPenultimateMutation);
+      mutationsList.push_back(generatedPenultimateMutation);
+
+      auto generatedMutation = ShadowViewMutation::UpdateMutation(
+          mutatedShadowView, keyframe.viewEnd);
+      react_native_assert(generatedMutation.oldChildShadowView.tag > 0);
+      react_native_assert(generatedMutation.newChildShadowView.tag > 0);
+      PrintMutationInstruction(
+          "Queueing up final mutation instruction - synthetic",
+          generatedMutation);
+      mutationsList.push_back(generatedMutation);
+    } else {
+      auto mutation = ShadowViewMutation::UpdateMutation(
+          keyframe.viewPrev, keyframe.viewEnd);
+      PrintMutationInstruction(
+          logPrefix +
+              "Animation Complete: Queuing up Final Synthetic Mutation:",
+          mutation);
+      react_native_assert(mutation.oldChildShadowView.tag > 0);
+      react_native_assert(mutation.newChildShadowView.tag > 0);
+      mutationsList.push_back(std::move(mutation));
+    }
+  }
+}
+
+#pragma mark - Private
+
+void LayoutAnimationKeyFrameManager::
+    adjustImmediateMutationIndicesForDelayedMutations(
+        SurfaceId surfaceId,
+        ShadowViewMutation &mutation,
+        bool skipLastAnimation,
+        bool lastAnimationOnly) const {
+  bool isRemoveMutation = mutation.type == ShadowViewMutation::Type::Remove;
+  react_native_assert(
+      isRemoveMutation || mutation.type == ShadowViewMutation::Type::Insert);
+
+  // TODO: turn all of this into a lambda and share code?
+  if (mutation.mutatedViewIsVirtual()) {
+    PrintMutationInstruction(
+        "[IndexAdjustment] Not calling adjustImmediateMutationIndicesForDelayedMutations, is virtual, for:",
+        mutation);
+    return;
+  }
+
+  PrintMutationInstruction(
+      "[IndexAdjustment] Calling adjustImmediateMutationIndicesForDelayedMutations for:",
+      mutation);
+
+  // First, collect all final mutations that could impact this immediate
+  // mutation.
+  std::vector<ShadowViewMutation *> candidateMutations{};
+
+  for (auto inflightAnimationIt =
+           inflightAnimations_.rbegin() + (skipLastAnimation ? 1 : 0);
+       inflightAnimationIt != inflightAnimations_.rend();
+       inflightAnimationIt++) {
+    auto &inflightAnimation = *inflightAnimationIt;
+    if (inflightAnimation.surfaceId != surfaceId) {
+      continue;
+    }
+    if (inflightAnimation.completed) {
+      continue;
+    }
+
+    for (auto it = inflightAnimation.keyFrames.begin();
+         it != inflightAnimation.keyFrames.end();
+         it++) {
+      auto &animatedKeyFrame = *it;
 
-#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
-      LOG(ERROR)
-          << "No Animation: Adjust delayed mutations based on all finalMutationsForConflictingAnimations";
-#endif
-      for (auto const &mutation : finalMutationsForConflictingAnimations) {
-        if (mutation.type == ShadowViewMutation::Type::Remove ||
-            mutation.type == ShadowViewMutation::Type::Insert) {
-          adjustDelayedMutationIndicesForMutation(surfaceId, mutation);
-        }
+      if (animatedKeyFrame.invalidated) {
+        continue;
       }
 
-      // The ShadowTree layer doesn't realize that certain operations have
-      // been delayed, so we must adjust all Remove and Insert operations
-      // based on what else has been deferred, whether we are executing this
-      // immediately or later.
-#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
-      LOG(ERROR)
-          << "No Animation: Adjust mutations based on remaining delayed mutations / adjust delayed, based on each";
-#endif
-      for (auto &mutation : mutations) {
-        if (mutation.type == ShadowViewMutation::Type::Remove ||
-            mutation.type == ShadowViewMutation::Type::Insert) {
-          adjustImmediateMutationIndicesForDelayedMutations(
-              surfaceId, mutation);
-          adjustDelayedMutationIndicesForMutation(surfaceId, mutation);
+      // Detect if they're in the same view hierarchy, but not equivalent
+      // We've already detected direct conflicts and removed them.
+      if (animatedKeyFrame.parentView.tag != mutation.parentShadowView.tag) {
+        continue;
+      }
+
+      for (auto &delayedMutation : animatedKeyFrame.finalMutationsForKeyFrame) {
+        if (delayedMutation.type != ShadowViewMutation::Type::Remove) {
+          continue;
+        }
+        if (delayedMutation.mutatedViewIsVirtual()) {
+          continue;
         }
+        if (delayedMutation.oldChildShadowView.tag ==
+            (isRemoveMutation ? mutation.oldChildShadowView.tag
+                              : mutation.newChildShadowView.tag)) {
+          continue;
+        }
+
+        PrintMutationInstructionRelative(
+            "[IndexAdjustment] adjustImmediateMutationIndicesForDelayedMutations CANDIDATE for:",
+            mutation,
+            delayedMutation);
+        candidateMutations.push_back(&delayedMutation);
       }
+    }
 
-      // Append mutations to this list and swap - so that the final
-      // conflicting mutations happen before any other mutations
-      finalMutationsForConflictingAnimations.insert(
-          finalMutationsForConflictingAnimations.end(),
-          mutations.begin(),
-          mutations.end());
-      mutations = finalMutationsForConflictingAnimations;
+    if (lastAnimationOnly) {
+      break;
     }
-  } // if (mutations)
+  }
 
-  // We never commit a different root or modify anything -
-  // we just send additional mutations to the mounting layer until the
-  // animations are finished and the mounting layer (view) represents exactly
-  // what is in the most recent shadow tree
-  // Add animation mutations to the end of our existing mutations list in this
-  // function.
-  ShadowViewMutationList mutationsForAnimation{};
-  animationMutationsForFrame(surfaceId, mutationsForAnimation, now);
+  // While the mutation keeps being affected, keep checking. We use the vector
+  // so we only perform one adjustment per delayed mutation. See comments at
+  // bottom of adjustDelayedMutationIndicesForMutation for further explanation.
+  bool changed = true;
+  int adjustedDelta = 0;
+  while (changed) {
+    changed = false;
+    candidateMutations.erase(
+        std::remove_if(
+            candidateMutations.begin(),
+            candidateMutations.end(),
+            [&changed, &mutation, &adjustedDelta, &isRemoveMutation](
+                ShadowViewMutation *candidateMutation) {
+              bool indexConflicts =
+                  (candidateMutation->index < mutation.index ||
+                   (isRemoveMutation &&
+                    candidateMutation->index == mutation.index));
+              if (indexConflicts) {
+                mutation.index++;
+                adjustedDelta++;
+                changed = true;
+                PrintMutationInstructionRelative(
+                    "[IndexAdjustment] adjustImmediateMutationIndicesForDelayedMutations: Adjusting mutation UPWARD",
+                    mutation,
+                    *candidateMutation);
+                return true;
+              }
+              return false;
+            }),
+        candidateMutations.end());
+  }
+}
 
-  // If any delayed removes were executed, update remaining delayed keyframes
-#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
-  LOG(ERROR)
-      << "Adjust all delayed mutations based on final mutations generated by animation driver";
-#endif
-  for (auto const &mutation : mutationsForAnimation) {
-    if (mutation.type == ShadowViewMutation::Type::Remove) {
-      adjustDelayedMutationIndicesForMutation(surfaceId, mutation);
-    }
+void LayoutAnimationKeyFrameManager::adjustDelayedMutationIndicesForMutation(
+    SurfaceId surfaceId,
+    ShadowViewMutation const &mutation,
+    bool skipLastAnimation) const {
+  bool isRemoveMutation = mutation.type == ShadowViewMutation::Type::Remove;
+  bool isInsertMutation = mutation.type == ShadowViewMutation::Type::Insert;
+  auto tag = isRemoveMutation ? mutation.oldChildShadowView.tag
+                              : mutation.newChildShadowView.tag;
+  react_native_assert(isRemoveMutation || isInsertMutation);
+
+  if (mutation.mutatedViewIsVirtual()) {
+    PrintMutationInstruction(
+        "[IndexAdjustment] Not calling adjustDelayedMutationIndicesForMutation, is virtual, for:",
+        mutation);
+    return;
   }
 
-  mutations.insert(
-      mutations.end(),
-      mutationsForAnimation.begin(),
-      mutationsForAnimation.end());
+  // First, collect all final mutations that could impact this immediate
+  // mutation.
+  std::vector<ShadowViewMutation *> candidateMutations{};
 
-  // DEBUG ONLY: list existing inflight animations
-#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
-  LOG(ERROR) << "FINISHING DISPLAYING ONGOING inflightAnimations_!";
-  int i = 0;
-  int j = 0;
-  for (auto const &inflightAnimation : inflightAnimations_) {
-    i++;
-    j = 0;
+  for (auto inflightAnimationIt =
+           inflightAnimations_.rbegin() + (skipLastAnimation ? 1 : 0);
+       inflightAnimationIt != inflightAnimations_.rend();
+       inflightAnimationIt++) {
+    auto &inflightAnimation = *inflightAnimationIt;
+
+    if (inflightAnimation.surfaceId != surfaceId) {
+      continue;
+    }
     if (inflightAnimation.completed) {
       continue;
     }
-    for (auto &keyframe : inflightAnimation.keyFrames) {
-      j++;
-      if (keyframe.invalidated) {
+
+    for (auto it = inflightAnimation.keyFrames.begin();
+         it != inflightAnimation.keyFrames.end();
+         it++) {
+      auto &animatedKeyFrame = *it;
+
+      if (animatedKeyFrame.invalidated) {
+        continue;
+      }
+
+      // Detect if they're in the same view hierarchy, but not equivalent
+      // (We've already detected direct conflicts and handled them above)
+      if (animatedKeyFrame.parentView.tag != mutation.parentShadowView.tag) {
+        continue;
+      }
+
+      for (auto &finalAnimationMutation :
+           animatedKeyFrame.finalMutationsForKeyFrame) {
+        if (finalAnimationMutation.oldChildShadowView.tag == tag) {
+          continue;
+        }
+
+        if (finalAnimationMutation.type != ShadowViewMutation::Type::Remove) {
+          continue;
+        }
+        if (finalAnimationMutation.mutatedViewIsVirtual()) {
+          continue;
+        }
+
+        PrintMutationInstructionRelative(
+            "[IndexAdjustment] adjustDelayedMutationIndicesForMutation: CANDIDATE:",
+            mutation,
+            finalAnimationMutation);
+        candidateMutations.push_back(&finalAnimationMutation);
+      }
+    }
+  }
+
+  // Because the finalAnimations are not sorted in any way, it is possible to
+  // have some sequence like:
+  // * DELAYED REMOVE 10 from {TAG}
+  // * DELAYED REMOVE 9 from {TAG}
+  // * ...
+  // * DELAYED REMOVE 5 from {TAG}
+  // with mutation: INSERT 6/REMOVE 6. This would cause the first few mutations
+  // to *not* be adjusted, even though they would be impacted by mutation or
+  // vice-versa after later adjustments are applied. Therefore, we just keep
+  // recursing while there are any changes. This isn't great, but is good enough
+  // for now until we change these data-structures.
+  bool changed = true;
+  while (changed) {
+    changed = false;
+    candidateMutations.erase(
+        std::remove_if(
+            candidateMutations.begin(),
+            candidateMutations.end(),
+            [&mutation, &isRemoveMutation, &isInsertMutation, &changed](
+                ShadowViewMutation *candidateMutation) {
+              if (isRemoveMutation &&
+                  mutation.index <= candidateMutation->index) {
+                candidateMutation->index--;
+                changed = true;
+                PrintMutationInstructionRelative(
+                    "[IndexAdjustment] adjustDelayedMutationIndicesForMutation: Adjusting mutation DOWNWARD",
+                    mutation,
+                    *candidateMutation);
+                return true;
+              } else if (
+                  isInsertMutation &&
+                  mutation.index <= candidateMutation->index) {
+                candidateMutation->index++;
+                changed = true;
+                PrintMutationInstructionRelative(
+                    "[IndexAdjustment] adjustDelayedMutationIndicesForMutation: Adjusting mutation UPWARD",
+                    mutation,
+                    *candidateMutation);
+                return true;
+              }
+              return false;
+            }),
+        candidateMutations.end());
+  }
+}
+
+void LayoutAnimationKeyFrameManager::getAndEraseConflictingAnimations(
+    SurfaceId surfaceId,
+    ShadowViewMutationList const &mutations,
+    std::vector<AnimationKeyFrame> &conflictingAnimations) const {
+  ShadowViewMutationList localConflictingMutations{};
+  for (auto const &mutation : mutations) {
+    bool mutationIsCreateOrDelete =
+        mutation.type == ShadowViewMutation::Type::Create ||
+        mutation.type == ShadowViewMutation::Type::Delete;
+    auto const &baselineShadowView =
+        (mutation.type == ShadowViewMutation::Type::Insert ||
+         mutation.type == ShadowViewMutation::Type::Create)
+        ? mutation.newChildShadowView
+        : mutation.oldChildShadowView;
+    auto baselineTag = baselineShadowView.tag;
+
+    for (auto &inflightAnimation : inflightAnimations_) {
+      if (inflightAnimation.surfaceId != surfaceId) {
         continue;
       }
-      for (auto const &finalMutation : keyframe.finalMutationsForKeyFrame) {
-        if (!finalMutation.mutatedViewIsVirtual()) {
-          std::string msg = "Animation " + std::to_string(i) + " keyframe " +
-              std::to_string(j) + ": Final Animation";
-          PrintMutationInstruction(msg, finalMutation);
-        }
+      if (inflightAnimation.completed) {
+        continue;
       }
-    }
-  }
-  LOG(ERROR) << "FINISHING DONE DISPLAYING ONGOING inflightAnimations_!";
-#endif
 
-  // Signal to delegate if all animations are complete, or if we were not
-  // animating anything and now some animation exists.
-  if (inflightAnimationsExistInitially && inflightAnimations_.empty()) {
-    std::lock_guard<std::mutex> lock(layoutAnimationStatusDelegateMutex_);
-    if (layoutAnimationStatusDelegate_ != nullptr) {
-      layoutAnimationStatusDelegate_->onAllAnimationsComplete();
-    }
-  } else if (
-      !inflightAnimationsExistInitially && !inflightAnimations_.empty()) {
-    std::lock_guard<std::mutex> lock(layoutAnimationStatusDelegateMutex_);
-    if (layoutAnimationStatusDelegate_ != nullptr) {
-      layoutAnimationStatusDelegate_->onAnimationStarted();
-    }
-  }
+      for (auto it = inflightAnimation.keyFrames.begin();
+           it != inflightAnimation.keyFrames.end();) {
+        auto &animatedKeyFrame = *it;
 
-  return MountingTransaction{
-      surfaceId, transactionNumber, std::move(mutations), telemetry};
-}
+        if (animatedKeyFrame.invalidated) {
+          continue;
+        }
 
-bool LayoutAnimationKeyFrameManager::hasComponentDescriptorForShadowView(
-    ShadowView const &shadowView) const {
-  return componentDescriptorRegistry_->hasComponentDescriptorAt(
-      shadowView.componentHandle);
-}
+        // A conflict is when either: the animated node itself is mutated
+        // directly; or, the parent of the node is created or deleted. In cases
+        // of reparenting - say, the parent is deleted but the node was moved to
+        // a different parent first - the reparenting (remove/insert) conflict
+        // will be detected before we process the parent DELETE.
+        // Parent deletion is important because deleting a parent recursively
+        // deletes all children. If we previously deferred deletion of a child,
+        // we need to force deletion/removal to happen immediately.
+        bool conflicting = animatedKeyFrame.tag == baselineTag ||
+            (mutationIsCreateOrDelete &&
+             animatedKeyFrame.parentView.tag == baselineTag &&
+             animatedKeyFrame.parentView.tag != 0);
 
-ComponentDescriptor const &
-LayoutAnimationKeyFrameManager::getComponentDescriptorForShadowView(
-    ShadowView const &shadowView) const {
-  return componentDescriptorRegistry_->at(shadowView.componentHandle);
-}
+        // Conflicting animation detected: if we're mutating a tag under
+        // animation, or deleting the parent of a tag under animation, or
+        // reparenting.
+        if (conflicting) {
+          animatedKeyFrame.invalidated = true;
 
-void LayoutAnimationKeyFrameManager::setComponentDescriptorRegistry(
-    const SharedComponentDescriptorRegistry &componentDescriptorRegistry) {
-  componentDescriptorRegistry_ = componentDescriptorRegistry;
-}
+          // We construct a list of all conflicting animations, whether or not
+          // they have a "final mutation" to execute. This is important with,
+          // for example, "insert" mutations where the final update needs to set
+          // opacity to "1", even if there's no final ShadowNode update.
+          // TODO: don't animate virtual views in the first place?
+          bool isVirtual = false;
+          for (const auto &finalMutationForKeyFrame :
+               animatedKeyFrame.finalMutationsForKeyFrame) {
+            isVirtual =
+                isVirtual || finalMutationForKeyFrame.mutatedViewIsVirtual();
 
-/**
- * Given a `progress` between 0 and 1, a mutation and LayoutAnimation config,
- * return a ShadowView with mutated props and/or LayoutMetrics.
- *
- * @param progress
- * @param layoutAnimation
- * @param animatedMutation
- * @return
- */
-ShadowView LayoutAnimationKeyFrameManager::createInterpolatedShadowView(
-    double progress,
-    ShadowView startingView,
-    ShadowView finalView) const {
-  react_native_assert(startingView.tag > 0);
-  react_native_assert(finalView.tag > 0);
-  if (!hasComponentDescriptorForShadowView(startingView)) {
-    react_native_assert(false);
-    return finalView;
-  }
-  ComponentDescriptor const &componentDescriptor =
-      getComponentDescriptorForShadowView(startingView);
+#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
+            PrintMutationInstructionRelative(
+                "Found mutation that conflicts with existing in-flight animation:",
+                mutation,
+                finalMutationForKeyFrame);
+#endif
+          }
 
-  // Base the mutated view on the finalView, so that the following stay
-  // consistent:
-  // - state
-  // - eventEmitter
-  // For now, we do not allow interpolation of state. And we probably never
-  // will, so make sure we always keep the mounting layer consistent with the
-  // "final" state.
-  auto mutatedShadowView = ShadowView(finalView);
-  react_native_assert(mutatedShadowView.tag > 0);
+          conflictingAnimations.push_back(animatedKeyFrame);
+          for (const auto &finalMutationForKeyFrame :
+               animatedKeyFrame.finalMutationsForKeyFrame) {
+            if (!isVirtual ||
+                finalMutationForKeyFrame.type ==
+                    ShadowViewMutation::Type::Delete) {
+              localConflictingMutations.push_back(finalMutationForKeyFrame);
+            }
+          }
 
-  react_native_assert(startingView.props != nullptr);
-  react_native_assert(finalView.props != nullptr);
-  if (startingView.props == nullptr || finalView.props == nullptr) {
-    return finalView;
+          // Delete from existing animation
+          it = inflightAnimation.keyFrames.erase(it);
+        } else {
+          it++;
+        }
+      }
+    }
   }
 
-  // Animate opacity or scale/transform
-  mutatedShadowView.props = componentDescriptor.interpolateProps(
-      progress, startingView.props, finalView.props);
-  react_native_assert(mutatedShadowView.props != nullptr);
-  if (mutatedShadowView.props == nullptr) {
-    return finalView;
+  // Recurse, in case conflicting mutations conflict with other existing
+  // animations
+  if (!localConflictingMutations.empty()) {
+    getAndEraseConflictingAnimations(
+        surfaceId, localConflictingMutations, conflictingAnimations);
   }
-
-  // Interpolate LayoutMetrics
-  LayoutMetrics const &finalLayoutMetrics = finalView.layoutMetrics;
-  LayoutMetrics const &baselineLayoutMetrics = startingView.layoutMetrics;
-  LayoutMetrics interpolatedLayoutMetrics = finalLayoutMetrics;
-  interpolatedLayoutMetrics.frame.origin.x = interpolateFloats(
-      progress,
-      baselineLayoutMetrics.frame.origin.x,
-      finalLayoutMetrics.frame.origin.x);
-  interpolatedLayoutMetrics.frame.origin.y = interpolateFloats(
-      progress,
-      baselineLayoutMetrics.frame.origin.y,
-      finalLayoutMetrics.frame.origin.y);
-  interpolatedLayoutMetrics.frame.size.width = interpolateFloats(
-      progress,
-      baselineLayoutMetrics.frame.size.width,
-      finalLayoutMetrics.frame.size.width);
-  interpolatedLayoutMetrics.frame.size.height = interpolateFloats(
-      progress,
-      baselineLayoutMetrics.frame.size.height,
-      finalLayoutMetrics.frame.size.height);
-  mutatedShadowView.layoutMetrics = interpolatedLayoutMetrics;
-
-  return mutatedShadowView;
 }
 
-void LayoutAnimationKeyFrameManager::queueFinalMutationsForCompletedKeyFrame(
-    AnimationKeyFrame const &keyframe,
-    ShadowViewMutation::List &mutationsList,
-    bool interrupted,
-    std::string logPrefix) const {
-  if (keyframe.finalMutationsForKeyFrame.size() > 0) {
-    // TODO: modularize this segment, it is repeated 2x in KeyFrameManager
-    // as well.
-    ShadowView prev = keyframe.viewPrev;
-    for (auto const &finalMutation : keyframe.finalMutationsForKeyFrame) {
-      PrintMutationInstruction(
-          logPrefix + ": Queuing up Final Mutation:", finalMutation);
-      // Copy so that if something else mutates the inflight animations,
-      // it won't change this mutation after this point.
-      auto mutation = ShadowViewMutation{
-          finalMutation.type,
-          finalMutation.parentShadowView,
-          prev,
-          finalMutation.newChildShadowView,
-          finalMutation.index};
-      react_native_assert(mutation.oldChildShadowView.tag > 0);
-      react_native_assert(
-          mutation.newChildShadowView.tag > 0 ||
-          finalMutation.type == ShadowViewMutation::Remove ||
-          finalMutation.type == ShadowViewMutation::Delete);
-      mutationsList.push_back(mutation);
-      if (finalMutation.newChildShadowView.tag > 0) {
-        prev = finalMutation.newChildShadowView;
-      }
+void LayoutAnimationKeyFrameManager::deleteAnimationsForStoppedSurfaces()
+    const {
+  bool inflightAnimationsExistInitially = !inflightAnimations_.empty();
+
+  // Execute stopSurface on any ongoing animations
+  if (inflightAnimationsExistInitially) {
+    better::set<SurfaceId> surfaceIdsToStop{};
+    {
+      std::lock_guard<std::mutex> lock(surfaceIdsToStopMutex_);
+      surfaceIdsToStop = surfaceIdsToStop_;
+      surfaceIdsToStop_.clear();
     }
-  } else {
-    // If there's no final mutation associated, create a mutation that
-    // corresponds to the animation being 100% complete. This is
-    // important for, for example, INSERT mutations being animated from
-    // opacity 0 to 1. If the animation is interrupted we must force the
-    // View to be at opacity 1. For Android - since it passes along only
-    // deltas, not an entire bag of props - generate an "animation"
-    // frame corresponding to a final update for this view. Only then,
-    // generate an update that will cause the ShadowTree to be
-    // consistent with the Mounting layer by passing viewEnd,
-    // unmodified, to the mounting layer. This helps with, for example,
-    // opacity animations.
-    // This is necessary for INSERT (create) and UPDATE (update) mutations, but
-    // not REMOVE/DELETE mutations ("delete" animations).
-    if (interrupted) {
-      auto mutatedShadowView =
-          createInterpolatedShadowView(1, keyframe.viewStart, keyframe.viewEnd);
-      auto generatedPenultimateMutation = ShadowViewMutation::UpdateMutation(
-          keyframe.viewPrev, mutatedShadowView);
-      react_native_assert(
-          generatedPenultimateMutation.oldChildShadowView.tag > 0);
-      react_native_assert(
-          generatedPenultimateMutation.newChildShadowView.tag > 0);
-      PrintMutationInstruction(
-          "Queueing up penultimate mutation instruction - synthetic",
-          generatedPenultimateMutation);
-      mutationsList.push_back(generatedPenultimateMutation);
 
-      auto generatedMutation = ShadowViewMutation::UpdateMutation(
-          mutatedShadowView, keyframe.viewEnd);
-      react_native_assert(generatedMutation.oldChildShadowView.tag > 0);
-      react_native_assert(generatedMutation.newChildShadowView.tag > 0);
-      PrintMutationInstruction(
-          "Queueing up final mutation instruction - synthetic",
-          generatedMutation);
-      mutationsList.push_back(generatedMutation);
-    } else {
-      auto mutation = ShadowViewMutation{
-          ShadowViewMutation::Type::Update,
-          keyframe.parentView,
-          keyframe.viewPrev,
-          keyframe.viewEnd,
-          -1};
-      PrintMutationInstruction(
-          logPrefix +
-              "Animation Complete: Queuing up Final Synthetic Mutation:",
-          mutation);
-      react_native_assert(mutation.oldChildShadowView.tag > 0);
-      react_native_assert(mutation.newChildShadowView.tag > 0);
-      mutationsList.push_back(mutation);
+    for (auto it = inflightAnimations_.begin();
+         it != inflightAnimations_.end();) {
+      const auto &animation = *it;
+
+#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
+      LOG(ERROR)
+          << "LayoutAnimations: stopping animation due to stopSurface on "
+          << surfaceId;
+#endif
+      if (surfaceIdsToStop.find(animation.surfaceId) !=
+          surfaceIdsToStop.end()) {
+        it = inflightAnimations_.erase(it);
+      } else {
+        it++;
+      }
     }
   }
 }
 
-void LayoutAnimationKeyFrameManager::callCallback(
-    const LayoutAnimationCallbackWrapper &callback) const {
-  if (callback.readyForCleanup()) {
+void LayoutAnimationKeyFrameManager::simulateImagePropsMemoryAccess(
+    ShadowViewMutationList const &mutations) const {
+  if (!simulateImagePropsMemoryAccess_) {
     return;
   }
-
-  // Callbacks can only be called once. Replace the callsite with an empty
-  // CallbackWrapper. We use a unique_ptr to avoid copying into the vector.
-  std::unique_ptr<LayoutAnimationCallbackWrapper> copiedCallback(
-      std::make_unique<LayoutAnimationCallbackWrapper>(callback));
-
-  // Call the callback that is being retained in the vector
-  copiedCallback->call(runtimeExecutor_);
-
-  // Protect with a mutex: this can be called on failure callbacks in the JS
-  // thread and success callbacks on the UI thread
-  {
-    std::lock_guard<std::mutex> lock(callbackWrappersPendingMutex_);
-
-    // Clean any stale data in the retention vector
-    callbackWrappersPending_.erase(
-        std::remove_if(
-            callbackWrappersPending_.begin(),
-            callbackWrappersPending_.end(),
-            [](const std::unique_ptr<LayoutAnimationCallbackWrapper> &wrapper) {
-              return wrapper->readyForCleanup();
-            }),
-        callbackWrappersPending_.end());
-
-    // Hold onto a reference to the callback, only while
-    // LayoutAnimationKeyFrameManager is alive and the callback hasn't
-    // completed yet.
-    callbackWrappersPending_.push_back(std::move(copiedCallback));
+  for (auto const &mutation : mutations) {
+    if (mutation.type != ShadowViewMutation::Type::Insert) {
+      continue;
+    }
+    if (strcmp(mutation.newChildShadowView.componentName, "Image") == 0) {
+      auto const &imageProps = *std::static_pointer_cast<ImageProps const>(
+          mutation.newChildShadowView.props);
+      int temp = 0;
+      switch (imageProps.resizeMode) {
+        case ImageResizeMode::Cover:
+          temp = 1;
+          break;
+        case ImageResizeMode::Contain:
+          temp = 2;
+          break;
+        case ImageResizeMode::Stretch:
+          temp = 3;
+          break;
+        case ImageResizeMode::Center:
+          temp = 4;
+          break;
+        case ImageResizeMode::Repeat:
+          temp = 5;
+          break;
+      }
+      (void)temp;
+    }
   }
 }