SectionList shows inconsistent SeparatorComponent behaviour when using inverted
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Run the linked Expo Snack and compare inverted SectionList behavior on Android and iOS, focusing on SectionSeparatorComponent placement and duplicate rendering. Read linked pull request #53799 for the current work. Done means separators are not rendered between items in the same section and are not duplicated.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100