Tab View with Flatlist not shown until scrolling content

[iKoru]

Current behavior

When I switched tab using swipe, or tab button, the content is (Flatlist) not shown until scrolled vertically.

demo video : watch since 20s. issue occurs randomly in second or third tab. (third tab in this video)

https://user-images.githubusercontent.com/7664952/137056369-ff14755f-95c3-4149-9ea5-c4868a57f834.mp4

Expected behavior

The content should be shown immediately after switched tab index.

Reproduction

https://snack.expo.dev/@ikoru/react-native-tab-view---not-shows-flatlist-until-scroll

Platform

• [X] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view	3.1.1
react-native-pager-view	5.0.12
react-native	0.63.4
expo	42.0.4
node	12
npm or yarn	yarn

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-pager-view (found: 5.0.12, latest: 5.4.7)
• react-native (found: 0.63.4, latest: 0.66.0)
• expo (found: 42.0.0, latest: 42.0.4)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[iKoru]

The version 5.0.12 is the latest supported version for expo 42.0.4. (same as react-native)

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-pager-view (found: 5.0.12, latest: 5.4.7)
• react-native (found: 0.63.4, latest: 0.66.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[iKoru]

After some trials, I found that this issue occurs only when there is any value of "paddingHorizontal", "paddingLeft", "paddingRight", "marginHorizontal", "marginLeft", or "marginRight" on FlatList(or any component in the Scene containing FlatList) with props "removeClippedSubviews=true". It's really weird, but it does. Please solve this bug..

[hirbod]

This is not caused by this library, the prop removeClippedSubview is just buggy. This issue is also happening on simple tabs without animated tab view.

https://reactnative.dev/docs/optimizing-flatlist-configuration#removeclippedsubviews

Pros: This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.

Cons: Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached