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

Commencez par examiner l’issue liée #31109 et reproduire l’exemple Snack avec FlatList, stickyHeaderIndices, ListHeaderComponent et viewabilityConfigCallbackPairs. Vérifiez le comportement lors du défilement afin que le deuxième élément soit le premier ; c’est terminé lorsque onViewableItemsChanged ne signale que les éléments réellement visibles sous l’en-tête sticky.