I have a flatlist which hides the header on scroll down and shows it again on scroll up. However, I am experiencing a strange behaviour when using the refresh control or dragging further than the list end (bouncy behaviour iOS react native - cannot be deactivated due to refresh control). Therefore I only want to trigger the onscroll event if the current scroll is neither past the list length nor below the list start (so outside its normal area). I am using an animated event and already tried to only call it conditionally if the previous check was passed (but cannot pass the event as expected:
(01) Edge check function
/**
* @function (01) Check if the user scrolled further up (refresh)
* (02) Check if the user scrolled further down than the complete height
* (03) Return true since in normal area
*/
const edgeCheck = (nativeEvent) => {
const offsetY = nativeEvent.contentOffset.y
if (offsetY <= 0) return false
const end = (nativeEvent.layoutMeasurement.height + offsetY) - nativeEvent.contentSize.height;
if (end <= 0 ) return false
return true;
}
(02) animated event scroll handler
const handleScroll = Animated.event(
[
{
nativeEvent: {
contentOffset: {y: scrollY.current},
},
},
],
{
useNativeDriver: true,
listener: event => {
//Maybe some conditional logic here
}
},
);
(03) Flatlist
<Animated.FlatList
contentContainerStyle={{paddingTop: headerHeight}}
refreshControl={
<RefreshControl
progressViewOffset={headerHeight}
onRefresh={() => loadFeed(true)}
refreshing={isRefreshing}
colors={['#ffffff']}
tintColor={'#ffffff'}
/>}
scrollEventThrottle={16}
onScroll={({nativeEvent}) => {
if (edgeCheck(nativeEvent)) handleScroll(nativeEvent); //native event is not passed on to handle scroll function
}}
data={feedData}
// more irrelevant stuff ...
/>
Alternatively I tried to add some conditional logic into the animated event, however, no success so far here. In addition since this feature my screen flashes white for a very short time prior to rendering this view - any experiences in this context with such behaviour (if not I can live with it)
Any help is highly appreciated
The solution which worked for me
onScroll={({nativeEvent}) => {
if (!edgeCheck(nativeEvent)) scrollY.current.setValue(nativeEvent.contentOffset.y);
}}