Cannot remove child at index X from parent ViewGroup X, only Xchildren in parent. Warning: childCount may be incorrect!

[maciekBudzinski]

Current behaviour

[Android ONLY] The application crashes when unmounting MaterialBottomTabNavigator nested in the native stack navigator. I've created this issue here as it only happens when createMaterialBottomTabNavigator is used. It works ok with BottomTabNavigation from @react-navigation/bottom-tabs.

Expected behaviour

Application should not crash.

How to reproduce?

Repro demo: https://github.com/maciekBudzinski/rnp-material-bottom-tabs-repro-issue

Preview

paper_repro.webm

What have you tried so far?

1. I've tried to different versions of react-native-screens as suggested here: Android - "cannot remove child at index X" error on new architecture software-mansion/react-native-screens#2339.
2. When I render MaterialBottomTabNavigator without native-stack that wraps it, everything works ok.

Your Environment

software	version
ios	n/a
android	API 33 Emulator
react-native	0.76.1
react-native-paper	5.12.5
node	v21.7.3
npm or yarn	1.22.22
expo sdk	n/a

[pradhyumansinh9849]

You can fix this issue by adding removeClippedSubviews={false} to your FlatList component. This prevents the components from being unmounted when they're outside the viewport, which resolves the visibility/rendering issue you're experiencing.

Example:

<FlatList
  data={yourData}
  renderItem={renderItem}
  removeClippedSubviews={false}
/>

Hope this helps!