Fix Remove mutation parsing in Layout Animations

apps/common-app/src/examples/LayoutAnimations/BottomTabs.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { View, StyleSheet, Button } from 'react-native';
+import Animated, {
+  BounceInDown,
+  FadeIn,
+  FadeOutDown,
+  LinearTransition,
+  RotateOutDownLeft,
+} from 'react-native-reanimated';
+
+const BottomBar = createBottomTabNavigator();
+
+const TabA = () => {
+  const [toggle, setToggle] = React.useState(false);
+
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        entering={FadeIn.duration(1000)}
+        layout={LinearTransition}
+        exiting={FadeOutDown}
+        style={[styles.boxA, { width: toggle ? 200 : 100 }]}
+      />
+      <Button title="toggle" onPress={() => setToggle((prev) => !prev)} />
+    </View>
+  );
+};
+
+const TabB = () => {
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        entering={BounceInDown.duration(1000)}
+        exiting={RotateOutDownLeft.duration(1000)}
+        style={styles.boxB}
+      />
+    </View>
+  );
+};
+
+const BottomTabsExample = () => {
+  return (
+    <BottomBar.Navigator>
+      <BottomBar.Screen name="A" component={TabA} />
+      <BottomBar.Screen name="B" component={TabB} />
+    </BottomBar.Navigator>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  boxA: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'blue',
+  },
+  boxB: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'red',
+  },
+});
+
+export default BottomTabsExample;

apps/common-app/src/examples/index.ts

@@ -131,6 +131,7 @@ import BorderRadiiExample from './SharedElementTransitions/BorderRadii';
 import FreezingShareablesExample from './ShareableFreezingExample';
 import TabNavigatorExample from './SharedElementTransitions/TabNavigatorExample';
 import StrictDOMExample from './StrictDOMExample';
+import BottomTabsExample from './LayoutAnimations/BottomTabs';
 import ListItemLayoutAnimation from './LayoutAnimations/ListItemLayoutAnimation';
 
 interface Example {
@@ -706,6 +707,10 @@ export const EXAMPLES: Record<string, Example> = {
     title: '[LA] Change theme',
     screen: ChangeThemeExample,
   },
+  BottomTabs: {
+    title: '[LA] Bottom Tabs',
+    screen: BottomTabsExample,
+  },
 
   // Shared Element Transitions
 

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

@@ -139,6 +139,8 @@ void LayoutAnimationsProxy::parseRemoveMutations(
   std::unordered_map<Tag, std::vector<std::shared_ptr<MutationNode>>>
       childrenForTag, unflattenedChildrenForTag;
 
+  std::vector<std::shared_ptr<MutationNode>> mutationNodes;
+
   // iterate from the end, so that parents appear before children
   for (auto it = mutations.rbegin(); it != mutations.rend(); it++) {
     auto &mutation = *it;
@@ -190,9 +192,7 @@ void LayoutAnimationsProxy::parseRemoveMutations(
         }
       }
 
-      if (!unflattenedParent->parent) {
-        roots.push_back(mutationNode);
-      }
+      mutationNodes.push_back(mutationNode);
 
       childrenForTag[parentTag].push_back(mutationNode);
       unflattenedChildrenForTag[unflattenedParentTag].push_back(mutationNode);
@@ -209,10 +209,24 @@ void LayoutAnimationsProxy::parseRemoveMutations(
   }
 
   for (auto &[parentTag, children] : childrenForTag) {
-    nodeForTag_[parentTag]->insertChildren(children);
+    auto &parent = nodeForTag_[parentTag];
+    parent->insertChildren(children);
+    for (auto &child : children) {
+      child->parent = parent;
+    }
   }
   for (auto &[unflattenedParentTag, children] : unflattenedChildrenForTag) {
-    nodeForTag_[unflattenedParentTag]->insertUnflattenedChildren(children);
+    auto &unflattenedParent = nodeForTag_[unflattenedParentTag];
+    unflattenedParent->insertUnflattenedChildren(children);
+    for (auto &child : children) {
+      child->unflattenedParent = unflattenedParent;
+    }
+  }
+
+  for (auto &mutationNode : mutationNodes) {
+    if (!mutationNode->unflattenedParent->isMutationMode()) {
+      roots.push_back(mutationNode);
+    }
   }
 }
 
@@ -697,6 +711,7 @@ void LayoutAnimationsProxy::transferConfigFromNativeID(
     auto nativeId = stoi(nativeIdString);
     layoutAnimationsManager_->transferConfigFromNativeID(nativeId, tag);
   } catch (std::invalid_argument) {
+  } catch (std::out_of_range) {
   }
 }