1

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">

Hasan Adaminejad
  • 68
  • 7

2 Answers2

2

You cannot override the host app's status bar's color from your embedded web app.
The meta tag provided in your question will only work if the user adds your web app to his dashboard by using the "export" button in Safari after navigating to your web app's url.

Quentin Hayot
  • 7,786
  • 6
  • 45
  • 62
1

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');
Majid Amiri
  • 580
  • 4
  • 14
  • 1
    It’s the best trick I’ve ever seen in my entire life. I worked on it for 2-3 days but I couldn’t find any solutions. You saved me. Thank you. – Hasan Adaminejad Sep 06 '19 at 12:51