question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Jumpy sticky section headers in SectionList

See original GitHub issue

Environment

React Native Environment Info: System: OS: macOS High Sierra 10.13.5 CPU: (8) x64 Intel® Core™ i7-4770HQ CPU @ 2.20GHz Memory: 99.75 MB / 16.00 GB Shell: 5.3 - /bin/zsh Binaries: Node: 8.12.0 - /usr/local/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 6.4.1 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3 Android SDK: API Levels: 17, 19, 23, 24, 25, 26, 27, 28 Build Tools: 23.0.1, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.3, 28.0.2, 28.0.3 System Images: android-17 | Google APIs Intel x86 Atom, android-19 | Google APIs Intel x86 Atom, android-21 | Google APIs ARM EABI v7a, android-22 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom_64, android-24 | Google APIs Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-25 | Google APIs Intel x86 Atom IDEs: Android Studio: 3.2 AI-181.5540.7.32.5056338 Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild npmPackages: react: 16.6.3 => 16.6.3 react-native: 0.57.8 => 0.57.8 npmGlobalPackages: create-react-native-app: 1.0.0 react-native-ci-tools: 1.1.0 react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7

Description

Section header jumps a lot when stickySectionHeadersEnabled prop is passed. When rendering a section with large number of items, and scrolling to it, the header keeps on jumping. Also, the scroll keeps on going backwards.

One thing to note is that, onScroll is never fired when this behaviour is happening. Although, onViewableItemsChanged keeps on firing.

Reproducible Demo

https://snack.expo.io/SJeFV7Ax4

I think this is related to #15445. But, that issue is already closed.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:4
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
danilobuergercommented, Jan 1, 2019

Possible duplicate of #20956

0reactions
shilchcommented, May 3, 2019

Bump

Read more comments on GitHub >

github_iconTop Results From Across the Web

react native - Sticky header on SectionList ReactNative
stickySectionHeadersEnabled Makes section headers stick to the top of the screen until the next one pushes it up.
Read more >
Create a custom built Sticky Header - Rey theme – Support
Access Customizer > General options > Sticky Global Sections and in the Top Global Section list, select the newly created section.
Read more >
An event for CSS position:sticky - Chrome Developers
Scrolling down - header leaves sticky mode as it reaches the bottom of the section and its bottom sentinel crosses the top of...
Read more >
SectionList with sticky headers - Expo Snack
SectionList with sticky headers. No description. Open with Expo Go. Open in editor. Need Expo? Don't have the Expo Go? Download the app...
Read more >
Common bugs in React Native ScrollView and how to fix them
It's the moving part of the ScrollView, and this is where we're applying ... style={styles.paragraph}> This is a ScrollView example HEADER.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found