[Layout Animations][iOS] Fix registering exiting view ancestors (soft…

…ware-mansion#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. -->
software-mansion#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

@@ -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',

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',
+  },
+});

Example/src/LayoutReanimation/index.ts

@@ -12,3 +12,4 @@ export * from './Nested';
 export * from './BasicLayoutAnimation';
 export * from './BasicNestedAnimation';
 export * from './BasicNestedLayoutAnimation';
+export * from './DeleteAncestorOfExiting';

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++;
     }