From a40d12c1913a7abdb8df82751666deaecc0f19c5 Mon Sep 17 00:00:00 2001
From: Juliusz Wajgelt <49338439+jwajgelt@users.noreply.github.com>
Date: Wed, 14 Dec 2022 11:21:03 +0100
Subject: [PATCH] [Layout Animations][iOS] Fix registering exiting view
 ancestors (#3849)

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

<!-- Explain the motivation for this PR. Include "Fixes #<number>" if
applicable. -->
#3824 introduces a bug with how we register ancestors of views with
`exiting` animations.
When a tree with `exiting` views is reattached to the native view
hierarchy, we don't register the ancestors of that tree as ancestors of
exiting subviews. This may cause issues with deleting these views early,
while there're still `exiting` animations running inside them.

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->
---
 Example/src/App.tsx                           |  5 ++
 .../DeleteAncestorOfExiting.tsx               | 54 +++++++++++++++++++
 Example/src/LayoutReanimation/index.ts        |  1 +
 ios/LayoutReanimation/REAAnimationsManager.m  | 13 ++++-
 4 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 Example/src/LayoutReanimation/DeleteAncestorOfExiting.tsx

diff --git a/Example/src/App.tsx b/Example/src/App.tsx
index 6769ab9a08d..a7215442d53 100644
--- a/Example/src/App.tsx
+++ b/Example/src/App.tsx
@@ -30,6 +30,7 @@ import {
   BasicNestedLayoutAnimation,
   BasicNestedAnimation,
   BasicLayoutAnimation,
+  DeleteAncestorOfExiting,
 } from './LayoutReanimation';
 
 import AnimatedStyleUpdateExample from './AnimatedStyleUpdateExample';
@@ -69,6 +70,10 @@ if (Platform.OS === 'android') {
 type Screens = Record<string, { screen: React.ComponentType; title?: string }>;
 
 const SCREENS: Screens = {
+  DeleteAncestorOfExiting: {
+    screen: DeleteAncestorOfExiting,
+    title: '🆕 Deleting view with an exiting animation',
+  },
   BasicLayoutAnimation: {
     screen: BasicLayoutAnimation,
     title: '🆕 Basic layout animation',
diff --git a/Example/src/LayoutReanimation/DeleteAncestorOfExiting.tsx b/Example/src/LayoutReanimation/DeleteAncestorOfExiting.tsx
new file mode 100644
index 00000000000..07400709a88
--- /dev/null
+++ b/Example/src/LayoutReanimation/DeleteAncestorOfExiting.tsx
@@ -0,0 +1,54 @@
+import Animated, { PinwheelOut } from 'react-native-reanimated';
+import { Button, StyleSheet, View } from 'react-native';
+
+import React from 'react';
+
+export function DeleteAncestorOfExiting() {
+  const [outer, setOuter] = React.useState(false);
+  const [inner, setInner] = React.useState(true);
+
+  return (
+    <View style={styles.container}>
+      <Button
+        onPress={() => {
+          setOuter(!outer);
+          setInner(!outer);
+        }}
+        title="Toggle Outer"
+      />
+      <Button onPress={() => setInner(!inner)} title="Toggle Inner" />
+      {outer && (
+        <View style={styles.outerBox}>
+          <Animated.View style={styles.box} exiting={PinwheelOut} />
+          {inner && (
+            <Animated.View
+              style={styles.box}
+              exiting={PinwheelOut.duration(5000)}
+            />
+          )}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    marginTop: 300,
+  },
+  outerBox: {
+    width: 260,
+    height: 150,
+    flexDirection: 'row',
+    backgroundColor: 'navy',
+    alignItems: 'center',
+  },
+  box: {
+    width: 100,
+    height: 100,
+    marginLeft: 20,
+    backgroundColor: 'red',
+  },
+});
diff --git a/Example/src/LayoutReanimation/index.ts b/Example/src/LayoutReanimation/index.ts
index ff7cec5ed85..646441816c1 100644
--- a/Example/src/LayoutReanimation/index.ts
+++ b/Example/src/LayoutReanimation/index.ts
@@ -12,3 +12,4 @@ export * from './Nested';
 export * from './BasicLayoutAnimation';
 export * from './BasicNestedAnimation';
 export * from './BasicNestedLayoutAnimation';
+export * from './DeleteAncestorOfExiting';
diff --git a/ios/LayoutReanimation/REAAnimationsManager.m b/ios/LayoutReanimation/REAAnimationsManager.m
index e30b0ea5846..60d94ab0155 100644
--- a/ios/LayoutReanimation/REAAnimationsManager.m
+++ b/ios/LayoutReanimation/REAAnimationsManager.m
@@ -245,11 +245,17 @@ - (BOOL)wantsHandleRemovalOfView:(UIView *)view
 }
 
 - (void)registerExitingAncestors:(UIView *)child
+{
+  [self registerExitingAncestors:child exitingSubviewsCount:1];
+}
+
+- (void)registerExitingAncestors:(UIView *)child exitingSubviewsCount:(int)exitingSubviewsCount
 {
   UIView *parent = child.superview;
   while (parent != nil && ![parent isKindOfClass:[RCTRootView class]]) {
     if (parent.reactTag != nil) {
-      _exitingSubviewsCountMap[parent.reactTag] = @([_exitingSubviewsCountMap[parent.reactTag] intValue] + 1);
+      _exitingSubviewsCountMap[parent.reactTag] =
+          @([_exitingSubviewsCountMap[parent.reactTag] intValue] + exitingSubviewsCount);
     }
     parent = parent.superview;
   }
@@ -363,6 +369,11 @@ - (void)reattachAnimatedChildren:(NSArray<id<RCTComponent>> *)children
     NSNumber *originalIndex = indices[i];
     if ([self startAnimationsRecursive:childView shouldRemoveSubviewsWithoutAnimations:YES]) {
       [(UIView *)container insertSubview:childView atIndex:[originalIndex intValue] - skippedViewsCount];
+      int exitingSubviewsCount = [_exitingSubviewsCountMap[childView.reactTag] intValue];
+      if ([_exitingViews objectForKey:childView.reactTag] != nil) {
+        exitingSubviewsCount++;
+      }
+      [self registerExitingAncestors:childView exitingSubviewsCount:exitingSubviewsCount];
     } else {
       skippedViewsCount++;
     }