fix(Android): incorrect childCount in removeViewAt when using flatlist on fabric (#2307)

This PR intents to fix the crash when navigating back from a screen with
FlatList on the new architecture. The crash was caused by miscalculated
`childCount` of the list.
Earlier on I found out that setting the
[removeClippedSubviews](https://reactnative.dev/docs/flatlist#removeclippedsubviews)
option to false (defaults to true on Android) in the FlatList fixes the
problem.

This PR is rather a quick fix with an extra condition, that adds simple
views in place of the miscalculated ones in `startTransitionRecursive`
function if there's a FlatList with `removeClippedSubviews` option set.

Fixes #2282.

- added `Test2282.tsx` repro
- added extra condition in `startTransitionRecursive` function

<!--

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

-->

- added `Test2282.tsx` repro

- [x] Ensured that CI passes

(cherry picked from commit c47ad84)

Author: alduzy

android/src/main/java/com/swmansion/rnscreens/Screen.kt

@@ -17,6 +17,7 @@ import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.UIManagerModule
+import com.facebook.react.views.scroll.ReactScrollView
 import com.swmansion.rnscreens.events.HeaderHeightChangeEvent
 
 @SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated.
@@ -312,6 +313,15 @@ class Screen(
                     startTransitionRecursive(child.toolbar)
                 }
                 if (child is ViewGroup) {
+                    // The children are miscounted when there's a FlatList with
+                    // removeCLippedSubviews set to true (default).
+                    // We add a simple view for each item in the list to make it work as expected.
+                    // See https://github.com/software-mansion/react-native-screens/issues/2282
+                    if (it is ReactScrollView && it.removeClippedSubviews) {
+                        for (j in 0 until child.childCount) {
+                            child.addView(View(context))
+                        }
+                    }
                     startTransitionRecursive(child)
                 }
             }

apps/src/tests/Test2282.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { FlatList, Button, Text } from 'react-native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { NavigationContainer } from '@react-navigation/native';
+
+const Stack = createNativeStackNavigator();
+
+const First = ({ navigation }: any) => (
+  <Button onPress={() => navigation.navigate('Second')} title="Navigate" />
+);
+
+const Second = ({ navigation }: any) => (
+  <>
+    <FlatList
+      renderItem={({ item }) => <Text>{item}</Text>}
+      data={[1,2,3,4,5,6]}
+      keyExtractor={item => item.toString()}
+    />
+    <Button onPress={navigation.goBack} title="Go back" />
+  </>
+);
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="First" component={First} />
+        <Stack.Screen name="Second" component={Second} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

apps/src/tests/index.ts

@@ -109,5 +109,6 @@ export { default as Test2232 } from './Test2232';
 export { default as Test2235 } from './Test2235';
 export { default as Test2252 } from './Test2252';
 export { default as Test2271 } from './Test2271';
+export { default as Test2282 } from './Test2282';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';