(feature) CSS env(safe-area-inset-*)

[efoken]

Describe the feature request

Would be cool if the CSS env() function can be used, because this would completely replace the need for a SafeAreaView component on the Native side and at the same time this would even work in iOS Web.

Example:

{
 paddingTop: 'env(safe-area-inset-top)',
 paddingRight: 'env(safe-area-inset-right)',
 paddingBottom: 'env(safe-area-inset-bottom)',
 paddingLeft: 'env(safe-area-inset-left)',
}

https://developer.mozilla.org/en-US/docs/Web/CSS/env

[necolas]

AFAIK SafeAreaView is iOS-only, and our main use-case internally is Android, so this will be low priority. Plus, SafeAreaView looks to be a wrapper with layout on iOS, which could mean that it can't polyfill env(safe-area-*) style props without altering layout and tree structure.

[efoken]

The thing is that SafeAreaView from React Native is iOS only, yes. But the common react-native-safe-area-context library also has support for Android, I don't know if it makes sense though… but the library contains a useSafeAreaInsets hook.

That said the CSS env(safe-area-inset-*) would require some changes in React Native first and maybe ship a useSafeArea hook or something, so that it is not required to altering the tree as you mentioned.

EDIT: Also take a look at Unistyles, which also brings SafeArea insets inside StyleSheet: https://reactnativeunistyles.vercel.app/reference/dimensions/#insets