ScrollView on iOS Safari prevents browser bottom bar collapse when page scroll is handled by an inner container

Author: jumantetCreated Mar 16, 2026Updated Jun 8, 2026
Labelsenhancement

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:

  1. Render a full-height RN Web app shell
  2. Disable body scroll / let the app root fill the viewport
  3. Use a ScrollView as the main page scroll container
  4. Open the page in iOS Safari
  5. 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