React-native-web: Sticky Headers not pushing each other up/down when scrolling

[halfmatthalfcat]

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

[necolas]

I think this is just how sticky headers work natively on the web. It's not really an issue just a difference between platforms

[halfmatthalfcat]

@necolas Is there no appetite to back/polyfill this functionality into RNW? It seems like preserving like functionality (or as much as possible) between RN and RNW is the most desirable outcome?

[necolas]

This is not a functional difference. The cost of reimplementing sticky headers just to emulate iOS would be prohibitive for bundles and runtime

[halfmatthalfcat]

If I create a PR that does emulate this functionality and is not prohibitive for bundles and runtime, would you be open to including it in RNW?

[halfmatthalfcat]

@necolas ?

[necolas]

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

[chrisdrackett]

@halfmatthalfcat I was looking into implementing this myself as well. Did you find a solution? I'm curious if there is a way to provide this via a package that sits on top of RNW?

[halfmatthalfcat]

@chrisdrackett I haven't but I'll need a solution eventually. Lmk if you start something up and I'll help contribute. I'll do the same when I get to it.

[chrisdrackett]

sounds good!