Section headers don't stick properly when section data is changed

[adithyamenu]

https://user-images.githubusercontent.com/98796522/174580517-0f017b94-1050-4712-bac1-c782dadb89ec.MP4

Description

When we change the sections data provided to a sectionList component, the expected behaviour is for the sectionList component to recalculate and update the sticking positions of the section headers. But, when section data is changed, the section headers don't work properly.

Version

0.64.3

Output of npx react-native info

info Fetching system and libraries information... System: OS: macOS 12.2.1 CPU: (10) arm64 Apple M1 Pro Memory: 77.31 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.19.1 - ~/.nodenv/versions/14.19.1/bin/node Yarn: 1.22.18 - ~/.yarn/bin/yarn npm: 6.14.16 - ~/.nodenv/versions/14.19.1/bin/npm Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /Users/adithya_v/.rbenv/shims/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: Not Found IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8092744 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.3 => 0.64.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

1. Create a sectionList with sticky section headers
2. The sections provided to the sectionList could have variable number of items
3. From the sections provided to the sectionList, remove 1 or 2 sections. ["section1", "section2","section3"] => ["section1", "section3"]
4. Section headers will disappear, and will reappear if we scroll up or down

Reproduced on Pixel6 Pro, iPhone8

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@adithyamenu/bad-ramen

[dmytrorykun]

Hello @adithyamenu, if I understand you correctly, you expect the List to automatically scroll to some section position after its content is changed. That's not how it actually behaves. The List tries to preserve its content offset in this case. You can try to achieve desired behaviour using this method https://reactnative.dev/docs/sectionlist#scrolltolocation.

[github-actions[bot]]

We are using GitHub issues exclusively to track bugs in React Native. GitHub may not be the ideal place to ask a question, but you can try asking over on Stack Overflow, or on Reactiflux.

[adithyamenu]

@dmitryrykun

Thanks for your reply. Actually the issue is something else.

The section list's headers are not sticky anymore after the list data is updated. The headers aren't always shown at the top of the list.

Give it a try, I have attached a link to the expo snack demonstrating this bug.

[dmytrorykun]

@adithyamenu thank you for the clarification!

[adithyamenu]

@dmitryrykun

I have updated the description with a recording of the issue. just in case, I am gonna share it here.

https://user-images.githubusercontent.com/98796522/174581066-e9195915-6451-4dfc-b92a-84fd1d680966.MP4

In the video you shared, it happens at 00:05. The "Section 3" header isn't fully sticky anymore. I think the expo I shared was not easy to understand and was not in sync with the instructions I had included in this issue, so I have updated the snack too.

[dmytrorykun]

@adithyamenu great, thank you!

[Marcoo09]

Hi @dmytrorykun @adithyamenu , I'd like to contribute on this issue if it still happens. I'm not able to reproduce the bug at least on the expo example and rn tester app.

[Yurii-Lutsyk]

I have the same issue, when i have a lot of items, and scrolled down for a long time and list updates, the header wasn't sticky for a while

[adegtjar]

Faced the same issue, when working with a list that contains a lot of items. If the list-data was updated, the header looses it's sticky ability.

[hengkx]

Sticky incorrect headers when processing lists containing a large number of items

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.