I'm building a web-app using ReactJS and I also want it to be viweable onn mobile. Is there a component / workaround for handling iPhone's "safe area" view at the very top of the screen (e.g. dynamic island)? currently that safe area is just black, but i want it to have a set color

i tried including a and setting it to a background color

CodePudding user response：

ReactJS relies on browser rendering engine (runs on top of the browser) while React Native has "native" performance as it interacts directly with android/ios native components (JavaScript threads). read here

Therefore ReactJS has no component to handle "safe area" display. Because it has been resolved by the browser. If you want to color the SafeAreaView (headerbar in the browser) you only need to add the following html code in tag.

<meta name="theme-color" content="#999999" />