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

まず、リンクされている issue #31109 を確認し、FlatList、stickyHeaderIndices、ListHeaderComponent、viewabilityConfigCallbackPairs を使用した Snack の例を再現します。2 番目の項目が先頭になるようにスクロール中の動作を確認します。完了条件は、onViewableItemsChanged が sticky header の下で実際に表示されている項目だけを報告することです。