how to know when flatlist goes out of viewport in react native?

Question

I have a screen which contains a list of items that is being shown using flatlist, th flatlist is as below :

  <FlatList
        scrollEnabled
        removeClippedSubviews
        windowSize={21}
        stickySectionHeadersEnabled={false}
        showsVerticalScrollIndicator={false}
        keyExtractor={keyExtractor}
        getItemLayout={getItemLayoutFun}
        ListHeaderComponent={listFTUEHeader}
        contentContainerStyle={{ flexGrow: 1 }}
        data={DISCOVERY_SECTION_LIST}
        renderItem={renderItem}
        onRefresh={onRefresh}
        refreshing={false}
        viewabilityConfig={viewabilityConfig}
        ListFooterComponent={EndOfListText}
        onScroll={onScroll}
      />

I want to detect when the ListHeaderComponent is out of viewport or item[1] is at the top of the screen, accordingly I want to add a state.

I have read the documentation but could not find a way, hopefully would get any leads from here.

Any leads would be helpful, thank you in advance.

Answer 1

I'm in the exact same situation, so far i only could find a solution to check, if a specific item is in the viewport, but nothing about the ListHeaderComponent.

FlatList has a prop called onViewableItemsChanged which you can easily implement. When you scroll a FlatList, the items showing on the FlatList change. Then, this function is called, telling you what current viewableItems are and what changed items are.

See also this article for further explanation.

Maybe this helps you to get closer to a solution which works for you?!