ScrollView on iOS Safari prevents browser bottom bar collapse when page scroll is handled by an inner container
Is there an existing request?
- I have searched for this request
Describe the feature request
Current behavior
On iOS Safari, when a React Native Web screen uses an inner ScrollView as the main scrolling container, Safari does not collapse its bottom browser bar while scrolling.
If the same screen is changed to use normal document scrolling instead of an inner ScrollView, Safari collapses the bottom bar as expected.
This makes mobile web apps feel less native/fullscreen when built with RN Web scrolling primitives.
Expected behavior
Ideally, there would be a recommended RN Web pattern for pages that need:
- Safari browser chrome collapse
- document-level scrolling behavior
- while still using RN Web components At minimum, I would like to confirm whether this is expected browser behavior or a known RN Web limitation.
Reproduction
Minimal pattern:
- Render a full-height RN Web app shell
- Disable body scroll / let the app root fill the viewport
- Use a
ScrollViewas the main page scroll container - Open the page in iOS Safari
- Scroll down
Actual result
The inner content scrolls, but Safari keeps the bottom address bar visible.
Comparison
If I replace the inner ScrollView with a plain View and let the document itself scroll, Safari collapses the bottom bar normally.
Question
Is this expected because RN Web ScrollView uses an inner scroll container and Safari only collapses browser chrome on document viewport scroll?
If yes, is there a recommended approach for RN Web apps that need Safari fullscreen-like scrolling behavior on iOS?
Environment
- expo: ^54.0.33
- react-native-web: ^0.21.0
- react-native: 0.81.5
- react: 19.1.0
- react-dom: 19.1.0
- expo-router: ~6.0.23
- Platform: iOS Safari
Source: necolas/react-native-web