react-native 0.0.0-201c10733 → 0.0.0-268efb102

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

@@ -8,22 +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>
 
@@ -57,9 +59,21 @@ static std::string GetMutationInstructionString(
 void PrintMutationInstruction(
     std::string message,
     ShadowViewMutation const &mutation) {
-  LOG(ERROR) << message
-             << " Mutation: " << GetMutationInstructionString(mutation);
+  [&](std::ostream &stream) -> std::ostream & {
+    stream << message
+           << " Mutation: " << GetMutationInstructionString(mutation);
+    if (mutation.oldChildShadowView.tag != 0) {
+      stream << " old hash: ##"
+             << std::hash<ShadowView>{}(mutation.oldChildShadowView);
+    }
+    if (mutation.newChildShadowView.tag != 0) {
+      stream << " new hash: ##"
+             << std::hash<ShadowView>{}(mutation.newChildShadowView);
+    }
+    return stream;
+  }(LOG(ERROR));
 }
+
 void PrintMutationInstructionRelative(
     std::string message,
     ShadowViewMutation const &mutation,
@@ -71,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.
@@ -293,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;
@@ -309,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 {
@@ -329,573 +161,179 @@ 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;
+bool LayoutAnimationKeyFrameManager::shouldOverridePullTransaction() const {
+  return shouldAnimateFrame();
+}
 
-  if (now >= endTime) {
-    return {1, 1};
-  }
-  if (now < startTime + delay) {
-    return {0, 0};
-  }
+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_();
 
-  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 inflightAnimationsExistInitially = !inflightAnimations_.empty();
+  deleteAnimationsForStoppedSurfaces();
 
-void LayoutAnimationKeyFrameManager::
-    adjustImmediateMutationIndicesForDelayedMutations(
-        SurfaceId surfaceId,
-        ShadowViewMutation &mutation,
-        bool skipLastAnimation,
-        bool lastAnimationOnly) const {
-  bool isRemoveMutation = mutation.type == ShadowViewMutation::Type::Remove;
-  assert(isRemoveMutation || mutation.type == ShadowViewMutation::Type::Insert);
+  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
 
-  // TODO: turn all of this into a lambda and share code?
-  if (mutatedViewIsVirtual(mutation)) {
-    PrintMutationInstruction(
-        "[IndexAdjustment] Not calling adjustImmediateMutationIndicesForDelayedMutations, is virtual, for:",
-        mutation);
-    return;
-  }
+      // 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
 
-  PrintMutationInstruction(
-      "[IndexAdjustment] Calling adjustImmediateMutationIndicesForDelayedMutations for:",
-      mutation);
+    PropsParserContext propsParserContext{surfaceId, *contextContainer_};
 
-  // First, collect all final mutations that could impact this immediate
-  // mutation.
-  std::vector<ShadowViewMutation *> candidateMutations{};
+    // 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);
 
-  for (auto inflightAnimationIt =
-           inflightAnimations_.rbegin() + (skipLastAnimation ? 1 : 0);
-       inflightAnimationIt != inflightAnimations_.rend();
-       inflightAnimationIt++) {
-    auto &inflightAnimation = *inflightAnimationIt;
-    if (inflightAnimation.surfaceId != surfaceId) {
-      continue;
-    }
-    if (inflightAnimation.completed) {
-      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 it = inflightAnimation.keyFrames.begin();
-         it != inflightAnimation.keyFrames.end();
-         it++) {
-      auto &animatedKeyFrame = *it;
+    if (currentAnimation.hasValue()) {
+      LayoutAnimation animation = std::move(currentAnimation).value();
+      animation.surfaceId = surfaceId;
+      animation.startTime = now;
 
-      if (animatedKeyFrame.invalidated) {
-        continue;
+      // 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 (mutation.type == ShadowViewMutation::Type::Delete) {
+          deletedTags.insert(mutation.oldChildShadowView.tag);
+        }
+        if (mutation.type == ShadowViewMutation::Type::Create) {
+          if (deletedTags.find(mutation.newChildShadowView.tag) !=
+              deletedTags.end()) {
+            reparentedTags.insert(mutation.newChildShadowView.tag);
+          }
+        }
       }
 
-      // 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;
-      }
+      // 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;
 
-      if (!animatedKeyFrame.finalMutationForKeyFrame.has_value()) {
-        continue;
-      }
+      // 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);
 
-      auto &delayedMutation = *animatedKeyFrame.finalMutationForKeyFrame;
+        // Immediately execute any mutations on a root node
+        if (baselineShadowView.traits.check(
+                ShadowNodeTraits::Trait::RootNodeKind)) {
+          immediateMutations.push_back(mutation);
+          continue;
+        }
 
-      if (delayedMutation.type != ShadowViewMutation::Type::Remove) {
-        continue;
-      }
-      if (mutatedViewIsVirtual(delayedMutation)) {
-        continue;
-      }
-      if (delayedMutation.oldChildShadowView.tag ==
-          (isRemoveMutation ? mutation.oldChildShadowView.tag
-                            : mutation.newChildShadowView.tag)) {
-        continue;
-      }
+        better::optional<ShadowViewMutation> executeMutationImmediately{};
 
-      PrintMutationInstructionRelative(
-          "[IndexAdjustment] adjustImmediateMutationIndicesForDelayedMutations CANDIDATE for:",
-          mutation,
-          delayedMutation);
-      candidateMutations.push_back(&delayedMutation);
-    }
-
-    if (lastAnimationOnly) {
-      break;
-    }
-  }
-
-  // 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;
-  assert(isRemoveMutation || isInsertMutation);
-
-  if (mutatedViewIsVirtual(mutation)) {
-    PrintMutationInstruction(
-        "[IndexAdjustment] Not calling adjustDelayedMutationIndicesForMutation, is virtual, for:",
-        mutation);
-    return;
-  }
-
-  // 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;
-
-      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;
-      }
-
-      if (!animatedKeyFrame.finalMutationForKeyFrame.has_value()) {
-        continue;
-      }
-      ShadowViewMutation &finalAnimationMutation =
-          *animatedKeyFrame.finalMutationForKeyFrame;
-
-      if (finalAnimationMutation.oldChildShadowView.tag ==
-          (isRemoveMutation ? mutation.oldChildShadowView.tag
-                            : mutation.newChildShadowView.tag)) {
-        continue;
-      }
-
-      if (finalAnimationMutation.type != ShadowViewMutation::Type::Remove) {
-        continue;
-      }
-      if (mutatedViewIsVirtual(*animatedKeyFrame.finalMutationForKeyFrame)) {
-        continue;
-      }
-
-      PrintMutationInstructionRelative(
-          "[IndexAdjustment] adjustDelayedMutationIndicesForMutation: CANDIDATE:",
-          mutation,
-          *animatedKeyFrame.finalMutationForKeyFrame);
-      candidateMutations.push_back(
-          animatedKeyFrame.finalMutationForKeyFrame.get_pointer());
-    }
-  }
-
-  // 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());
-  }
-}
-
-std::vector<AnimationKeyFrame>
-LayoutAnimationKeyFrameManager::getAndEraseConflictingAnimations(
-    SurfaceId surfaceId,
-    ShadowViewMutationList const &mutations,
-    bool deletesOnly) const {
-  std::vector<AnimationKeyFrame> conflictingAnimations{};
-
-  for (auto const &mutation : mutations) {
-    if (deletesOnly && mutation.type != ShadowViewMutation::Type::Delete) {
-      continue;
-    }
-
-    auto const &baselineShadowView =
-        (mutation.type == ShadowViewMutation::Type::Insert ||
-         mutation.type == ShadowViewMutation::Type::Create)
-        ? mutation.newChildShadowView
-        : mutation.oldChildShadowView;
-
-    for (auto &inflightAnimation : inflightAnimations_) {
-      if (inflightAnimation.surfaceId != surfaceId) {
-        continue;
-      }
-      if (inflightAnimation.completed) {
-        continue;
-      }
-
-      for (auto it = inflightAnimation.keyFrames.begin();
-           it != inflightAnimation.keyFrames.end();) {
-        auto &animatedKeyFrame = *it;
-
-        if (animatedKeyFrame.invalidated) {
-          continue;
-        }
-
-        bool conflicting = animatedKeyFrame.tag == baselineShadowView.tag ||
-            ((mutation.type == ShadowViewMutation::Type::Delete ||
-              mutation.type == ShadowViewMutation::Type::Create) &&
-             animatedKeyFrame.parentView.tag == baselineShadowView.tag);
-
-        // 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;
-
-          // 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.
-          if (!(animatedKeyFrame.finalMutationForKeyFrame.has_value() &&
-                mutatedViewIsVirtual(
-                    *animatedKeyFrame.finalMutationForKeyFrame))) {
-            conflictingAnimations.push_back(animatedKeyFrame);
-          }
-
-#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
-          if (animatedKeyFrame.finalMutationForKeyFrame.has_value()) {
-            PrintMutationInstructionRelative(
-                "Found mutation that conflicts with existing in-flight animation:",
-                mutation,
-                *animatedKeyFrame.finalMutationForKeyFrame);
-          } else {
-            PrintMutationInstruction(
-                "Found mutation that conflicts with existing in-flight animation (no final mutation):",
-                mutation);
-          }
-#endif
-
-          // Delete from existing animation
-          it = inflightAnimation.keyFrames.erase(it);
-        } else {
-          it++;
-        }
-      }
-    }
-  }
-
-  return conflictingAnimations;
-}
-
-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();
-
-  bool inflightAnimationsExistInitially = !inflightAnimations_.empty();
-
-  // Execute stopSurface on any ongoing animations
-  if (inflightAnimationsExistInitially) {
-    std::vector<SurfaceId> surfaceIdsToStop{};
-    {
-      std::lock_guard<std::mutex> lock(surfaceIdsToStopMutex_);
-      surfaceIdsToStop = surfaceIdsToStop_;
-      surfaceIdsToStop_ = {};
-    }
-
-    for (auto it = inflightAnimations_.begin();
-         it != inflightAnimations_.end();) {
-      const auto &animation = *it;
-
-      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++;
-      }
-    }
-  }
-
-  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
-
-      // 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;
-        }
-        if (keyframe.finalMutationForKeyFrame &&
-            !mutatedViewIsVirtual(*keyframe.finalMutationForKeyFrame)) {
-          std::string msg = "Animation " + std::to_string(i) + " keyframe " +
-              std::to_string(j) + ": Final Animation";
-          PrintMutationInstruction(msg, *keyframe.finalMutationForKeyFrame);
-        } else {
-          LOG(ERROR) << "Animation " << i << " keyframe " << j << ": on tag: ["
-                     << keyframe.viewStart.tag << "]";
-        }
-      }
-    }
-    LOG(ERROR) << "BEGINNING DONE DISPLAYING ONGOING inflightAnimations_!";
-#endif
-
-    // 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.
-    auto conflictingAnimations =
-        getAndEraseConflictingAnimations(surfaceId, mutations);
-
-    // 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 (currentAnimation) {
-      LayoutAnimation animation = std::move(currentAnimation.value());
-      currentAnimation = {};
-      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).
-      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);
-          }
-        }
-      }
-
-      // 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;
-
-      // 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);
-        bool haveComponentDescriptor =
-            hasComponentDescriptorForShadowView(baselineShadowView);
-
-        bool executeMutationImmediately = false;
-
-        bool isRemoveReinserted =
-            mutation.type == ShadowViewMutation::Type::Remove &&
-            std::find(
-                insertedTags.begin(),
-                insertedTags.end(),
-                mutation.oldChildShadowView.tag) != insertedTags.end();
+        bool isRemoveReinserted =
+            mutation.type == ShadowViewMutation::Type::Remove &&
+            insertedTags.find(mutation.oldChildShadowView.tag) !=
+                insertedTags.end();
 
         // 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();
+        bool isReparented =
+            reparentedTags.find(baselineShadowView.tag) != reparentedTags.end();
 
         if (isRemoveReinserted) {
           movedTags.insert({mutation.oldChildShadowView.tag, mutation});
@@ -928,23 +366,13 @@ LayoutAnimationKeyFrameManager::pullTransaction(
         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});
-        }
-
         // 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;
+          executeMutationImmediately = mutation;
 
           // It is possible, especially in the case of "moves", that we have a
           // sequence of operations like:
@@ -963,11 +391,49 @@ LayoutAnimationKeyFrameManager::pullTransaction(
                 // 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.
-                assert(keyframe.type == AnimationConfigurationType::Update);
-
-                keyframe.viewPrev = mutation.newChildShadowView.tag != 0
-                    ? mutation.newChildShadowView
-                    : mutation.oldChildShadowView;
+                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;
+                }
+              }
+            }
+          } 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);
+
+                // The mutation is a "remove", so it must have a
+                // "oldChildShadowView"
+                react_native_assert(mutation.oldChildShadowView.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.
+                // 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);
+                }
               }
             }
           }
@@ -981,11 +447,17 @@ LayoutAnimationKeyFrameManager::pullTransaction(
               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{};
@@ -995,55 +467,19 @@ LayoutAnimationKeyFrameManager::pullTransaction(
                 haveComponentDescriptor) {
               auto props =
                   getComponentDescriptorForShadowView(baselineShadowView)
-                      .cloneProps(viewStart.props, {});
-              const auto viewProps =
-                  dynamic_cast<const ViewProps *>(props.get());
-              if (viewProps != nullptr) {
-                const_cast<ViewProps *>(viewProps)->opacity = 0;
-              }
-              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, {});
-              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);
+                      .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).opacity = 0;
               }
-              viewStart.props = props;
-            }
 
-            keyFrame = AnimationKeyFrame{
-                {},
-                AnimationConfigurationType::Create,
-                tag,
-                parent,
-                viewStart,
-                viewFinal,
-                baselineShadowView,
-                0};
-          } else if (mutation.type == ShadowViewMutation::Type::Delete) {
-            if (mutationConfig.animationProperty ==
-                    AnimationProperty::Opacity &&
-                haveComponentDescriptor) {
-              auto props =
-                  getComponentDescriptorForShadowView(baselineShadowView)
-                      .cloneProps(viewFinal.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;
               }
-              viewFinal.props = props;
             }
             bool isScaleX =
                 mutationConfig.animationProperty == AnimationProperty::ScaleX ||
@@ -1054,43 +490,78 @@ LayoutAnimationKeyFrameManager::pullTransaction(
             if ((isScaleX || isScaleY) && haveComponentDescriptor) {
               auto props =
                   getComponentDescriptorForShadowView(baselineShadowView)
-                      .cloneProps(viewFinal.props, {});
-              const auto viewProps =
-                  dynamic_cast<const ViewProps *>(props.get());
-              if (viewProps != nullptr) {
-                const_cast<ViewProps *>(viewProps)->transform =
+                      .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);
               }
-              viewFinal.props = props;
+
+              react_native_assert(props != nullptr);
+              if (props != nullptr) {
+                viewStart.props = props;
+              }
             }
 
+            PrintMutationInstruction(
+                "Setting up animation KeyFrame for INSERT mutation (Create animation)",
+                mutation);
+
             keyFrame = AnimationKeyFrame{
-                better::optional<ShadowViewMutation>(mutation),
-                AnimationConfigurationType::Delete,
-                tag,
-                parent,
-                viewStart,
-                viewFinal,
-                baselineShadowView,
-                0};
+                /* .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);
 
+            PrintMutationInstruction(
+                "Setting up animation KeyFrame for UPDATE mutation (Update animation)",
+                mutation);
+
             keyFrame = AnimationKeyFrame{
-                better::optional<ShadowViewMutation>(mutation),
-                AnimationConfigurationType::Update,
-                tag,
-                parent,
-                viewStart,
-                viewFinal,
-                baselineShadowView,
-                0};
+                /* .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). We configure it as a Noop animation so it is
-            // executed when all the other animations are completed.
-            assert(mutation.type == ShadowViewMutation::Type::Remove);
+            // that is animated).
+            react_native_assert(
+                mutation.type == ShadowViewMutation::Type::Remove);
 
             Tag removeTag = mutation.oldChildShadowView.tag;
             auto correspondingInsertIt = std::find_if(
@@ -1101,16 +572,78 @@ LayoutAnimationKeyFrameManager::pullTransaction(
                       mutation.newChildShadowView.tag == removeTag;
                 });
             if (correspondingInsertIt == mutations.end()) {
-              PrintMutationInstruction("Queueing Delayed", mutation);
+              // 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(propsParserContext, viewFinal.props, {});
+
+                if (baselineShadowView.traits.check(
+                        ShadowNodeTraits::Trait::ViewKind)) {
+                  auto const &viewProps =
+                      *std::static_pointer_cast<ViewProps const>(props);
+                  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(propsParserContext, viewFinal.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);
+                }
+
+                react_native_assert(props != nullptr);
+                if (props != nullptr) {
+                  viewFinal.props = props;
+                }
+              }
+
+              PrintMutationInstruction(
+                  "Setting up animation KeyFrame for REMOVE mutation (Delete animation)",
+                  mutation);
+
               keyFrame = AnimationKeyFrame{
-                  better::optional<ShadowViewMutation>(mutation),
-                  AnimationConfigurationType::Noop,
-                  tag,
-                  parent,
-                  mutation.oldChildShadowView,
-                  mutation.oldChildShadowView,
-                  mutation.oldChildShadowView,
-                  0};
+                  /* .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",
@@ -1127,12 +660,26 @@ LayoutAnimationKeyFrameManager::pullTransaction(
 
             // 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;
-              assert(keyFrame.viewStart.tag != 0);
+              react_native_assert(keyFrame.viewStart.tag > 0);
               keyFrame.initialProgress = 0;
 
               // We're guaranteed that a tag only has one animation associated
@@ -1143,16 +690,22 @@ LayoutAnimationKeyFrameManager::pullTransaction(
             }
           }
 
-          assert(keyFrame.viewStart.tag != 0);
-          assert(keyFrame.viewEnd.tag != 0);
-          assert(keyFrame.viewPrev.tag != 0);
+#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) {
+        if (executeMutationImmediately.hasValue()) {
           PrintMutationInstruction(
-              "Queue Up Animation For Immediate Execution", mutation);
-          immediateMutations.push_back(mutation);
+              "Queue Up For Immediate Execution", *executeMutationImmediately);
+          immediateMutations.push_back(*executeMutationImmediately);
         }
       }
 
@@ -1172,11 +725,12 @@ LayoutAnimationKeyFrameManager::pullTransaction(
       {
         int idx = 0;
         for (const auto &keyframe : keyFramesToAnimate) {
-          if (keyframe.finalMutationForKeyFrame.has_value()) {
+          for (const auto &finalMutationForKeyFrame :
+               keyframe.finalMutationsForKeyFrame) {
             PrintMutationInstruction(
                 std::string("FINAL list: ") + std::to_string(idx) + "/" +
                     std::to_string(keyFramesToAnimate.size()),
-                *keyframe.finalMutationForKeyFrame);
+                finalMutationForKeyFrame);
           }
           idx++;
         }
@@ -1223,56 +777,26 @@ LayoutAnimationKeyFrameManager::pullTransaction(
           }
         }
 
-        if (keyFrame.finalMutationForKeyFrame.hasValue()) {
-          auto &finalMutation = *keyFrame.finalMutationForKeyFrame;
-          auto mutationInstruction = ShadowViewMutation{
-              finalMutation.type,
-              finalMutation.parentShadowView,
-              keyFrame.viewPrev,
-              finalMutation.newChildShadowView,
-              finalMutation.index};
-          PrintMutationInstruction(
-              "Queueing up final mutation instruction - update:",
-              mutationInstruction);
-          assert(mutationInstruction.oldChildShadowView.tag != 0);
-          assert(
-              mutationInstruction.newChildShadowView.tag != 0 ||
-              mutationInstruction.type == ShadowViewMutation::Delete ||
-              mutationInstruction.type == ShadowViewMutation::Remove);
-          finalConflictingMutations.push_back(mutationInstruction);
-        } 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.
-          auto mutatedShadowView = createInterpolatedShadowView(
-              1, keyFrame.viewStart, keyFrame.viewEnd);
-          auto generatedPenultimateMutation =
-              ShadowViewMutation::UpdateMutation(
-                  keyFrame.viewPrev, mutatedShadowView);
-          assert(generatedPenultimateMutation.oldChildShadowView.tag != 0);
-          assert(generatedPenultimateMutation.newChildShadowView.tag != 0);
-          PrintMutationInstruction(
-              "Queueing up penultimate mutation instruction - synthetic",
-              generatedPenultimateMutation);
-          finalConflictingMutations.push_back(generatedPenultimateMutation);
-
-          auto generatedMutation = ShadowViewMutation::UpdateMutation(
-              mutatedShadowView, keyFrame.viewEnd);
-          assert(generatedMutation.oldChildShadowView.tag != 0);
-          assert(generatedMutation.newChildShadowView.tag != 0);
-          PrintMutationInstruction(
-              "Queueing up final mutation instruction - synthetic",
-              generatedMutation);
-          finalConflictingMutations.push_back(generatedMutation);
+        // If the "final" mutation is already accounted for, by previously
+        // setting the correct "viewPrev" of the next conflicting animation, we
+        // don't want to queue up any final UPDATE mutations here.
+        bool shouldGenerateSyntheticMutations =
+            keyFrame.generateFinalSyntheticMutations;
+        auto numFinalMutations = keyFrame.finalMutationsForKeyFrame.size();
+        bool onlyMutationIsUpdate =
+            (numFinalMutations == 1 &&
+             keyFrame.finalMutationsForKeyFrame[0].type ==
+                 ShadowViewMutation::Update);
+        if (!shouldGenerateSyntheticMutations &&
+            (numFinalMutations == 0 || onlyMutationIsUpdate)) {
+          continue;
         }
+
+        queueFinalMutationsForCompletedKeyFrame(
+            keyFrame,
+            finalConflictingMutations,
+            true,
+            "KeyFrameManager: Finished Conflicting Keyframe");
       }
 
       // Make sure that all operations execute in the proper order, since
@@ -1294,8 +818,8 @@ LayoutAnimationKeyFrameManager::pullTransaction(
       // Knowledge Graph:
       // [ImmediateMutations] -> assumes [FinalConflicting], [FrameDelayed],
       // [Delayed] already executed [FrameDelayed] -> assumes
-      // [FinalConflicting], [Delayed] already executed [FinalConflicting] -> is
-      // adjusted based on [Delayed], no dependency on [FinalConflicting],
+      // [FinalConflicting], [Delayed] already executed [FinalConflicting] ->
+      // is adjusted based on [Delayed], no dependency on [FinalConflicting],
       // [FrameDelayed] [Delayed] -> assumes [FinalConflicting],
       // [ImmediateMutations] not executed yet
 
@@ -1303,8 +827,8 @@ LayoutAnimationKeyFrameManager::pullTransaction(
       // Knowledge Graph:
       // [ImmediateMutations] -> assumes [FinalConflicting], [FrameDelayed],
       // [Delayed] already executed [FrameDelayed] -> assumes
-      // [FinalConflicting], [Delayed] already executed [FinalConflicting] -> is
-      // adjusted based on [Delayed], no dependency on [FinalConflicting],
+      // [FinalConflicting], [Delayed] already executed [FinalConflicting] ->
+      // is adjusted based on [Delayed], no dependency on [FinalConflicting],
       // [FrameDelayed] [Delayed] -> adjusted for [FinalConflicting]; assumes
       // [ImmediateMutations] not executed yet
 #ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
@@ -1322,22 +846,21 @@ LayoutAnimationKeyFrameManager::pullTransaction(
       // [ImmediateExecutions] -> assumes [FinalConflicting], [Delayed],
       // [FrameDelayed] already executed [FrameDelayed] -> adjusted for
       // [Delayed]; assumes [FinalConflicting] already executed
-      // [FinalConflicting] -> is adjusted based on [Delayed], no dependency on
-      // [FinalConflicting], [FrameDelayed] [Delayed] -> adjusted for
+      // [FinalConflicting] -> is adjusted based on [Delayed], no dependency
+      // on [FinalConflicting], [FrameDelayed] [Delayed] -> adjusted for
       // [FinalConflicting]; assumes [ImmediateExecutions] not executed yet
 #ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
       LOG(ERROR) << "Adjust [FrameDelayed] based on [Delayed]";
 #endif
       for (auto &keyframe : inflightAnimations_.back().keyFrames) {
-        if (keyframe.finalMutationForKeyFrame.has_value()) {
-          auto &mutation = *keyframe.finalMutationForKeyFrame;
-          if (mutation.type == ShadowViewMutation::Type::Insert ||
-              mutation.type == ShadowViewMutation::Type::Remove) {
+        for (auto &finalMutation : keyframe.finalMutationsForKeyFrame) {
+          if (finalMutation.type == ShadowViewMutation::Type::Insert ||
+              finalMutation.type == ShadowViewMutation::Type::Remove) {
             // When adjusting, skip adjusting against last animation - because
             // all `mutation`s here come from the last animation, so we can't
             // adjust a batch against itself.
             adjustImmediateMutationIndicesForDelayedMutations(
-                surfaceId, mutation, true);
+                surfaceId, finalMutation, true);
           }
         }
       }
@@ -1345,21 +868,21 @@ LayoutAnimationKeyFrameManager::pullTransaction(
       // Adjust [ImmediateExecutions] based on [Delayed]
       // Knowledge Graph:
       // [ImmediateExecutions] -> adjusted for [FrameDelayed], [Delayed];
-      // assumes [FinalConflicting] already executed [FrameDelayed] -> adjusted
-      // for [Delayed]; assumes [FinalConflicting] already executed
-      // [FinalConflicting] -> is adjusted based on [Delayed], no dependency on
-      // [FinalConflicting], [FrameDelayed] [Delayed] -> adjusted for
+      // assumes [FinalConflicting] already executed [FrameDelayed] ->
+      // adjusted for [Delayed]; assumes [FinalConflicting] already executed
+      // [FinalConflicting] -> is adjusted based on [Delayed], no dependency
+      // on [FinalConflicting], [FrameDelayed] [Delayed] -> adjusted for
       // [FinalConflicting]; assumes [ImmediateExecutions] not executed yet
       //
       // THEN,
-      // Adjust [Delayed] based on [ImmediateExecutions] and [FinalConflicting]
-      // Knowledge Graph:
-      // [ImmediateExecutions] -> adjusted for [FrameDelayed], [Delayed];
-      // assumes [FinalConflicting] already executed [FrameDelayed] -> adjusted
-      // for [Delayed]; assumes [FinalConflicting] already executed
-      // [FinalConflicting] -> is adjusted based on [Delayed], no dependency on
-      // [FinalConflicting], [FrameDelayed] [Delayed] -> adjusted for
-      // [FinalConflicting], [ImmediateExecutions]
+      // Adjust [Delayed] based on [ImmediateExecutions] and
+      // [FinalConflicting] Knowledge Graph: [ImmediateExecutions] -> adjusted
+      // for [FrameDelayed], [Delayed]; assumes [FinalConflicting] already
+      // executed [FrameDelayed] -> adjusted for [Delayed]; assumes
+      // [FinalConflicting] already executed [FinalConflicting] -> is adjusted
+      // based on [Delayed], no dependency on [FinalConflicting],
+      // [FrameDelayed] [Delayed] -> adjusted for [FinalConflicting],
+      // [ImmediateExecutions]
       //
       // We do these in the same loop because each immediate execution is
       // impacted by each delayed mutation, and also can impact each delayed
@@ -1371,9 +894,9 @@ LayoutAnimationKeyFrameManager::pullTransaction(
       for (auto &mutation : immediateMutations) {
         // Note: when adjusting [ImmediateExecutions] based on [FrameDelayed],
         // we need only adjust Inserts. Since inserts are executed
-        // highest-index-first, lower indices being delayed does not impact the
-        // higher-index removals; and conversely, higher indices being delayed
-        // cannot impact lower index removal, regardless of order.
+        // highest-index-first, lower indices being delayed does not impact
+        // the higher-index removals; and conversely, higher indices being
+        // delayed cannot impact lower index removal, regardless of order.
         if (mutation.type == ShadowViewMutation::Type::Insert ||
             mutation.type == ShadowViewMutation::Type::Remove) {
           adjustImmediateMutationIndicesForDelayedMutations(
@@ -1387,76 +910,36 @@ LayoutAnimationKeyFrameManager::pullTransaction(
         }
       }
 
-      // If the knowledge graph progression above is correct, it is now safe to
-      // execute finalConflictingMutations and immediateMutations in that order,
-      // and to queue the delayed animations from this frame.
+      // If the knowledge graph progression above is correct, it is now safe
+      // to execute finalConflictingMutations and immediateMutations in that
+      // order, and to queue the delayed animations from this frame.
       //
       // Execute the conflicting, delayed operations immediately. Any UPDATE
       // operations that smoothly transition into another animation will be
       // overridden by generated UPDATE operations at the end of the list, and
       // we want any REMOVE or DELETE operations to execute immediately.
-      // Additionally, this should allow us to avoid performing index adjustment
-      // between this list of conflicting animations and the batch we're about
-      // to execute.
+      // Additionally, this should allow us to avoid performing index
+      // adjustment between this list of conflicting animations and the batch
+      // we're about to execute.
       finalConflictingMutations.insert(
           finalConflictingMutations.end(),
           immediateMutations.begin(),
           immediateMutations.end());
       mutations = finalConflictingMutations;
-    } /* if (currentAnimation) */ else {
+    } /* if (currentAnimation) */
+    else {
       // If there's no "next" animation, make sure we queue up "final"
       // operations from all ongoing, conflicting animations.
 #ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
-      LOG(ERROR) << "No Animation: Queue up final conflicting animations";
-#endif
-      ShadowViewMutationList finalMutationsForConflictingAnimations{};
-      for (auto const &keyFrame : conflictingAnimations) {
-        if (keyFrame.finalMutationForKeyFrame.hasValue()) {
-          auto &finalMutation = (*keyFrame.finalMutationForKeyFrame);
-          auto mutation = ShadowViewMutation{
-              finalMutation.type,
-              finalMutation.parentShadowView,
-              keyFrame.viewPrev,
-              finalMutation.newChildShadowView,
-              finalMutation.index};
-          PrintMutationInstruction(
-              "No Animation: Queueing up final conflicting mutation instruction",
-              mutation);
-          finalMutationsForConflictingAnimations.push_back(mutation);
-        } 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.
-          auto mutatedShadowView = createInterpolatedShadowView(
-              1, keyFrame.viewStart, keyFrame.viewEnd);
-          auto generatedPenultimateMutation =
-              ShadowViewMutation::UpdateMutation(
-                  keyFrame.viewPrev, mutatedShadowView);
-          assert(generatedPenultimateMutation.oldChildShadowView.tag != 0);
-          assert(generatedPenultimateMutation.newChildShadowView.tag != 0);
-          PrintMutationInstruction(
-              "No Animation: Queueing up penultimate mutation instruction - synthetic",
-              generatedPenultimateMutation);
-          finalMutationsForConflictingAnimations.push_back(
-              generatedPenultimateMutation);
-
-          auto generatedMutation = ShadowViewMutation::UpdateMutation(
-              mutatedShadowView, keyFrame.viewEnd);
-          assert(generatedMutation.oldChildShadowView.tag != 0);
-          assert(generatedMutation.newChildShadowView.tag != 0);
-          PrintMutationInstruction(
-              "No Animation: Queueing up final mutation instruction - synthetic",
-              generatedMutation);
-          finalMutationsForConflictingAnimations.push_back(generatedMutation);
-        }
+      LOG(ERROR) << "No Animation: Queue up final conflicting animations";
+#endif
+      ShadowViewMutationList finalMutationsForConflictingAnimations{};
+      for (auto const &keyFrame : conflictingAnimations) {
+        queueFinalMutationsForCompletedKeyFrame(
+            keyFrame,
+            finalMutationsForConflictingAnimations,
+            true,
+            "Conflict with non-animated mutation");
       }
 
       // Make sure that all operations execute in the proper order.
@@ -1477,10 +960,10 @@ LayoutAnimationKeyFrameManager::pullTransaction(
         }
       }
 
-      // 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.
+      // 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";
@@ -1524,186 +1007,673 @@ LayoutAnimationKeyFrameManager::pullTransaction(
     }
   }
 
-  mutations.insert(
-      mutations.end(),
-      mutationsForAnimation.begin(),
-      mutationsForAnimation.end());
+  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;
+
+      if (animatedKeyFrame.invalidated) {
+        continue;
+      }
+
+      // 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);
+      }
+    }
+
+    if (lastAnimationOnly) {
+      break;
+    }
+  }
+
+  // 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);
+
+  if (mutation.mutatedViewIsVirtual()) {
+    PrintMutationInstruction(
+        "[IndexAdjustment] Not calling adjustDelayedMutationIndicesForMutation, is virtual, for:",
+        mutation);
+    return;
+  }
+
+  // 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;
       }
-      if (keyframe.finalMutationForKeyFrame &&
-          !mutatedViewIsVirtual(*keyframe.finalMutationForKeyFrame)) {
-        std::string msg = "Animation " + std::to_string(i) + " keyframe " +
-            std::to_string(j) + ": Final Animation";
-        PrintMutationInstruction(msg, *keyframe.finalMutationForKeyFrame);
-      } else {
-        LOG(ERROR) << "Animation " << i << " keyframe " << j << ": on tag: ["
-                   << keyframe.viewStart.tag << "]";
+
+      // 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;
       }
-    }
-  }
-  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 &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);
+      }
     }
   }
 
-  return MountingTransaction{
-      surfaceId, transactionNumber, std::move(mutations), telemetry};
+  // 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());
+  }
 }
 
-bool LayoutAnimationKeyFrameManager::mutatedViewIsVirtual(
-    ShadowViewMutation const &mutation) const {
-  bool viewIsVirtual = false;
-
-  // TODO: extract this into an Android platform-specific class?
-  // Explanation: for "Insert" mutations, oldChildShadowView is always empty.
-  //              for "Remove" mutations, newChildShadowView is always empty.
-#ifdef ANDROID
-  viewIsVirtual =
-      mutation.newChildShadowView.layoutMetrics == EmptyLayoutMetrics &&
-      mutation.oldChildShadowView.layoutMetrics == EmptyLayoutMetrics;
-#endif
-  return viewIsVirtual;
-}
+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;
 
-bool LayoutAnimationKeyFrameManager::hasComponentDescriptorForShadowView(
-    ShadowView const &shadowView) const {
-  return componentDescriptorRegistry_->hasComponentDescriptorAt(
-      shadowView.componentHandle);
-}
+    for (auto &inflightAnimation : inflightAnimations_) {
+      if (inflightAnimation.surfaceId != surfaceId) {
+        continue;
+      }
+      if (inflightAnimation.completed) {
+        continue;
+      }
 
-ComponentDescriptor const &
-LayoutAnimationKeyFrameManager::getComponentDescriptorForShadowView(
-    ShadowView const &shadowView) const {
-  return componentDescriptorRegistry_->at(shadowView.componentHandle);
-}
+      for (auto it = inflightAnimation.keyFrames.begin();
+           it != inflightAnimation.keyFrames.end();) {
+        auto &animatedKeyFrame = *it;
 
-void LayoutAnimationKeyFrameManager::setComponentDescriptorRegistry(
-    const SharedComponentDescriptorRegistry &componentDescriptorRegistry) {
-  componentDescriptorRegistry_ = componentDescriptorRegistry;
-}
+        if (animatedKeyFrame.invalidated) {
+          continue;
+        }
 
-/**
- * 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 {
-  if (!hasComponentDescriptorForShadowView(startingView)) {
-    return finalView;
-  }
-  ComponentDescriptor const &componentDescriptor =
-      getComponentDescriptorForShadowView(startingView);
+        // 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);
 
-  // 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);
+        // 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;
 
-  if (startingView.props == nullptr || finalView.props == nullptr) {
-    return finalView;
-  }
+          // 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();
 
-  // Animate opacity or scale/transform
-  mutatedShadowView.props = componentDescriptor.interpolateProps(
-      progress, startingView.props, finalView.props);
+#ifdef LAYOUT_ANIMATION_VERBOSE_LOGGING
+            PrintMutationInstructionRelative(
+                "Found mutation that conflicts with existing in-flight animation:",
+                mutation,
+                finalMutationForKeyFrame);
+#endif
+          }
 
-  // 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;
+          conflictingAnimations.push_back(animatedKeyFrame);
+          for (const auto &finalMutationForKeyFrame :
+               animatedKeyFrame.finalMutationsForKeyFrame) {
+            if (!isVirtual ||
+                finalMutationForKeyFrame.type ==
+                    ShadowViewMutation::Type::Delete) {
+              localConflictingMutations.push_back(finalMutationForKeyFrame);
+            }
+          }
 
-  return mutatedShadowView;
-}
+          // Delete from existing animation
+          it = inflightAnimation.keyFrames.erase(it);
+        } else {
+          it++;
+        }
+      }
+    }
+  }
 
-void LayoutAnimationKeyFrameManager::callCallback(
-    const LayoutAnimationCallbackWrapper &callback) const {
-  if (callback.readyForCleanup()) {
-    return;
+  // Recurse, in case conflicting mutations conflict with other existing
+  // animations
+  if (!localConflictingMutations.empty()) {
+    getAndEraseConflictingAnimations(
+        surfaceId, localConflictingMutations, conflictingAnimations);
   }
+}
 
-  // 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));
+void LayoutAnimationKeyFrameManager::deleteAnimationsForStoppedSurfaces()
+    const {
+  bool inflightAnimationsExistInitially = !inflightAnimations_.empty();
 
-  // Call the callback that is being retained in the vector
-  copiedCallback->call(runtimeExecutor_);
+  // Execute stopSurface on any ongoing animations
+  if (inflightAnimationsExistInitially) {
+    better::set<SurfaceId> surfaceIdsToStop{};
+    {
+      std::lock_guard<std::mutex> lock(surfaceIdsToStopMutex_);
+      surfaceIdsToStop = surfaceIdsToStop_;
+      surfaceIdsToStop_.clear();
+    }
 
-  // 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_);
+    for (auto it = inflightAnimations_.begin();
+         it != inflightAnimations_.end();) {
+      const auto &animation = *it;
 
-    // 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());
+#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++;
+      }
+    }
+  }
+}
 
-    // 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));
+void LayoutAnimationKeyFrameManager::simulateImagePropsMemoryAccess(
+    ShadowViewMutationList const &mutations) const {
+  if (!simulateImagePropsMemoryAccess_) {
+    return;
+  }
+  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;
+    }
   }
 }