如何在 React Native 平面列表中滚动期间隐藏 ListHeaderComponent

Question

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/>}
                        />

Answer 1

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}
    />

Answer 2

Checkout this video tutorial you will get what you want to do -

https://youtu.be/nayqNApYp-I