How does Twitter Lite disable scroll-bouncing with sticky footers and hide address/tool bars during scroll on mobile browsers?

[wonathanjong]

I'm trying to create a screen with a fixed header + footer and scrollable content in-between. Similar to what Twitter and Change.org are doing here:

RPReplay_Final1613608888.mp4

RPReplay_Final1613608861.mp4

My implementation with react native web is quite simple:

This is the screen view:

And in terms of navigation, it is a Stack.Screen component inside of a Stack.Navigator.

These are my package versions:
"@react-navigation/native": "^5.0.0",
"@react-navigation/stack": "^5.0.0",
"@react-navigation/web": "~1.0.0-alpha.9",
"expo": "^39.0.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"react-native-web": "~0.13.7",

The code mostly works, however, I've run into three main problems:

1. Scroll bouncing
2. Hiding address/tool bars during scroll
3. React Navigation's automatic content overflow for web

Scroll bouncing
Here's a video of the error:

RPReplay_Final1613779498.MP4

I fixed it using this CSS solution and putting it in my index.html file: https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/

However, I still ran into the problem of the address/tool bars not hiding during scroll

Hiding address/tool bars during scroll
Here's a video of the error:
https://user-images.githubusercontent.com/16651313/108574716-60a5a100-72d5-11eb-87c9-728cbc24757a.MP4

I tried fixing this many different ways online, mostly using some combination of window.scrollTo(0,1), but they didn't work for me. (I assume this is bc in the css above i disable scrolling on the html and body and set height to 100%)

I then read online that a new version of react navigation would automatically hide the address bar on scroll and this caused the last issue I ran into: https://reactnavigation.org/blog/2020/05/16/web-support/#hide-address-bar-on-scroll

Referenced here: https://github.com/react-navigation/react-navigation/blob/16e7ac131f2ebde23cfe6dabc55a1c91327ffa56/packages/stack/src/views/Stack/CardSheet.tsx

React Navigation Content Automatic Overflow

After I upgraded from
"@react-navigation/native": "^5.0.0",
"@react-navigation/stack": "^5.0.0",
to
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8"

I found that the content in my ScrollView on web overflowed and helped hide the address bar but also made the footer no longer sticky. Plus, the scrollbounce was reintroduced.

Video:

RPReplay_Final1613772089.MP4

I would really appreciate if someone could shed some light on how Twitter Lite implements this functionality with RNW.
Thank you guys so much for your time.

[intergalacticspacehighway]

To answer the original question, twitter lite keeps the header and footer as position: fixed with header: {top: -0.5px}, footer: {bottom: 0px}
Can you try that?

Also, If you want an alternative, can you check this library? It supports sticky header and footer. https://github.com/Flipkart/recyclerlistview