Conditional on scroll event of Flatlist in React Native

279 Views Asked by At

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);
}}
0

There are 0 best solutions below