FlatList with sticky ListHeaderComponent, stickyHeaderIndices, onViewableItemsChanged gives incorrect viewableItems #31109

Description

exactly this issue: https://github.com/facebook/react-native/issues/31109. this is still a problem.

using FlatList with stickyHeaderIndices, viewabilityConfigCallbackPairs, and ListHeaderComponent, when scrolling the list onViewableItemsChanged is called. the viewableItems includes items that are behind (not viewable) the sticky list header.

const viewabilityConfig = {
  minimumViewTime: 1000,
  waitForInteraction: true,
  itemVisiblePercentThreshold: 100,
}

const onViewableItemsChanged = React.useCallback(
  ({ viewableItems, changed }) => {
    console.log('viewableItems', viewableItems)
    console.log('changed', changed)
  },
  []
)

const viewabilityConfigCallbackPairs = React.useRef([
  { viewabilityConfig, onViewableItemsChanged },
])

<FlatList
  stickyHeaderIndices={[0]}
  viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
  ListHeaderComponent={() => <MyListHeader/>}
/>

React Native Version

0.71.7

Output of npx react-native info

System:
OS: macOS 12.6
CPU: (10) arm64 Apple M1 Pro
Memory: 509.05 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.18.1 - ~/.asdf/installs/nodejs/16.18.1/bin/node
Yarn: 1.22.19 - ~/.asdf/installs/nodejs/16.18.1/bin/yarn
npm: 8.19.2 - ~/.asdf/plugins/nodejs/shims/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.3 - /Users/ty/.asdf/shims/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
Languages:
Java: 11.0.17 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.7 => 0.71.7
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

1. drag the list so that the 2nd item is the first in the list
2. observe the viewableItems

Snack, code example, screenshot, or link to a repository

https://snack.expo.io/@tantommy/intelligent-churros

Beginne mit der Durchsicht des verlinkten Issues #31109 und reproduziere das Snack-Beispiel mit FlatList, stickyHeaderIndices, ListHeaderComponent und viewabilityConfigCallbackPairs. Überprüfe das Verhalten beim Scrollen, sodass das zweite Element an erster Stelle steht; abgeschlossen ist die Aufgabe, wenn onViewableItemsChanged nur Elemente meldet, die tatsächlich unterhalb des Sticky-Headers sichtbar sind.