I am using Ionic 6 with Capacitor 5 and I am unable to change the status bar background color on iOS. I have tried using the capacitor status bar plugin, but it seems to not work in the newer versions of Ionic.
I have searched the Ionic community and Google, but I have not been able to find a solution. Is it actually discontinued since iOS 13 version?
I’m curious about what you found when you googled “change ios status bar color”, where it says that changing the iOS status bar background color is possible.
As far as I know, changing the status bar background color on iOS has not been possible since iOS 7 as Apple made the status bar background color transparent. They only allow to change the color of the text, but not the background as it’s always transparent.
I could be wrong…lol. I guess a lot of the stuff just mentions the UIStatusBarStyle.
Here are two possible solutions. I have no idea if they work. Someone else more familiar with iOS might be able to help. EDIT: Oops, didn’t realize it was you @julio-ionic asking. Thought it was the OP You would definitely know better!
Those solutions wrap the app in a navigation controller which has a navigation bar and you change the color of the navigation bar, not the status bar, then your app will always have a navigation bar on top, so you’ll have to remove your html header if you had one.
Or add a view with the size of the status bar and color that view, that’s what the Cordova plugin does and it brings a lot of trouble, specially when rotating or presenting view controllers on top (like camera or browser plugins).
In my opinion, the best way of coloring the top of your app is by using CSS since the status bar is transparent, Apple provides the safe area insets which tell you where the status bar is located and help you with the CSS coloring.
Yes, many things went wrong. Lastly, I changed the body color, and it works, but the final result didn’t turn out well; it looks very strange.
The question that remains is, how are other frameworks like React Native or Flutter dealing with this situation? Can they also change the status bar color? It’s complicated.
I even considered using the Cordova status bar because it seems to still be working. However, since I’m migrating everything to Capacitor and moving away from Cordova, going back to the Cordova plugin is a bit complicated. Anyway, I’ll keep trying and researching.
I know the status bar (background color) is just a small detail, but it adds a certain charm to the app.
Hey guys, I applied a background to the header, and it worked, but it wasn’t well-received by the team because it created an odd layout for the app. Honestly, I don’t know what to do, it’s a bit frustrating; it was supposed to be simple, , but it never is. Thanks to everyone who contributes with ideas, thank you very much.
Haha, yes, of course!
Our layout consists of a white background header with a green status bar. (Android looks beautiful, lol).
However, on iOS, there’s a plugin limitation that doesn’t allow adding a background color only to the status bar, and that’s tough.
As a result, it looks odd on phones with an infinity display, as the green header and status bar merge, making it appear huge. The problem is that the header in our app behaves differently on each screen because it was created as a component, encapsulating the ion-header, and so on.
I am not familiar enough with all iOS phones. Is the status bar different heights depending on the model? Curious if you could just add your own “stripe” across the top above your ion-header to act as the background of the status bar.