Incorrect childCount in removeViewAt

[BenIrving]

Description

There is a bug in react-native-screens on Android when newArchEnabled=true and we have FlatLists in our screens

We attempt to remove an incorrect number of children when calling removeViewAt in SurfaceMountingManager

This seems related to the changes introduced by @WoLewicki in 2134 as we patched these changes into a previous version of rns and this bug became immediately apparent. This was tested on rn73 & rn74 as well

Steps to reproduce

1. Press listitem1
2. Press listitem2
3. Observe crash

Snack or a link to a repository

https://github.com/BenIrving/rnsrepro

Screens version

3.34.0

React Native version

0.75.0-rc.6

Platforms

Android

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

None

Device model

No response

Acknowledgements

Yes

[alduzy]

@BenIrving Thanks for reporting the issue, I am working on a possible fix.
As a workaround you can try setting the removeClippedSubviews option in the FlatList to false.

[janicduplessis]

I have also encountered this issue, for now I reverted #2134 since it would cause screens to go completely blank when navigating back to it.

[BenIrving]

@alduzy I can confirm the workaround fixes the issue. Is there any progress on a proper fix here?

[alduzy]

@BenIrving There is a fix, but not the prettiest one. I'll prepare a PR

[Akash95B]

I am still facing the issue when i am using sectionlist and flatlist. And I am getting the error while navigating back.
@WoLewicki

Below is the sectionlist component

`import React, { useState } from 'react';
import { View, SectionList, FlatList, Image, TouchableOpacity } from 'react-native';
import UpArrow from '../../../../../assets/svg/UpArrow.svg';
import DownArrow from '../../../../../assets/svg/DownArrow.svg';
import styles from '../components/SectionStyle';
import { useTheme } from '@react-navigation/native';
import GilroyText from '../../../../../common/components/Text';

const SectionListItem = ({ sections = [] }) => {
const { colors } = useTheme();
const themedStyles = styles(colors);
const [expandedSection, setExpandedSection] = useState(sections.length > 0 ? sections[0].title : null);

const toggleSection = (title: any) => {
setExpandedSection(expandedSection === title ? null : title);
};

const renderSlotCard = ({ item }) => (

{'AF2'}
{item.time}
{item.slots} slots
<Image source={{ uri: 'https://randomuser.me/api/portraits/men/32.jpg' }} style={themedStyles.coachImage} />
{item.coach}

);

const renderDayHeader = (day: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined) => (
{day}
);

const renderHorizontalList = ({ data }) => (
<FlatList
data={data || []}
renderItem={renderSlotCard}
keyExtractor={(item) => item.id}
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={themedStyles.horizontalListContent}
removeClippedSubviews={false}
/>
);

const renderSectionHeader = ({ section: { title } }) => {
const isExpanded = expandedSection === title;

return (
  <TouchableOpacity
    style={[
      themedStyles.sectionHeader,
      isExpanded && themedStyles.expandedSectionHeader,
    ]}
    onPress={() => toggleSection(title)}
  >
    <GilroyText style={themedStyles.sectionTitle}>{title}</GilroyText>
    {isExpanded ? <UpArrow /> : <DownArrow />}
  </TouchableOpacity>
);

};

const renderSectionFooter = ({ section }) => {
const isExpanded = expandedSection === section.title;

if (!isExpanded) return null;

return (
  <View style={themedStyles.expandedSection}>
    {section.days.map((dayItem) => (
      <View key={dayItem.day}>
        {renderDayHeader(dayItem.day)}
        {renderHorizontalList({ data: dayItem.data })}
      </View>
    ))}
    <View style={themedStyles.expandedSectionBottomBorder} />
  </View>
);

};

return (
<View style={{ flex: 1, marginLeft: 20 }}>
<SectionList
sections={sections.map(section => ({
...section,
data: section.data || [],
}))}
renderItem={() => null}
renderSectionHeader={renderSectionHeader}
renderSectionFooter={renderSectionFooter}
keyExtractor={(item) => item.id}
contentContainerStyle={themedStyles.sectionListContent}
removeClippedSubviews={false}
/>

);
};

export default SectionListItem;
`

[WoLewicki]

@Akash95B is #2330 included in your build?