SectionList with sticky headers scrolls jumpy when virtualization is enabled

[a-golovanov]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
Memory: 201.34 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
Yarn: 1.10.1 - ~/.nvm/versions/node/v8.12.0/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 22.0.1, 23.0.1, 23.0.3, 25.0.0, 25.0.1, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
API Levels: 22, 23, 25, 26, 27, 28
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5014246
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
@storybook/react-native: ^4.0.0-alpha.21 => 4.0.0-alpha.23
react: 16.5.0 => 16.5.0
react-native: ^0.57.1 => 0.57.1

Description

After upgrading from RN 54 to 57 scrolling of section list becomes jumpy when virtualization kicks in, see video. We traced this issue to change list e0c7363, reverting the change locally fixes the issue.

Reproducible Demo

Create a SectionList with sticky headers, populate it with a long items list with multiple sections, scroll down until virtualization kicks in, watch items jump all other the place (there should be a few sections present in the virtualized space.

[a-golovanov]

Relates to #21198

[danilobuerger]

Duplicate of #20956

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[timothystewart6]

Hey, I was running into this too and found a workaround. I ended up setting a few additional properties, these in particular:

     initialNumToRender={50}
     maxToRenderPerBatch={50}
     windowSize={41}

I opted out of RN's defaults (because I am dealing with a large list) and this seems to fix the headers from jumping all over when scrolling. Your mileage may vary.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.