Fix: the tab header not sync with scene swipe when header is long

satya164 / react-native-tab-view

A cross-platform Tab View component for React Native

MIT License

5.14k stars 1.07k forks source link

Fix: the tab header not sync with scene swipe when header is long #1402

Closed gongdao123 closed 1 year ago

gongdao123 commented 1 year ago

Please provide enough information so that others can review your pull request:

Motivation

The Tab Header is utilizing FlatList for rendering propose.
FlatList will NOT try to render ALL of the content if the content is long for performant reasons.
With the previous code, the tab header moves ONLY when all of the header content is rendered. These cause the header will not sync with the scene swipe when the header is long

output

Test plan

After the patch, the tab header can follow the screen swipe, with no performance drawback. output1

Code formatting

Look around. Match the style of the rest of the codebase. Run yarn lint --fix before committing.

github-actions[bot] commented 1 year ago

Hey gongdao123! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.

okwasniewski commented 1 year ago

Hey, thanks for your PR. Unfortunately I don't think that using setTimeout won't have any performance drawback. Therefore I think that this should be solved differently. Can you open an issue for this I will take a look into this.

gongdao123 commented 1 year ago

Hey, thanks for your PR. Unfortunately I don't think that using setTimeout won't have any performance drawback. Therefore I think that this should be solved differently. Can you open an issue for this I will take a look into this.

Thx for your reply, I've created issue #1405.

Just in case. Want to clarify here that the clearTimeout and setTimeout are very basic debounce mechanisms to make sure the setTabWidths will ONLY trigger once in one batch, which actually can reduce performance drawback?

okwasniewski commented 1 year ago

Closing this PR, since I've implemented a proper fix for this here: #1409