react / react/react-native

Flatlist with initialScrollIndex will cause missing items

Abierto
#54,409 21 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Component: FlatList Needs: Attention Needs: Repro
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

Description

If i have the initialScrollIndex set and the list is not bigger than the view (they all fit) then the items before initialScrollIndex will not render , it only works if i set disableVirtualization={true} but the order on how they are rendered doesnt seem right , for example if i have 8 items (and they all fit in the view) and i have set initialScrollIndex to 6th item with disableVirtualization={true} it will render 6 - 7 item first then the 0 to 5, if i dont disable it then it will only render item 6 and 7, if i have more items than they can fit in the view then it seems to work as expected.

Steps to reproduce

Set initialScrollIndex to any item excluding first one on a list that fits to the view.

React Native Version

0.81.5

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info
expo  54.0.22
Stacktrace or Logs
nothing to show
MANDATORY Reproducer

/

Screenshots and Videos

No response

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza reproduciendo el caso de Android descrito: una React Native FlatList cuyos elementos caben en la vista y cuyo initialScrollIndex no es cero. Compara el renderizado con y sin disableVirtualization; se considera terminado cuando los elementos anteriores al índice inicial se renderizan en el orden correcto sin desactivar la virtualización.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react-native
Área
mobile
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Tranquilo
Claridad
Necesita aclaración
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.