AnimatedFlashList Header component animation bug

[saidbadalov1]

const scrollY = useRef(new Animated.Value(0)).current

const diffClamp = Animated.diffClamp(scrollY, 0, headerHeight + insets.top)

 const headerY = diffClamp.interpolate({
inputRange: [0, headerHeight + insets.top],
outputRange: [0, -(headerHeight + insets.top)],
extrapolate: 'clamp',
})

<View className="flex-1 relative">
  <Animated.View
    style={{
      paddingTop: insets.top,
      transform: [
        {
          translateY: headerY,
        },
      ],
    }}
    className="absolute bg-Primary-white top-0 z-10"
  >
    {HeaderComponent()}
  </Animated.View>

  <SearchCardGrid
    headerHeight={insets.top + headerHeight}
    listEmptyComponent={renderEmptyList()}
    headerComponent={renderListHeader()}
    allPostings={allPostingsData.response?.postings}
    onEndReach={onEndReach}
    isReachedEnd={isReachedEnd}
    onScroll={Animated.event(
      [
        {
          nativeEvent: { contentOffset: { y: scrollY } },
        },
      ],
      { useNativeDriver: false },
    )}
    refreshControl={
      <RefreshControl
        progressViewOffset={insets.top + headerHeight}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    }
  />
</View>

my SearchCardGrid component

<AnimatedFlashList
    onScroll={onScroll}
    ref={ref}
    refreshControl={refreshControl}
    ListHeaderComponent={headerComponent}
    showsVerticalScrollIndicator={false}
    onEndReachedThreshold={0.6} // Adjusted for FlashList, which expects a value between 0 and 1
    onEndReached={onEndReach}
    decelerationRate={0.6}
    contentContainerStyle={{
      paddingTop: headerHeight,
    }}
    data={isPostingLoading ? [] : allPostings}
    ListEmptyComponent={
      isPostingLoading
        ? () => <SearchCardGridSkeletons />
        : () => listEmptyComponent
    }
    renderItem={({ item, index }) => renderItems(item, index)}
    keyExtractor={(item, index) => index.toString()}
    numColumns={1} // Note: FlashList supports numColumns directly for multi-column layouts
    ListFooterComponent={
      isReachedEnd ? <SearchCardGridSkeletons /> : footerComponent
    }
    scrollEnabled={!disableScroll}
    scrollEventThrottle={16}
    estimatedItemSize={200} // Required for FlashList. It should be an average size of your items for better performance
  />

When I make the same animation with flatlist, there is no problem, but when I scroll in flashlist, the header opens and closes constantly and my animation does not work properly. When I scroll down, the header closes, but when I scroll up, the header opens and closes again.

[shovel-kun]

@saidbadalov1 Try creating your own AnimatedFlashList component

const AnimatedFlashList = Animated.createAnimatedComponent<FlashListProps<Item>>(FlashList);