[Layout Animations][iOS] Fix registering exiting view ancestors

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