[issue] onViewableItemsChanged not firing with/after new data appended to start

[niek-hdas]

I have a header component that displays accurate data related to the current most prominent item in view.

It seems like onViewableItemsChanged is not firing when new data is appended at the beginning of the list. Basically it goes to index 0 and then is not firing anymore.

For your idea my implementation:

<LegendList
  refreshControl={
    <RefreshControl
      onRefresh={() => refetchCalendar()}
      refreshing={isRefetchingCalendar}
    />
  }
  data={ungroupedAndSortedCalendar}
  keyExtractor={(item) => {
    return item.startDate;
  }}
  estimatedItemSize={700}
  initialScrollIndex={Math.floor(calendar.pages[0].length / 2)}
  onStartReached={() => {
    if (!isFetchingPreviousPage) {
      fetchPreviousPage();
    }
  }}
  onEndReached={() => {
    if (!isFetchingNextPage) {
      fetchNextPage();
    }
  }}
  onViewableItemsChanged={({ viewableItems, changed }) => {
    if (!viewableItems?.length) {
      return;
    }

    const wait10ms = new Promise((resolve) =>
      setTimeout(resolve, 10)
    );

    wait10ms.then(() => {
      setMonthInView(viewableItems[0].item.title);
    });
  }}
  viewabilityConfig={{
    itemVisiblePercentThreshold: 50,
    waitForInteraction: false,
  }}
  recycleItems
  waitForInitialLayout
  maintainVisibleContentPosition
  renderItem={({ item }: { item: TwelveMonthCalendar[0] }) => {
    return (
      <TwelveMonthCalendarItem
        calendar={item.calendar}
        today={today}
      />
    );
  }}
/>