How do I hide the ListHeaderComponent during scroll in a React Native flatlist

user_17264015 0
Viewed 1121

I am trying to render a flatlist with a header. The header needs to be stuck at the top of the flatlist but needs to hide when the user scrolls down. When the user starts scrolling up again the header needs to be displayed. I'm able to get the header to stick using stickyHeaderIndices. However, StickyHeaderHiddenOnScroll does not seem to work at all. From what I understand, StickyHeaderComponent is used in a scrollView instead of ListHeaderComponent but that doesn't seem to render any header in the case of a flatlist.

<FlatList               
                        data={selectedStream} 
                        keyExtractor={keyExtractor}    
                        extraData = {selectedGroup}      
                        renderItem={renderItem}      
                        stickyHeaderIndices={[0]}
                        stickyHeaderHiddenOnScroll={true}
                        ListHeaderComponent={()=> <ComponentThatNeedsToBeStuckToTop/>}
                        />
react-native-flatlist react-native reactjs scrollview javascript
1 Answers

You need to use the onScroll function to check if the Flatlist was scrolled or not

  const onScroll = useCallback(({ nativeEvent }) => {
    if (nativeEvent.contentOffset.y > 40) setHeaderTitle('The header title');
    if (nativeEvent.contentOffset.y <= 40) setHeaderTitle(' ');
  }, []);

In the Flatlist:

  <FlatList
   data={data}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
      scrollEventThrottle={16}
      onScroll={onScroll}
      ListHeaderComponent={renderHeader}
      ListFooterComponent={renderFooter}
    />
user_128124640
Related