fix(Reanimated): preserve layout updates during entering animations

packages/react-native-reanimated/CHANGELOG.md

@@ -13,6 +13,7 @@
 
 ### 🐛 Bug fixes
 
+- Fix layout changes made during entering animations being overwritten by stale animation frames. ([#10382](https://github.com/software-mansion/react-native-reanimated/pull/10382) by [@ngocdevv](https://github.com/ngocdevv))
 - Fix animated styles on sticky headers throwing an immutable-object mutation error in development. ([#10389](https://github.com/software-mansion/react-native-reanimated/pull/10389) by [@ngocdevv](https://github.com/ngocdevv))
 - Fix shared element transitions never running on Android for npm installs by publishing `react-native.config.js`, which registers the Shared Transition Boundary component descriptor for autolinking. ([#10375](https://github.com/software-mansion/react-native-reanimated/pull/10375) by [@dennytosp](https://github.com/dennytosp))
 - Keep exiting views at their position in the host tree, so they no longer draw above later siblings. ([#10392](https://github.com/software-mansion/react-native-reanimated/pull/10392) by [@pawicao](https://github.com/pawicao))

packages/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.cpp

@@ -252,6 +252,9 @@ void LayoutAnimationsProxy_Experimental::updateLightTree(
         if (layoutAnimationsManager_->hasLayoutAnimation(tag, LAYOUT)) {
           layout_.push_back(node);
         } else {
+          if (layoutAnimations_.contains(tag)) {
+            updateOngoingAnimationTarget(tag, node->current);
+          }
           filteredMutations.push_back(mutation);
         }
         break;
@@ -723,9 +726,9 @@ bool LayoutAnimationsProxy_Experimental::startAnimationsRecursively(
   return wantAnimateExit;
 }
 
-void LayoutAnimationsProxy_Experimental::updateOngoingAnimationTarget(const int tag, const ShadowViewMutation &mutation)
+void LayoutAnimationsProxy_Experimental::updateOngoingAnimationTarget(const int tag, const ShadowView &finalView)
     const {
-  layoutAnimations_[tag].finalView = mutation.newChildShadowView;
+  layoutAnimations_[tag].finalView = finalView;
 }
 
 void LayoutAnimationsProxy_Experimental::maybeCancelAnimation(const int tag) const {

packages/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Experimental.h

@@ -201,7 +201,7 @@ struct LayoutAnimationsProxy_Experimental : public LayoutAnimationsProxyCommon,
   void flushDeadNodes(ShadowViewMutationList &filteredMutations) const;
 
   void addOngoingAnimations(SurfaceId surfaceId, ShadowViewMutationList &mutations) const;
-  void updateOngoingAnimationTarget(const int tag, const ShadowViewMutation &mutation) const;
+  void updateOngoingAnimationTarget(const int tag, const ShadowView &finalView) const;
   ShadowView cloneViewWithoutOpacity(const ShadowView &shadowView, const PropsParserContext &propsParserContext) const;
 
   ShadowView cloneViewWithOpacity(const ShadowView &shadowView, const PropsParserContext &propsParserContext) const;

packages/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Legacy.cpp

@@ -459,6 +459,9 @@ void LayoutAnimationsProxy_Legacy::handleUpdatesAndEnterings(
         auto shouldAnimate = hasLayoutChanged(mutation);
         if (!layoutAnimationsManager_->hasLayoutAnimation(tag, LayoutAnimationType::LAYOUT) ||
             (!shouldAnimate && !layoutAnimations_.contains(tag))) {
+          if (layoutAnimations_.contains(tag)) {
+            updateOngoingAnimationTarget(tag, mutation.newChildShadowView);
+          }
           // We should cancel any ongoing animation here to ensure that the
           // proper final state is reached for this view However, due to how
           // RNSScreens handle adding headers (a second commit is triggered to
@@ -469,7 +472,7 @@ void LayoutAnimationsProxy_Legacy::handleUpdatesAndEnterings(
           filteredMutations.push_back(mutation);
           continue;
         } else if (!shouldAnimate) {
-          updateOngoingAnimationTarget(tag, mutation);
+          updateOngoingAnimationTarget(tag, mutation.newChildShadowView);
           continue;
         }
 
@@ -943,10 +946,8 @@ void LayoutAnimationsProxy_Legacy::startLayoutAnimation(const int tag, const Sha
       });
 }
 
-void LayoutAnimationsProxy_Legacy::updateOngoingAnimationTarget(const int tag, const ShadowViewMutation &mutation)
-    const {
-  auto copy = mutation.newChildShadowView;
-  layoutAnimations_[tag].finalView = copy;
+void LayoutAnimationsProxy_Legacy::updateOngoingAnimationTarget(const int tag, const ShadowView &finalView) const {
+  layoutAnimations_[tag].finalView = finalView;
 }
 
 void LayoutAnimationsProxy_Legacy::maybeCancelAnimation(const int tag) const {

packages/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Legacy.h

@@ -187,7 +187,7 @@ struct LayoutAnimationsProxy_Legacy : public LayoutAnimationsProxyCommon,
       SurfaceId surfaceId) const;
   void addOngoingAnimations(SurfaceId surfaceId, ShadowViewMutationList &mutations) const;
   void dropUpdatesForDeletedViews(ShadowViewMutationList &filteredMutations) const;
-  void updateOngoingAnimationTarget(const int tag, const ShadowViewMutation &mutation) const;
+  void updateOngoingAnimationTarget(const int tag, const ShadowView &finalView) const;
   std::shared_ptr<ShadowView> cloneViewWithoutOpacity(
       facebook::react::ShadowViewMutation &mutation,
       const PropsParserContext &propsParserContext) const;