SafeAreaView is not implemented

[hugo]

Do you want to request a feature or report a bug?
Request a feature

What is the current behavior?
SafeAreaView is an alias of View

If the current behavior is a bug, please provide the steps to reproduce and
if a minimal demo of the problem via Glitch or similar (template:
https://glitch.com/edit/#!/react-native-web-playground).

N/A

What is the expected behavior?
SafeAreaView would work on Web as it does on Native. That is, it would be possible to use it to prevent the sensor housing, home indicator, corners, etc. from occluding UI.

Environment (include versions). Did this work in previous versions?

• OS: iOS 11.x
• Device: iPhone X
• Browser: Safari, Chrome, etc.
• React Native for Web (version): 0.5.0
• React (version): 16.2

---

I have a rough version of this that I built for my own use. I'm sure that it is not robust enough for inclusion in this project as is, but I would happy do the work to make it so given sufficient guidance.

[necolas]

Are you saying that Safari doesn't prevent OS chrome from covering the web UI by default?

[hugo]

No, it’s physical protrusions - such as the iPhone X “notch” - covering the UI. I can’t speak to what the situation is on Android devices that also have sensor housing screen cut outs, but I would expect them to require similar workarounds.

Actually, it’s OS chrome as well. The iOS Home Indicator covers UI sometimes.

[necolas]

This documentation claims otherwise:

Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing.

[hugo]

Somewhat misleading.

You can observe the issue with a minimal demo.

Safari without viewport-fit=cover:

Safari with viewport-fit=cover:

---

You can see this conflict between app UI and browser chrome when viewing a Medium.com link in the Twitter in-app browser. The Open in App link is hidden by browser chrome until you scroll, and even then it's still partially underneath the home indicator.