[SOLVED] How to control iOS status bar background color in iOS webview

How to control iOS status bar background color in iOS webview

We are developing a react app that is going to be used on an iOS application via iOS webview. The problem is that iOS status bar is set to transparent by the app, so when user scrolls the page, the page content is shown below the status bar. Is there any way that we can control that section from our react app not the iOS app?

We tried to set status bar color by apple meta tags but it didn't work.

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Solution

I don’t know if this trick works or not but you can make a fake status bar by making a fixed white space in the negative part of your page body, eg:

.ios-status-bar:before {
    content: "";
    position: fixed;
    z-index: 10000;
    top: -100px;
    height: 100px;
    right: 0;
    left: 0;
    background-color: #fff;
}

And assign it to body when user device is iOS like this:

const isIOS = navigator.userAgent.match(/OS/i) != null;
if (isIOS)
  document.body.classList.add('ios-status-bar');