frzkn / rn-collapsible-header

Repository for the Medium Article.

Home Page:https://medium.com/swlh/making-a-collapsible-sticky-header-animations-with-react-native-6ad7763875c3

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Excess scrolling when snapping to offset (handleSnap)

smagr173 opened this issue · comments

Within the handleSnap function there is scrollToOffset call
The amount to add or subtract from the current offset is a fixed number. This can result in a disproportionate amount of automatic scrolling during the snap. If the header bar has already been partially hidden then there will always be excess. Hence, the amount already hidden should be considered. Here is my solution
const halfHeader = headerHeight / 2;
const difference = halfHeader + translateYNumber.current;
getCloser(translateYNumber.current, -headerHeight / 2, 0) ===
-headerHeight / 2
? offsetY + difference
: offsetY-(halfHeader-difference)
});