Sticky Headers not pushing each other up/down when scrolling

The problem

Enabling sticky headers on a SectionList enable the push up/down functionality seen on iOS. On RNW however, the headers only stack/stick to the top instead of pushing each other out of the way when scrolling up, or push the previous one down when scrolling down.

How to reproduce

Simplified test case: https://codesandbox.io/s/objective-kalam-ilg38

Steps to reproduce:

  1. Create a SectionList with data that has multiple headers
  2. Enable stickySectionHeadersEnabled
  3. Create section headers via renderSectionHeader
  4. Scroll the list

Expected behavior

The sticky headers should push each other either up if scrolling up or down if scrolling down.

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.13.3
  • React (version): 16.13.1
  • Browser: Chrome 84.0.4147.105

1 possible answer(s) on “Sticky Headers not pushing each other up/down when scrolling

  1. Probably not, because it will add to bundle size and I don’t want to have to maintain it when there is a native implementation in browsers. But if you want to write a PR you are welcome to do so