react-native-tvos 0.64.2-2 → 0.66.3-0

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

@@ -10,13 +10,16 @@
 #include <algorithm>
 #include <chrono>
 
+#include <react/debug/flags.h>
+#include <react/debug/react_native_assert.h>
+
 #include <react/renderer/componentregistry/ComponentDescriptorFactory.h>
-#include <react/renderer/components/root/RootShadowNode.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>
@@ -57,8 +60,19 @@ 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,
@@ -73,22 +87,22 @@ void PrintMutationInstructionRelative(
 
 static better::optional<AnimationType> parseAnimationType(std::string param) {
   if (param == "spring") {
-    return better::optional<AnimationType>(AnimationType::Spring);
+    return AnimationType::Spring;
   }
   if (param == "linear") {
-    return better::optional<AnimationType>(AnimationType::Linear);
+    return AnimationType::Linear;
   }
   if (param == "easeInEaseOut") {
-    return better::optional<AnimationType>(AnimationType::EaseInEaseOut);
+    return AnimationType::EaseInEaseOut;
   }
   if (param == "easeIn") {
-    return better::optional<AnimationType>(AnimationType::EaseIn);
+    return AnimationType::EaseIn;
   }
   if (param == "easeOut") {
-    return better::optional<AnimationType>(AnimationType::EaseOut);
+    return AnimationType::EaseOut;
   }
   if (param == "keyboard") {
-    return better::optional<AnimationType>(AnimationType::Keyboard);
+    return AnimationType::Keyboard;
   }
 
   LOG(ERROR) << "Error parsing animation type: " << param;
@@ -98,16 +112,16 @@ static better::optional<AnimationType> parseAnimationType(std::string param) {
 static better::optional<AnimationProperty> parseAnimationProperty(
     std::string param) {
   if (param == "opacity") {
-    return better::optional<AnimationProperty>(AnimationProperty::Opacity);
+    return AnimationProperty::Opacity;
   }
   if (param == "scaleX") {
-    return better::optional<AnimationProperty>(AnimationProperty::ScaleX);
+    return AnimationProperty::ScaleX;
   }
   if (param == "scaleY") {
-    return better::optional<AnimationProperty>(AnimationProperty::ScaleY);
+    return AnimationProperty::ScaleY;
   }
   if (param == "scaleXY") {
-    return better::optional<AnimationProperty>(AnimationProperty::ScaleXY);
+    return AnimationProperty::ScaleXY;
   }
 
   LOG(ERROR) << "Error parsing animation property: " << param;
@@ -119,13 +133,13 @@ static better::optional<AnimationConfig> parseAnimationConfig(
     double defaultDuration,
     bool parsePropertyType) {
   if (config.empty() || !config.isObject()) {
-    return better::optional<AnimationConfig>(
-        AnimationConfig{AnimationType::Linear,
-                        AnimationProperty::NotApplicable,
-                        defaultDuration,
-                        0,
-                        0,
-                        0});
+    return AnimationConfig{
+        AnimationType::Linear,
+        AnimationProperty::NotApplicable,
+        defaultDuration,
+        0,
+        0,
+        0};
   }
 
   auto const typeIt = config.find("type");
@@ -220,12 +234,13 @@ static better::optional<AnimationConfig> parseAnimationConfig(
     }
   }
 
-  return better::optional<AnimationConfig>(AnimationConfig{*animationType,
-                                                           animationProperty,
-                                                           duration,
-                                                           delay,
-                                                           springDamping,
-                                                           initialVelocity});
+  return better::optional<AnimationConfig>(AnimationConfig{
+      *animationType,
+      animationProperty,
+      duration,
+      delay,
+      springDamping,
+      initialVelocity});
 }
 
 // Parse animation config from JS
@@ -292,14 +307,14 @@ void LayoutAnimationKeyFrameManager::uiManagerDidConfigureNextLayoutAnimation(
   if (layoutAnimationConfig) {
     std::lock_guard<std::mutex> lock(currentAnimationMutex_);
 
-    currentAnimation_ = better::optional<LayoutAnimation>{
-        LayoutAnimation{-1,
-                        0,
-                        false,
-                        *layoutAnimationConfig,
-                        successCallback,
-                        failureCallback,
-                        {}}};
+    uiManagerDidConfigureNextLayoutAnimation(LayoutAnimation{
+        -1,
+        0,
+        false,
+        *layoutAnimationConfig,
+        successCallback,
+        failureCallback,
+        {}});
   } else {
     LOG(ERROR) << "Parsing LayoutAnimationConfig failed: "
                << (folly::dynamic)config;
@@ -308,6 +323,11 @@ void LayoutAnimationKeyFrameManager::uiManagerDidConfigureNextLayoutAnimation(
   }
 }
 
+void LayoutAnimationKeyFrameManager::uiManagerDidConfigureNextLayoutAnimation(
+    LayoutAnimation layoutAnimation) const {
+  currentAnimation_ = better::optional<LayoutAnimation>{layoutAnimation};
+}
+
 void LayoutAnimationKeyFrameManager::setLayoutAnimationStatusDelegate(
     LayoutAnimationStatusDelegate *delegate) const {
   std::lock_guard<std::mutex> lock(layoutAnimationStatusDelegateMutex_);
@@ -324,9 +344,7 @@ void LayoutAnimationKeyFrameManager::stopSurface(SurfaceId surfaceId) {
 }
 
 bool LayoutAnimationKeyFrameManager::shouldAnimateFrame() const {
-  // There is potentially a race here between getting and setting
-  // `currentMutation_`. We don't want to lock around this because then we're
-  // creating contention between pullTransaction and the JS thread.
+  std::lock_guard<std::mutex> lock(currentAnimationMutex_);
   return currentAnimation_ || !inflightAnimations_.empty();
 }
 
@@ -375,8 +393,9 @@ LayoutAnimationKeyFrameManager::calculateAnimationProgress(
   } 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};
+    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
@@ -400,10 +419,11 @@ void LayoutAnimationKeyFrameManager::
         bool skipLastAnimation,
         bool lastAnimationOnly) const {
   bool isRemoveMutation = mutation.type == ShadowViewMutation::Type::Remove;
-  assert(isRemoveMutation || mutation.type == ShadowViewMutation::Type::Insert);
+  react_native_assert(
+      isRemoveMutation || mutation.type == ShadowViewMutation::Type::Insert);
 
   // TODO: turn all of this into a lambda and share code?
-  if (mutatedViewIsVirtual(mutation)) {
+  if (mutation.mutatedViewIsVirtual()) {
     PrintMutationInstruction(
         "[IndexAdjustment] Not calling adjustImmediateMutationIndicesForDelayedMutations, is virtual, for:",
         mutation);
@@ -440,34 +460,30 @@ void LayoutAnimationKeyFrameManager::
       }
 
       // Detect if they're in the same view hierarchy, but not equivalent
-      // (We've already detected direct conflicts and handled them above)
+      // We've already detected direct conflicts and removed them.
       if (animatedKeyFrame.parentView.tag != mutation.parentShadowView.tag) {
         continue;
       }
 
-      if (!animatedKeyFrame.finalMutationForKeyFrame.has_value()) {
-        continue;
-      }
-
-      auto &delayedMutation = *animatedKeyFrame.finalMutationForKeyFrame;
+      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;
+        }
 
-      if (delayedMutation.type != ShadowViewMutation::Type::Remove) {
-        continue;
-      }
-      if (mutatedViewIsVirtual(delayedMutation)) {
-        continue;
+        PrintMutationInstructionRelative(
+            "[IndexAdjustment] adjustImmediateMutationIndicesForDelayedMutations CANDIDATE for:",
+            mutation,
+            delayedMutation);
+        candidateMutations.push_back(&delayedMutation);
       }
-      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) {
@@ -486,7 +502,8 @@ void LayoutAnimationKeyFrameManager::
         std::remove_if(
             candidateMutations.begin(),
             candidateMutations.end(),
-            [&](ShadowViewMutation *candidateMutation) {
+            [&changed, &mutation, &adjustedDelta, &isRemoveMutation](
+                ShadowViewMutation *candidateMutation) {
               bool indexConflicts =
                   (candidateMutation->index < mutation.index ||
                    (isRemoveMutation &&
@@ -513,9 +530,11 @@ void LayoutAnimationKeyFrameManager::adjustDelayedMutationIndicesForMutation(
     bool skipLastAnimation) const {
   bool isRemoveMutation = mutation.type == ShadowViewMutation::Type::Remove;
   bool isInsertMutation = mutation.type == ShadowViewMutation::Type::Insert;
-  assert(isRemoveMutation || isInsertMutation);
+  auto tag = isRemoveMutation ? mutation.oldChildShadowView.tag
+                              : mutation.newChildShadowView.tag;
+  react_native_assert(isRemoveMutation || isInsertMutation);
 
-  if (mutatedViewIsVirtual(mutation)) {
+  if (mutation.mutatedViewIsVirtual()) {
     PrintMutationInstruction(
         "[IndexAdjustment] Not calling adjustDelayedMutationIndicesForMutation, is virtual, for:",
         mutation);
@@ -554,31 +573,25 @@ void LayoutAnimationKeyFrameManager::adjustDelayedMutationIndicesForMutation(
         continue;
       }
 
-      if (!animatedKeyFrame.finalMutationForKeyFrame.has_value()) {
-        continue;
-      }
-      ShadowViewMutation &finalAnimationMutation =
-          *animatedKeyFrame.finalMutationForKeyFrame;
+      for (auto &finalAnimationMutation :
+           animatedKeyFrame.finalMutationsForKeyFrame) {
+        if (finalAnimationMutation.oldChildShadowView.tag == tag) {
+          continue;
+        }
 
-      if (finalAnimationMutation.oldChildShadowView.tag ==
-          (isRemoveMutation ? mutation.oldChildShadowView.tag
-                            : mutation.newChildShadowView.tag)) {
-        continue;
-      }
+        if (finalAnimationMutation.type != ShadowViewMutation::Type::Remove) {
+          continue;
+        }
+        if (finalAnimationMutation.mutatedViewIsVirtual()) {
+          continue;
+        }
 
-      if (finalAnimationMutation.type != ShadowViewMutation::Type::Remove) {
-        continue;
-      }
-      if (mutatedViewIsVirtual(*animatedKeyFrame.finalMutationForKeyFrame)) {
-        continue;
+        PrintMutationInstructionRelative(
+            "[IndexAdjustment] adjustDelayedMutationIndicesForMutation: CANDIDATE:",
+            mutation,
+            finalAnimationMutation);
+        candidateMutations.push_back(&finalAnimationMutation);
       }
-
-      PrintMutationInstructionRelative(
-          "[IndexAdjustment] adjustDelayedMutationIndicesForMutation: CANDIDATE:",
-          mutation,
-          *animatedKeyFrame.finalMutationForKeyFrame);
-      candidateMutations.push_back(
-          animatedKeyFrame.finalMutationForKeyFrame.get_pointer());
     }
   }
 
@@ -628,25 +641,21 @@ void LayoutAnimationKeyFrameManager::adjustDelayedMutationIndicesForMutation(
   }
 }
 
-std::vector<std::tuple<AnimationKeyFrame, AnimationConfig, LayoutAnimation *>>
-LayoutAnimationKeyFrameManager::getAndEraseConflictingAnimations(
+void LayoutAnimationKeyFrameManager::getAndEraseConflictingAnimations(
     SurfaceId surfaceId,
-    ShadowViewMutationList &mutations,
-    bool deletesOnly) const {
-  std::vector<std::tuple<AnimationKeyFrame, AnimationConfig, LayoutAnimation *>>
-      conflictingAnimations{};
-
-  for (auto &mutation : mutations) {
-    if (deletesOnly && mutation.type != ShadowViewMutation::Type::Delete) {
-      continue;
-    }
-    PrintMutationInstruction("getAndEraseConflictingAnimations of: ", mutation);
-
+    ShadowViewMutationList const &mutations,
+    std::vector<AnimationKeyFrame> &conflictingAnimations) const {
+  ShadowViewMutationList localConflictingMutations{};
+  for (auto const &mutation : mutations) {
+    bool mutationIsCreateOrDelete =
+        mutation.type == ShadowViewMutation::Type::Create ||
+        mutation.type == ShadowViewMutation::Type::Delete;
     auto const &baselineShadowView =
         (mutation.type == ShadowViewMutation::Type::Insert ||
          mutation.type == ShadowViewMutation::Type::Create)
         ? mutation.newChildShadowView
         : mutation.oldChildShadowView;
+    auto baselineTag = baselineShadowView.tag;
 
     for (auto &inflightAnimation : inflightAnimations_) {
       if (inflightAnimation.surfaceId != surfaceId) {
@@ -664,53 +673,53 @@ LayoutAnimationKeyFrameManager::getAndEraseConflictingAnimations(
           continue;
         }
 
-        bool conflicting = animatedKeyFrame.tag == baselineShadowView.tag ||
-            ((mutation.type == ShadowViewMutation::Type::Delete ||
-              mutation.type == ShadowViewMutation::Type::Create) &&
-             animatedKeyFrame.parentView.tag == baselineShadowView.tag) /* ||
-             finalMutationTag == baselineShadowView.tag*/
-            ;
+        // A conflict is when either: the animated node itself is mutated
+        // directly; or, the parent of the node is created or deleted. In cases
+        // of reparenting - say, the parent is deleted but the node was moved to
+        // a different parent first - the reparenting (remove/insert) conflict
+        // will be detected before we process the parent DELETE.
+        // Parent deletion is important because deleting a parent recursively
+        // deletes all children. If we previously deferred deletion of a child,
+        // we need to force deletion/removal to happen immediately.
+        bool conflicting = animatedKeyFrame.tag == baselineTag ||
+            (mutationIsCreateOrDelete &&
+             animatedKeyFrame.parentView.tag == baselineTag &&
+             animatedKeyFrame.parentView.tag != 0);
 
         // Conflicting animation detected: if we're mutating a tag under
         // animation, or deleting the parent of a tag under animation, or
         // reparenting.
         if (conflicting) {
-          auto const layoutAnimationConfig =
-              inflightAnimation.layoutAnimationConfig;
-
-          auto const mutationConfig =
-              (animatedKeyFrame.type == AnimationConfigurationType::Delete
-                   ? layoutAnimationConfig.deleteConfig
-                   : (animatedKeyFrame.type ==
-                              AnimationConfigurationType::Create
-                          ? layoutAnimationConfig.createConfig
-                          : layoutAnimationConfig.updateConfig));
-
           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(std::make_tuple(
-                animatedKeyFrame, *mutationConfig, &inflightAnimation));
-          }
+          // TODO: don't animate virtual views in the first place?
+          bool isVirtual = false;
+          for (const auto &finalMutationForKeyFrame :
+               animatedKeyFrame.finalMutationsForKeyFrame) {
+            isVirtual =
+                isVirtual || finalMutationForKeyFrame.mutatedViewIsVirtual();
 
 #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);
-          }
+                finalMutationForKeyFrame);
 #endif
+          }
+
+          conflictingAnimations.push_back(animatedKeyFrame);
+          for (const auto &finalMutationForKeyFrame :
+               animatedKeyFrame.finalMutationsForKeyFrame) {
+            if (!isVirtual ||
+                finalMutationForKeyFrame.type ==
+                    ShadowViewMutation::Type::Delete) {
+              localConflictingMutations.push_back(finalMutationForKeyFrame);
+            }
+          }
 
           // Delete from existing animation
           it = inflightAnimation.keyFrames.erase(it);
@@ -721,7 +730,17 @@ LayoutAnimationKeyFrameManager::getAndEraseConflictingAnimations(
     }
   }
 
-  return conflictingAnimations;
+  // Recurse, in case conflicting mutations conflict with other existing
+  // animations
+  if (!localConflictingMutations.empty()) {
+    getAndEraseConflictingAnimations(
+        surfaceId, localConflictingMutations, conflictingAnimations);
+  }
+}
+
+void LayoutAnimationKeyFrameManager::setClockNow(
+    std::function<uint64_t()> now) {
+  now_ = now;
 }
 
 better::optional<MountingTransaction>
@@ -731,10 +750,7 @@ LayoutAnimationKeyFrameManager::pullTransaction(
     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();
+  uint64_t now = now_();
 
   bool inflightAnimationsExistInitially = !inflightAnimations_.empty();
 
@@ -785,7 +801,7 @@ LayoutAnimationKeyFrameManager::pullTransaction(
     LOG(ERROR) << "BEGINNING DISPLAYING ONGOING inflightAnimations_!";
     int i = 0;
     int j = 0;
-    for (auto &inflightAnimation : inflightAnimations_) {
+    for (auto const &inflightAnimation : inflightAnimations_) {
       i++;
       j = 0;
       if (inflightAnimation.completed) {
@@ -796,20 +812,31 @@ LayoutAnimationKeyFrameManager::pullTransaction(
         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 << "]";
+        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
 
+    // Stub PropsParserContext used for cloneProps.
+    // This is/should be safe because cloning doesn't actually need to
+    // parse props, and just copies them; therefore there should be no
+    // need to actually use anything in the PropsParserContext.
+    // If this ever changes, the LayoutAnimations API will need to change
+    // to pass in a real PropsParserContext.
+    ContextContainer contextContainer{};
+    PropsParserContext propsParserContext{surfaceId, contextContainer};
+
     // 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
@@ -823,10 +850,9 @@ LayoutAnimationKeyFrameManager::pullTransaction(
     // 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<
-        std::tuple<AnimationKeyFrame, AnimationConfig, LayoutAnimation *>>
-        conflictingAnimations =
-            getAndEraseConflictingAnimations(surfaceId, mutations);
+    std::vector<AnimationKeyFrame> conflictingAnimations{};
+    getAndEraseConflictingAnimations(
+        surfaceId, mutations, conflictingAnimations);
 
     // Are we animating this list of mutations?
     better::optional<LayoutAnimation> currentAnimation{};
@@ -885,23 +911,25 @@ LayoutAnimationKeyFrameManager::pullTransaction(
       std::vector<AnimationKeyFrame> keyFramesToAnimate;
       std::vector<AnimationKeyFrame> movesToAnimate;
       auto const layoutAnimationConfig = animation.layoutAnimationConfig;
-      for (auto &mutation : mutations) {
+      for (auto const &mutation : mutations) {
         ShadowView baselineShadowView =
             (mutation.type == ShadowViewMutation::Type::Delete ||
-                     mutation.type == ShadowViewMutation::Type::Remove
+                     mutation.type == ShadowViewMutation::Type::Remove ||
+                     mutation.type == ShadowViewMutation::Type::Update
                  ? mutation.oldChildShadowView
                  : mutation.newChildShadowView);
+        react_native_assert(baselineShadowView.tag > 0);
         bool haveComponentDescriptor =
             hasComponentDescriptorForShadowView(baselineShadowView);
 
-        bool executeMutationImmediately = false;
+        // Immediately execute any mutations on a root node
+        if (baselineShadowView.traits.check(
+                ShadowNodeTraits::Trait::RootNodeKind)) {
+          immediateMutations.push_back(mutation);
+          continue;
+        }
 
-        auto mutationConfig =
-            (mutation.type == ShadowViewMutation::Type::Delete
-                 ? layoutAnimationConfig.deleteConfig
-                 : (mutation.type == ShadowViewMutation::Type::Insert
-                        ? layoutAnimationConfig.createConfig
-                        : layoutAnimationConfig.updateConfig));
+        better::optional<ShadowViewMutation> executeMutationImmediately{};
 
         bool isRemoveReinserted =
             mutation.type == ShadowViewMutation::Type::Remove &&
@@ -927,7 +955,7 @@ LayoutAnimationKeyFrameManager::pullTransaction(
         // Inserts that follow a "remove" of the same tag should be treated as
         // an update (move) animation.
         bool wasInsertedTagRemoved = false;
-        bool haveConfiguration = mutationConfig.has_value();
+        auto movedIt = movedTags.end();
         if (mutation.type == ShadowViewMutation::Type::Insert) {
           // If this is a move, we actually don't want to copy this insert
           // instruction to animated instructions - we want to
@@ -935,22 +963,30 @@ LayoutAnimationKeyFrameManager::pullTransaction(
           // the layout.
           // The corresponding Remove and Insert instructions will instead
           // be treated as "immediate" instructions.
-          auto movedIt = movedTags.find(mutation.newChildShadowView.tag);
+          movedIt = movedTags.find(mutation.newChildShadowView.tag);
           wasInsertedTagRemoved = movedIt != movedTags.end();
-          if (wasInsertedTagRemoved) {
-            mutationConfig = layoutAnimationConfig.updateConfig;
-          }
-          haveConfiguration = mutationConfig.has_value();
-
-          if (wasInsertedTagRemoved && haveConfiguration) {
-            movesToAnimate.push_back(
-                AnimationKeyFrame{{},
-                                  AnimationConfigurationType::Update,
-                                  mutation.newChildShadowView.tag,
-                                  mutation.parentShadowView,
-                                  movedIt->second.oldChildShadowView,
-                                  mutation.newChildShadowView});
-          }
+        }
+
+        auto const &mutationConfig =
+            (mutation.type == ShadowViewMutation::Type::Delete ||
+                     (mutation.type == ShadowViewMutation::Type::Remove &&
+                      !wasInsertedTagRemoved)
+                 ? layoutAnimationConfig.deleteConfig
+                 : (mutation.type == ShadowViewMutation::Type::Insert &&
+                            !wasInsertedTagRemoved
+                        ? layoutAnimationConfig.createConfig
+                        : layoutAnimationConfig.updateConfig));
+        bool haveConfiguration =
+            mutationConfig.animationType != AnimationType::None;
+
+        if (wasInsertedTagRemoved && haveConfiguration) {
+          movesToAnimate.push_back(AnimationKeyFrame{
+              {},
+              AnimationConfigurationType::Update,
+              mutation.newChildShadowView.tag,
+              mutation.parentShadowView,
+              movedIt->second.oldChildShadowView,
+              mutation.newChildShadowView});
         }
 
         // Creates and inserts should also be executed immediately.
@@ -959,7 +995,72 @@ LayoutAnimationKeyFrameManager::pullTransaction(
         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:
+          // UPDATE X
+          // REMOVE X
+          // INSERT X
+          // In these cases, we will have queued up an animation for the UPDATE
+          // and delayed its execution; the REMOVE and INSERT will be executed
+          // first; and then the UPDATE will be animating to/from ShadowViews
+          // that are out-of-sync with what's on the mounting layer. Thus, for
+          // any UPDATE animations already queued up for this tag, we adjust the
+          // "previous" ShadowView.
+          if (mutation.type == ShadowViewMutation::Type::Insert) {
+            for (auto &keyframe : keyFramesToAnimate) {
+              if (keyframe.tag == baselineShadowView.tag) {
+                // If there's already an animation queued up, followed by this
+                // Insert, it *must* be an Update mutation animation. Other
+                // sequences should not be possible.
+                react_native_assert(
+                    keyframe.type == AnimationConfigurationType::Update);
+
+                // The mutation is an "insert", so it must have a
+                // "newChildShadowView"
+                react_native_assert(mutation.newChildShadowView.tag > 0);
+
+                // Those asserts don't run in prod. If there's some edge-case
+                // that we haven't caught yet, we'd crash in debug; make sure we
+                // don't mutate the prevView in prod.
+                if (keyframe.type == AnimationConfigurationType::Update &&
+                    mutation.newChildShadowView.tag > 0) {
+                  keyframe.viewPrev = mutation.newChildShadowView;
+                }
+              }
+            }
+          } 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{
+                      mutation.type,
+                      mutation.parentShadowView,
+                      keyframe.viewPrev,
+                      {},
+                      mutation.index};
+                }
+              }
+            }
+          }
         }
 
         // Deletes, non-move inserts, updates get animated
@@ -970,112 +1071,126 @@ 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{};
           if (mutation.type == ShadowViewMutation::Type::Insert) {
-            if (mutationConfig->animationProperty ==
+            if (mutationConfig.animationProperty ==
                     AnimationProperty::Opacity &&
                 haveComponentDescriptor) {
               auto props =
                   getComponentDescriptorForShadowView(baselineShadowView)
-                      .cloneProps(viewStart.props, {});
+                      .cloneProps(propsParserContext, viewStart.props, {});
+
+              // Dynamic cast, because - we don't know the type of this
+              // ShadowNode, it could be Image or Text or something else with
+              // different base props.
               const auto viewProps =
                   dynamic_cast<const ViewProps *>(props.get());
               if (viewProps != nullptr) {
                 const_cast<ViewProps *>(viewProps)->opacity = 0;
               }
-              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);
-              }
-              viewStart.props = props;
-            }
 
-            keyFrame = AnimationKeyFrame{{},
-                                         AnimationConfigurationType::Create,
-                                         tag,
-                                         parent,
-                                         viewStart,
-                                         viewFinal,
-                                         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 ||
-                mutationConfig->animationProperty == AnimationProperty::ScaleXY;
-            bool isScaleY = mutationConfig->animationProperty ==
-                    AnimationProperty::ScaleY ||
-                mutationConfig->animationProperty == AnimationProperty::ScaleXY;
+            bool isScaleX =
+                mutationConfig.animationProperty == AnimationProperty::ScaleX ||
+                mutationConfig.animationProperty == AnimationProperty::ScaleXY;
+            bool isScaleY =
+                mutationConfig.animationProperty == AnimationProperty::ScaleY ||
+                mutationConfig.animationProperty == AnimationProperty::ScaleXY;
             if ((isScaleX || isScaleY) && haveComponentDescriptor) {
               auto props =
                   getComponentDescriptorForShadowView(baselineShadowView)
-                      .cloneProps(viewFinal.props, {});
+                      .cloneProps(propsParserContext, viewStart.props, {});
+
+              // Dynamic cast, because - we don't know the type of this
+              // ShadowNode, it could be Image or Text or something else with
+              // different base props.
               const auto viewProps =
                   dynamic_cast<const ViewProps *>(props.get());
               if (viewProps != nullptr) {
                 const_cast<ViewProps *>(viewProps)->transform =
                     Transform::Scale(isScaleX ? 0 : 1, isScaleY ? 0 : 1, 1);
               }
-              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,
+                {},
+                AnimationConfigurationType::Create,
                 tag,
                 parent,
                 viewStart,
                 viewFinal,
+                baselineShadowView,
                 0};
+          } else if (mutation.type == ShadowViewMutation::Type::Delete) {
+// This is just for assertion purposes.
+// The NDEBUG check here is to satisfy the compiler in certain environments
+// complaining about correspondingRemoveIt being unused.
+#ifdef REACT_NATIVE_DEBUG
+#ifndef NDEBUG
+// This block is temporarily disabled to fix some internal builds.
+// In some build configurations, we get a compiler error that
+// `correspondingRemoveIt` is unused.
+/*            Tag deleteTag = mutation.oldChildShadowView.tag;
+            auto correspondingRemoveIt = std::find_if(
+                mutations.begin(),
+                mutations.end(),
+                [&deleteTag](auto &mutation) {
+                  return mutation.type == ShadowViewMutation::Type::Remove &&
+                      mutation.oldChildShadowView.tag == deleteTag;
+                });
+            react_native_assert(correspondingRemoveIt != mutations.end());
+*/
+#endif
+#endif
+            continue;
           } else if (mutation.type == ShadowViewMutation::Type::Update) {
             viewFinal = ShadowView(mutation.newChildShadowView);
 
+            PrintMutationInstruction(
+                "Setting up animation KeyFrame for UPDATE mutation (Update animation)",
+                mutation);
+
             keyFrame = AnimationKeyFrame{
-                better::optional<ShadowViewMutation>(mutation),
+                {mutation},
                 AnimationConfigurationType::Update,
                 tag,
                 parent,
                 viewStart,
                 viewFinal,
+                baselineShadowView,
                 0};
           } else {
             // This should just be "Remove" instructions that are not animated
             // (either this is a "move", or there's a corresponding "Delete"
-            // that is animated). 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(
@@ -1086,14 +1201,81 @@ 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, {});
+
+                // Dynamic cast, because - we don't know the type of this
+                // ShadowNode, it could be Image or Text or something else with
+                // different base props.
+                const auto viewProps =
+                    dynamic_cast<const ViewProps *>(props.get());
+                if (viewProps != nullptr) {
+                  const_cast<ViewProps *>(viewProps)->opacity = 0;
+                }
+
+                react_native_assert(props != nullptr);
+                if (props != nullptr) {
+                  viewFinal.props = props;
+                }
+              }
+              bool isScaleX = mutationConfig.animationProperty ==
+                      AnimationProperty::ScaleX ||
+                  mutationConfig.animationProperty ==
+                      AnimationProperty::ScaleXY;
+              bool isScaleY = mutationConfig.animationProperty ==
+                      AnimationProperty::ScaleY ||
+                  mutationConfig.animationProperty ==
+                      AnimationProperty::ScaleXY;
+              if ((isScaleX || isScaleY) && haveComponentDescriptor) {
+                auto props =
+                    getComponentDescriptorForShadowView(baselineShadowView)
+                        .cloneProps(propsParserContext, viewFinal.props, {});
+
+                // Dynamic cast, because - we don't know the type of this
+                // ShadowNode, it could be Image or Text or something else with
+                // different base props.
+                const auto viewProps =
+                    dynamic_cast<const ViewProps *>(props.get());
+                if (viewProps != nullptr) {
+                  const_cast<ViewProps *>(viewProps)->transform =
+                      Transform::Scale(isScaleX ? 0 : 1, isScaleY ? 0 : 1, 1);
+                }
+
+                react_native_assert(props != nullptr);
+                if (props != nullptr) {
+                  viewFinal.props = props;
+                }
+              }
+
+              PrintMutationInstruction(
+                  "Setting up animation KeyFrame for REMOVE mutation (Delete animation)",
+                  mutation);
+
               keyFrame = AnimationKeyFrame{
-                  better::optional<ShadowViewMutation>(mutation),
-                  AnimationConfigurationType::Noop,
+                  {mutation, deleteMutation},
+                  AnimationConfigurationType::Delete,
                   tag,
                   parent,
-                  {},
-                  {},
+                  viewStart,
+                  viewFinal,
+                  baselineShadowView,
                   0};
             } else {
               PrintMutationInstruction(
@@ -1105,37 +1287,33 @@ LayoutAnimationKeyFrameManager::pullTransaction(
           }
 
           // Handle conflicting animations
-          for (auto &conflictingKeyframeTuple : conflictingAnimations) {
-            auto &conflictingKeyFrame = std::get<0>(conflictingKeyframeTuple);
+          for (auto &conflictingKeyFrame : conflictingAnimations) {
             auto const &conflictingMutationBaselineShadowView =
                 conflictingKeyFrame.viewStart;
 
             // We've found a conflict.
             if (conflictingMutationBaselineShadowView.tag == tag) {
-              // What's the progress of this ongoing animation?
-              double conflictingAnimationProgress =
-                  calculateAnimationProgress(
-                      now,
-                      *std::get<2>(conflictingKeyframeTuple),
-                      std::get<1>(conflictingKeyframeTuple))
-                      .first;
-
-              // Get a baseline ShadowView at the current progress of the
-              // inflight animation. TODO: handle multiple properties being
-              // animated separately?
-              auto interpolatedInflightShadowView =
-                  createInterpolatedShadowView(
-                      conflictingAnimationProgress,
-                      conflictingKeyFrame.viewStart,
-                      conflictingKeyFrame.viewEnd);
+              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.viewStart = interpolatedInflightShadowView;
-              keyFrame.initialProgress = getProgressThroughAnimation(
-                  keyFrame, &animation, interpolatedInflightShadowView);
+              keyFrame.viewPrev = conflictingKeyFrame.viewPrev;
+              keyFrame.viewStart = conflictingKeyFrame.viewPrev;
+              react_native_assert(keyFrame.viewStart.tag > 0);
+              keyFrame.initialProgress = 0;
 
               // We're guaranteed that a tag only has one animation associated
               // with it, so we can break here. If we support multiple
@@ -1145,11 +1323,22 @@ LayoutAnimationKeyFrameManager::pullTransaction(
             }
           }
 
+#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) {
-          immediateMutations.push_back(mutation);
+        if (executeMutationImmediately.hasValue()) {
+          PrintMutationInstruction(
+              "Queue Up For Immediate Execution", *executeMutationImmediately);
+          immediateMutations.push_back(*executeMutationImmediately);
         }
       }
 
@@ -1169,11 +1358,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++;
         }
@@ -1182,46 +1372,64 @@ LayoutAnimationKeyFrameManager::pullTransaction(
 #endif
 
       auto finalConflictingMutations = ShadowViewMutationList{};
-      for (auto &conflictingKeyframeTuple : conflictingAnimations) {
-        auto &keyFrame = std::get<0>(conflictingKeyframeTuple);
-        if (keyFrame.finalMutationForKeyFrame.hasValue()) {
-          auto &mutation = *keyFrame.finalMutationForKeyFrame;
-          if (mutation.type == ShadowViewMutation::Type::Update) {
-            const auto &mutationInstruction =
-                ShadowViewMutation::UpdateMutation(
-                    mutation.parentShadowView,
-                    {},
-                    mutation.newChildShadowView,
-                    mutation.index);
-            PrintMutationInstruction(
-                "Queueing up final mutation instruction - update:",
-                mutationInstruction);
-            finalConflictingMutations.push_back(std::move(mutationInstruction));
-          } else {
-            PrintMutationInstruction(
-                "Queueing up final mutation instruction - non-update",
-                mutation);
-            finalConflictingMutations.push_back(mutation);
+      for (auto &keyFrame : conflictingAnimations) {
+        // Special-case: if we have some (1) ongoing UPDATE animation,
+        // (2) it conflicted with a new MOVE operation (REMOVE+INSERT)
+        // without another corresponding UPDATE, we should re-queue the
+        // keyframe so that its position/props don't suddenly "jump".
+        if (keyFrame.type == AnimationConfigurationType::Update) {
+          auto movedIt = movedTags.find(keyFrame.tag);
+          if (movedIt != movedTags.end()) {
+            auto newKeyFrameForUpdate = std::find_if(
+                keyFramesToAnimate.begin(),
+                keyFramesToAnimate.end(),
+                [&](auto const &newKeyFrame) {
+                  return newKeyFrame.type ==
+                      AnimationConfigurationType::Update &&
+                      newKeyFrame.tag == keyFrame.tag;
+                });
+            if (newKeyFrameForUpdate == keyFramesToAnimate.end()) {
+              keyFrame.invalidated = false;
+
+              // The animation will continue from the current position - we
+              // restart viewStart to make sure there are no sudden jumps
+              keyFrame.viewStart = keyFrame.viewPrev;
+
+              // Find the insert mutation that conflicted with this update
+              for (auto &mutation : immediateMutations) {
+                if (mutation.newChildShadowView.tag == keyFrame.tag &&
+                    (mutation.type == ShadowViewMutation::Insert ||
+                     mutation.type == ShadowViewMutation::Create)) {
+                  keyFrame.viewPrev = mutation.newChildShadowView;
+                  keyFrame.viewEnd = mutation.newChildShadowView;
+                }
+              }
+              keyFramesToAnimate.push_back(keyFrame);
+              continue;
+            }
           }
-        } 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.
-          auto mutatedShadowView = createInterpolatedShadowView(
-              1, keyFrame.viewStart, keyFrame.viewEnd);
-          auto generatedMutation = ShadowViewMutation::UpdateMutation(
-              keyFrame.parentView,
-              keyFrame.viewStart,
-              std::move(mutatedShadowView),
-              -1);
-          PrintMutationInstruction(
-              "Queueing up final mutation instruction - synthetic",
-              generatedMutation);
-          // Create the mutation instruction
-          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;
+        bool 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
@@ -1243,8 +1451,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
 
@@ -1252,8 +1460,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
@@ -1271,22 +1479,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);
           }
         }
       }
@@ -1294,21 +1501,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
@@ -1320,9 +1527,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(
@@ -1336,56 +1543,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 &conflictingKeyframeTuple : conflictingAnimations) {
-        auto &keyFrame = std::get<0>(conflictingKeyframeTuple);
-        if (keyFrame.finalMutationForKeyFrame.hasValue()) {
-          PrintMutationInstruction(
-              "No Animation: Queueing final mutation instruction",
-              *keyFrame.finalMutationForKeyFrame);
-          finalMutationsForConflictingAnimations.push_back(
-              *keyFrame.finalMutationForKeyFrame);
-        } 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.
-          auto mutatedShadowView = createInterpolatedShadowView(
-              1, keyFrame.viewStart, keyFrame.viewEnd);
-          auto generatedMutation = ShadowViewMutation::UpdateMutation(
-              keyFrame.parentView,
-              keyFrame.viewStart,
-              std::move(mutatedShadowView),
-              -1);
-          PrintMutationInstruction(
-              "Queueing up final mutation instruction - synthetic",
-              generatedMutation);
-          // Create the mutation instruction
-          finalMutationsForConflictingAnimations.push_back(generatedMutation);
-        }
+      for (auto const &keyFrame : conflictingAnimations) {
+        queueFinalMutationsForCompletedKeyFrame(
+            keyFrame,
+            finalMutationsForConflictingAnimations,
+            true,
+            "Conflict with non-animated mutation");
       }
 
       // Make sure that all operations execute in the proper order.
@@ -1399,17 +1586,17 @@ LayoutAnimationKeyFrameManager::pullTransaction(
       LOG(ERROR)
           << "No Animation: Adjust delayed mutations based on all finalMutationsForConflictingAnimations";
 #endif
-      for (auto &mutation : finalMutationsForConflictingAnimations) {
+      for (auto const &mutation : finalMutationsForConflictingAnimations) {
         if (mutation.type == ShadowViewMutation::Type::Remove ||
             mutation.type == ShadowViewMutation::Type::Insert) {
           adjustDelayedMutationIndicesForMutation(surfaceId, mutation);
         }
       }
 
-      // The ShadowTree layer doesn't realize that certain operations have been
-      // delayed, so we must adjust all Remove and Insert operations based on
-      // what else has been deferred, whether we are executing this immediately
-      // or later.
+      // 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";
@@ -1463,7 +1650,7 @@ LayoutAnimationKeyFrameManager::pullTransaction(
   LOG(ERROR) << "FINISHING DISPLAYING ONGOING inflightAnimations_!";
   int i = 0;
   int j = 0;
-  for (auto &inflightAnimation : inflightAnimations_) {
+  for (auto const &inflightAnimation : inflightAnimations_) {
     i++;
     j = 0;
     if (inflightAnimation.completed) {
@@ -1474,14 +1661,12 @@ LayoutAnimationKeyFrameManager::pullTransaction(
       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 << "]";
+      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);
+        }
       }
     }
   }
@@ -1507,21 +1692,6 @@ LayoutAnimationKeyFrameManager::pullTransaction(
       surfaceId, transactionNumber, std::move(mutations), telemetry};
 }
 
-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;
-}
-
 bool LayoutAnimationKeyFrameManager::hasComponentDescriptorForShadowView(
     ShadowView const &shadowView) const {
   return componentDescriptorRegistry_->hasComponentDescriptorAt(
@@ -1552,20 +1722,50 @@ ShadowView LayoutAnimationKeyFrameManager::createInterpolatedShadowView(
     double progress,
     ShadowView startingView,
     ShadowView finalView) const {
+  react_native_assert(startingView.tag > 0);
+  react_native_assert(finalView.tag > 0);
   if (!hasComponentDescriptorForShadowView(startingView)) {
+    LOG(ERROR) << "No ComponentDescriptor for ShadowView being animated: ["
+               << startingView.tag << "]";
+    react_native_assert(false);
     return finalView;
   }
+
+  // Stub PropsParserContext used for interpolateProps.
+  // This is/should be safe because interpolating doesn't actually need to
+  // parse props, and just copies them; therefore there should be no
+  // need to actually use anything in the PropsParserContext.
+  // If this ever changes, the LayoutAnimations API will need to change
+  // to pass in a real PropsParserContext.
+  ContextContainer contextContainer{};
+  PropsParserContext propsParserContext{-1, contextContainer};
+
   ComponentDescriptor const &componentDescriptor =
       getComponentDescriptorForShadowView(startingView);
-  auto mutatedShadowView = ShadowView(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
   mutatedShadowView.props = componentDescriptor.interpolateProps(
-      progress, startingView.props, finalView.props);
+      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;
@@ -1592,6 +1792,90 @@ ShadowView LayoutAnimationKeyFrameManager::createInterpolatedShadowView(
   return mutatedShadowView;
 }
 
+void LayoutAnimationKeyFrameManager::queueFinalMutationsForCompletedKeyFrame(
+    AnimationKeyFrame const &keyframe,
+    ShadowViewMutation::List &mutationsList,
+    bool interrupted,
+    std::string logPrefix) const {
+  if (keyframe.finalMutationsForKeyFrame.size() > 0) {
+    // TODO: modularize this segment, it is repeated 2x in KeyFrameManager
+    // as well.
+    ShadowView prev = keyframe.viewPrev;
+    for (auto const &finalMutation : keyframe.finalMutationsForKeyFrame) {
+      PrintMutationInstruction(
+          logPrefix + ": Queuing up Final Mutation:", finalMutation);
+      // Copy so that if something else mutates the inflight animations,
+      // it won't change this mutation after this point.
+      auto mutation = ShadowViewMutation{
+          finalMutation.type,
+          finalMutation.parentShadowView,
+          prev,
+          finalMutation.newChildShadowView,
+          finalMutation.index};
+      react_native_assert(mutation.oldChildShadowView.tag > 0);
+      react_native_assert(
+          mutation.newChildShadowView.tag > 0 ||
+          finalMutation.type == ShadowViewMutation::Remove ||
+          finalMutation.type == ShadowViewMutation::Delete);
+      mutationsList.push_back(mutation);
+      if (finalMutation.newChildShadowView.tag > 0) {
+        prev = finalMutation.newChildShadowView;
+      }
+    }
+  } else {
+    // If there's no final mutation associated, create a mutation that
+    // corresponds to the animation being 100% complete. This is
+    // important for, for example, INSERT mutations being animated from
+    // opacity 0 to 1. If the animation is interrupted we must force the
+    // View to be at opacity 1. For Android - since it passes along only
+    // deltas, not an entire bag of props - generate an "animation"
+    // frame corresponding to a final update for this view. Only then,
+    // generate an update that will cause the ShadowTree to be
+    // consistent with the Mounting layer by passing viewEnd,
+    // unmodified, to the mounting layer. This helps with, for example,
+    // opacity animations.
+    // This is necessary for INSERT (create) and UPDATE (update) mutations, but
+    // not REMOVE/DELETE mutations ("delete" animations).
+    if (interrupted) {
+      auto mutatedShadowView =
+          createInterpolatedShadowView(1, keyframe.viewStart, keyframe.viewEnd);
+      auto generatedPenultimateMutation = ShadowViewMutation::UpdateMutation(
+          keyframe.viewPrev, mutatedShadowView);
+      react_native_assert(
+          generatedPenultimateMutation.oldChildShadowView.tag > 0);
+      react_native_assert(
+          generatedPenultimateMutation.newChildShadowView.tag > 0);
+      PrintMutationInstruction(
+          "Queueing up penultimate mutation instruction - synthetic",
+          generatedPenultimateMutation);
+      mutationsList.push_back(generatedPenultimateMutation);
+
+      auto generatedMutation = ShadowViewMutation::UpdateMutation(
+          mutatedShadowView, keyframe.viewEnd);
+      react_native_assert(generatedMutation.oldChildShadowView.tag > 0);
+      react_native_assert(generatedMutation.newChildShadowView.tag > 0);
+      PrintMutationInstruction(
+          "Queueing up final mutation instruction - synthetic",
+          generatedMutation);
+      mutationsList.push_back(generatedMutation);
+    } else {
+      auto mutation = ShadowViewMutation{
+          ShadowViewMutation::Type::Update,
+          keyframe.parentView,
+          keyframe.viewPrev,
+          keyframe.viewEnd,
+          -1};
+      PrintMutationInstruction(
+          logPrefix +
+              "Animation Complete: Queuing up Final Synthetic Mutation:",
+          mutation);
+      react_native_assert(mutation.oldChildShadowView.tag > 0);
+      react_native_assert(mutation.newChildShadowView.tag > 0);
+      mutationsList.push_back(mutation);
+    }
+  }
+}
+
 void LayoutAnimationKeyFrameManager::callCallback(
     const LayoutAnimationCallbackWrapper &callback) const {
   if (callback.readyForCleanup()) {
@@ -1622,8 +1906,8 @@ void LayoutAnimationKeyFrameManager::callCallback(
         callbackWrappersPending_.end());
 
     // Hold onto a reference to the callback, only while
-    // LayoutAnimationKeyFrameManager is alive and the callback hasn't completed
-    // yet.
+    // LayoutAnimationKeyFrameManager is alive and the callback hasn't
+    // completed yet.
     callbackWrappersPending_.push_back(std::move(copiedCallback));
   }
 }