react / react/react-native

FlatList is not rendering the complete list of items.

Offen
#39,421 36 Kommentare 7 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Component: FlatList Needs: Repro Needs: Triage :mag:
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Description

It seems that there is a bug on the react-native flatlist while trying to render a list of items. Sometimes only some of the list items are displayed.
When there are interactions such as state changes, there is an update in the list and all the list items are displayed properly.

React Native Version

0.72.4

Output of npx react-native info

System:
Binaries:
Node:
version: 16.20.0
Yarn:
version: 1.22.19
npm:
version: 8.19.4

SDKs:
iOS SDK:
Platforms:
- DriverKit 22.2
- iOS 16.2
- macOS 13.1
- tvOS 16.1
- watchOS 9.1
Android SDK:
API Levels:
- "23"
- "28"
- "29"
- "30"
- "31"
- "32"
- "33"
- "34"
Build Tools:
- 29.0.2
- 30.0.2
- 30.0.3
- 31.0.0
- 33.0.0
- 34.0.0

Languages:
Java:
version: 11.0.15
Ruby:
version: 2.6.10
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: 0.72.4
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

We are using a FlatList to render a List of 500-1000 items based on a dynamic response. We are updating the states based on navigations and data filter.
However sometimes in the initial load of the page the Flatlist is rendering only 5 items and it is unable to render the remaining items when scrolling down.

When there are state changes after initial load of data, there is an update in the list and all the data items are displayed properly.

Snack, screenshot, or link to a repository

Attaching an example link only for depicting the flatlist configuration we use.
https://stackoverflow.com/questions/77036267/issue-flatlist-rendering-only-few-items-in-the-list

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, das für React Native 0.72.4 beschriebene FlatList-Verhalten anhand des verlinkten Stack Overflow-Beispiels zu reproduzieren, wobei du dich auf das initiale Laden von 500–1000 dynamisch abgerufenen Elementen und das anschließende Scrollen konzentrierst. Vergleiche das initiale Rendern mit dem Verhalten nach einer Zustandsänderung; abgeschlossen ist die Aufgabe, wenn eine reproduzierbare Ursache identifiziert wurde und sichergestellt ist, dass die vollständige Liste gerendert wird, ohne dass ein Update erforderlich ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Ruhig
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.