FlatList with sticky ListHeaderComponent, stickyHeaderIndices, onViewableItemsChanged gives incorrect viewableItems #31109
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- C++
- Estrellas
- 127k
- Forks
- 25.3k
- Merge medio
- 1 d 23 h
- PR fusionados (30 d)
- 4
Descripción
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
- drag the list so that the 2nd item is the first in the list
- observe the viewableItems
Snack, code example, screenshot, or link to a repository
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza revisando el issue enlazado #31109 y reproduciendo el ejemplo de Snack con FlatList, stickyHeaderIndices, ListHeaderComponent y viewabilityConfigCallbackPairs. Verifica el comportamiento al desplazarte para que el segundo elemento sea el primero; se considera completado cuando onViewableItemsChanged informa únicamente de los elementos que realmente están visibles debajo del encabezado fijo.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, react-native
- Área
- mobile
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 42/100