Top status bar ios is black
When we boot the app in standalone mode, we see that the status bar has turned white with black text, which is the behavior for the default setting with this background and theme color combination.
Top status bar ios is black install#
On iOS, we can navigate to the app in Safari and install it on the home screen. Now starting an Android, we can view the app and see the status bar area turn the React blue color, which matches the theme color. If your status bar or any other value from your manifest on iOS isn't updating correctly, you may try a new port to see if that fixes the issue for development. By just changing the port number, it appears to iOS like a brand new application. I've been testing this on the iPhone already, and the iOS browser really aggressively caches the values for the status bar.
I'm actually going to launch a second server here on another port. For this example, I know that default looks the best, but you'll have to experiment for your application, because there are some interesting intersections between the theme color, background color, and the app status bar style. On iOS we only have a limited status bar customization, so we have to add a meta tag called apple-mobile-web-app-status-bar-style, which can only take three values - default, black, or black translucent. FakeAppBar wont have an effect on the status bar style if it doesnt sit at the top part of the screen.
In index.html, we can find and change the theme color there, too. <1> Put SizedBox above FakeAppBar push our widget away from the status bar area make it no longer affect the status bar style.Let's set a theme color to the React Logo blue color, so we can see what that does as well. There we're going to make sure that the background color is white. To disable view-by-view status bar control, you'll need to set the View controller-based status bar appearance property in ist. Then you need to take charge and actually set the new global status bar style. Instructor: The status bar of a PWA installed as a standalone app may not look the way you want it to. First, you need to tell iOS that you don't want to set the status bar appearance on a view-by-view basis.