Skip to content
This repository has been archived by the owner on Nov 27, 2022. It is now read-only.

Tab View with Flatlist not shown until scrolling content #1278

Open
2 of 5 tasks
iKoru opened this issue Oct 13, 2021 · 5 comments
Open
2 of 5 tasks

Tab View with Flatlist not shown until scrolling content #1278

iKoru opened this issue Oct 13, 2021 · 5 comments

Comments

@iKoru
Copy link

iKoru commented Oct 13, 2021

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)

screen-capture.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

  • Android
  • 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
@iKoru iKoru added the bug label Oct 13, 2021
@github-actions
Copy link

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
Copy link
Author

iKoru commented Oct 13, 2021

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

@github-actions
Copy link

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
Copy link
Author

iKoru commented Oct 15, 2021

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
Copy link

hirbod commented Oct 26, 2021

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants