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

Bắt đầu bằng cách xem xét issue #31109 được liên kết và tái hiện ví dụ Snack với FlatList, stickyHeaderIndices, ListHeaderComponent và viewabilityConfigCallbackPairs. Xác minh hành vi khi cuộn để mục thứ hai là mục đầu tiên; được xem là hoàn thành khi onViewableItemsChanged chỉ báo cáo các mục thực sự hiển thị bên dưới sticky header.