search

PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native
MIT License
834 stars 162 forks source link

Very small movement in header on iOS #110

Closed alexpchin closed 3 years ago

alexpchin commented 3 years ago

When you pull down, and the content snaps back to the top for the first time, it moves the header upwards by about 1 or 2 px. The next time you pull down, the header moves very slightly.

Using snapThreshold of 0.5. Please see the video.

simulator1.mov.zip

andreialecu commented 3 years ago

This is actually on purpose because of a weird interaction between the wrapper horizontal scrolling container (tab switcher) and the inner vertical ScrollView.

If the inner scrollview rests at the top (y === 0), you will not be able to pull to refresh.

So we can't allow it to go to 0, but to y: 1 instead.

Try changing this line: https://github.com/PedroBern/react-native-collapsible-tab-view/blob/b9332342e1ce95a984cc95f1ba7e631dbbbbc074/src/hooks.tsx#L139

To:

paddingTop: IS_IOS ? 1 : headerHeight + tabBarHeight,

(you can edit it in node_modules directly)

andreialecu commented 3 years ago

I did some brief testing and changing it seems to work.

If you confirm, we can merge #112

alexpchin commented 3 years ago

@andreialecu I'll check now!

alexpchin commented 3 years ago

On4.0.0-rc.2 I am still seeing a very small 1px movement which makes the tabs not as solid. I will re-open and continue to look at this.

alexpchin commented 3 years ago

I'm now not seeing this anymore since upgrading > rc.2. I will close.