react / react/react-native

SectionList shows inconsistent SeparatorComponent behaviour when using inverted

Offen
#53,749 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

@Simek arbeitet bereits daran.

Seit 16.9.2025.

Component: SectionList Issue: Author Provided Repro Resolution: PR Submitted
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Description

I found that when SectionList is used inverted on mobile, the SectionSeparatorComponent is not rendered correctly. It renders in between items of the same section - while it shouldn't - and it renders double sometimes there as well.

I found that this happens on both Android and iOS with the latest SDKs and frameworks.
On web it appears not to be an issue.

Steps to reproduce

Here is an expo snack that shows the behavior;
https://snack.expo.dev/@natuurhuisje-dev/sectionlist-inverted-separatorcomponent-inconsistency

React Native Version

tested with issue on both 0.79.5 and 0.81

Affected Platforms

Runtime - iOS, Runtime - Android

Output of npx @react-native-community/cli info
I've got an Expo snack, hope this is sufficient.
Stacktrace or Logs
I've got an Expo snack, hope this is sufficient.
MANDATORY Reproducer

https://snack.expo.dev/@natuurhuisje-dev/sectionlist-inverted-separatorcomponent-inconsistency

Screenshots and Videos

No response

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

Führe den verlinkten Expo Snack aus und vergleiche das Verhalten von inverted SectionList auf Android und iOS, mit Fokus auf die Platzierung von SectionSeparatorComponent und die doppelte Darstellung. Lies den verlinkten Pull Request #53799 zum aktuellen Stand der Arbeit. Fertig bedeutet, dass Separatoren nicht zwischen Elementen derselben Section gerendert und nicht dupliziert werden.

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
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

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