Skip to content

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

@jumantet

Description

@jumantet

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementRequires extension or creation of new React Native API

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions