From d6897448eafc4c1e76d43de8ffa1276cfcfaa94d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20B=C5=82oniarz?=
 <bartlomiej.bloniarz@swmansion.com>
Date: Wed, 17 Jul 2024 14:59:25 +0200
Subject: [PATCH 1/2] Fix parsing

---
 .../examples/LayoutAnimations/BottomTabs.tsx  | 69 +++++++++++++++++++
 apps/common-app/src/examples/index.ts         |  5 ++
 .../LayoutAnimationsProxy.cpp                 | 25 +++++--
 3 files changed, 94 insertions(+), 5 deletions(-)
 create mode 100644 apps/common-app/src/examples/LayoutAnimations/BottomTabs.tsx

diff --git a/apps/common-app/src/examples/LayoutAnimations/BottomTabs.tsx b/apps/common-app/src/examples/LayoutAnimations/BottomTabs.tsx
new file mode 100644
index 000000000000..60e8da8d6817
--- /dev/null
+++ b/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;
diff --git a/apps/common-app/src/examples/index.ts b/apps/common-app/src/examples/index.ts
index 309bda12a123..4c0e660c94bc 100644
--- a/apps/common-app/src/examples/index.ts
+++ b/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';
 
 interface Example {
   icon?: string;
@@ -701,6 +702,10 @@ export const EXAMPLES: Record<string, Example> = {
     title: '[LA] Change theme',
     screen: ChangeThemeExample,
   },
+  BottomTabs: {
+    title: '[LA] Bottom Tabs',
+    screen: BottomTabsExample,
+  },
 
   // Shared Element Transitions
 
diff --git a/packages/react-native-reanimated/Common/cpp/LayoutAnimations/LayoutAnimationsProxy.cpp b/packages/react-native-reanimated/Common/cpp/LayoutAnimations/LayoutAnimationsProxy.cpp
index f219e5d64617..bcec082cb95f 100644
--- a/packages/react-native-reanimated/Common/cpp/LayoutAnimations/LayoutAnimationsProxy.cpp
+++ b/packages/react-native-reanimated/Common/cpp/LayoutAnimations/LayoutAnimationsProxy.cpp
@@ -138,6 +138,8 @@ void LayoutAnimationsProxy::parseRemoveMutations(
   std::set<Tag> deletedViews;
   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++) {
@@ -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){
   }
 }
 

From 4d637ee854ec4fa79887c7597642cb74c1173119 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20B=C5=82oniarz?=
 <bartlomiej.bloniarz@swmansion.com>
Date: Wed, 17 Jul 2024 16:07:00 +0200
Subject: [PATCH 2/2] Lint :((

---
 .../LayoutAnimations/LayoutAnimationsProxy.cpp   | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/react-native-reanimated/Common/cpp/LayoutAnimations/LayoutAnimationsProxy.cpp b/packages/react-native-reanimated/Common/cpp/LayoutAnimations/LayoutAnimationsProxy.cpp
index bcec082cb95f..b3a197d659e9 100644
--- a/packages/react-native-reanimated/Common/cpp/LayoutAnimations/LayoutAnimationsProxy.cpp
+++ b/packages/react-native-reanimated/Common/cpp/LayoutAnimations/LayoutAnimationsProxy.cpp
@@ -138,7 +138,7 @@ void LayoutAnimationsProxy::parseRemoveMutations(
   std::set<Tag> deletedViews;
   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
@@ -209,21 +209,21 @@ void LayoutAnimationsProxy::parseRemoveMutations(
   }
 
   for (auto &[parentTag, children] : childrenForTag) {
-    auto& parent = nodeForTag_[parentTag];
+    auto &parent = nodeForTag_[parentTag];
     parent->insertChildren(children);
-    for (auto& child: children){
+    for (auto &child : children) {
       child->parent = parent;
     }
   }
   for (auto &[unflattenedParentTag, children] : unflattenedChildrenForTag) {
-    auto& unflattenedParent = nodeForTag_[unflattenedParentTag];
+    auto &unflattenedParent = nodeForTag_[unflattenedParentTag];
     unflattenedParent->insertUnflattenedChildren(children);
-    for (auto& child: children){
+    for (auto &child : children) {
       child->unflattenedParent = unflattenedParent;
     }
   }
-      
-  for (auto& mutationNode: mutationNodes){
+
+  for (auto &mutationNode : mutationNodes) {
     if (!mutationNode->unflattenedParent->isMutationMode()) {
       roots.push_back(mutationNode);
     }
@@ -711,7 +711,7 @@ void LayoutAnimationsProxy::transferConfigFromNativeID(
     auto nativeId = stoi(nativeIdString);
     layoutAnimationsManager_->transferConfigFromNativeID(nativeId, tag);
   } catch (std::invalid_argument) {
-  } catch (std::out_of_range){
+  } catch (std::out_of_range) {
   }
 }