I'm using Capacitor with Ionic 5 and I need to change the status bar background color dynamically (different colors on different pages). On Android everything works fine (both capacitor and cordova plugins work), but on IOS I found out some limitations:
cordova-plugin-statusbar is not compatible with Capacitor for IOS
From Capacitor status bar plugin, the method setBackgroundColor is not supported for IOS
Is there any workaround to achieve my goal on IOS?
Finally, I found a solution. Status bar on IOS is transparent, so there is an easy solution to just set the background color on the body of the app, for example: document.body.style.backgroundColor = "#e34233";.
I am using "cordova-plugin-statusbar" varsion 2.4.2
I have solved this issue by this:
this.statusBar.backgroundColorByHexString('#3300000000');
You can dynamically set your status bar color
I am dropping Capacitor into a fresh Vue-CLI generated PWA. After running the project in Xcode on an iPhone XS I immediately notice the viewport of the app starts under the notch and ends under the home "button".
I don't ever want content to be under the notch or status bar and just want to be able to style it with the Status Bar plugin.
UIViewControllerBasedStatusBarAppearance is set to YES
viewport-fit=cover on the viewport meta is not present
apple-mobile-web-app-status-bar-style meta is set to default
Not using Ionic
i am using ons-navigator
When i test it on iphone it looks like
iphone
and when i test it on android devices it looks like
android
There is some padding added to the top of the page when running on iOS since the status bar is part of the app.
To disable this behavior you can run
ons.disableAutoStatusBarFill()
After loading Onsen UI. However, in most cases you want to have the padding in the status bar.
Pretty simple question really. I want to be able to change the font color of the statusbar in my Phonegap app. Note: I am not using Phonegap Build, just building the app in phpStorm and using Phonegap serve to show it in my iPhone app.
I have searched Google and Stackoverflow for possible solutions and they all don't work.
Tried solutions:
Meta tag index.html
Editing MyApp-Info.plist (Phonegap - How do i make the statusbar black?)
Using several Phonegap/Cordova plugins and editing the config.xml. This gave me various 'cannot be parsed' errors when launching phonegap serve
Do you have tried the status bar plugin? It's should work.
Just install the statusbar plugin by terminal:
cordova plugin add org.apache.cordova.statusbar
Then set your style preferences for the status bar, using your config.xml:
<preference name="StatusBarBackgroundColor" value="#000000" />
I think that you can only set custom background color for the status bar in iOS, or just set white/black color for font but nothing else.
I repeat, not 100% sure but I think you can't set custom font color for status bar in iOS.
The current module for the top bar breaks in IOS 6, reverting to a previous version makes it work again but will not work in IOS 7.
What I see is when I open the app with the new topbar and tabbar is the "hide" command does not seem to be hiding the header and footer, causing them to show while the loading screen is still showing (this happens in both IOS 6 and 7), then they will seem to hide only after the few seconds once the app is loaded.
Next the topBar does not seem to get tinted (stays black ) in IOS 6 and the webview seems to be off, in IOS 7 this seems to be ok but 6 its not working.
Edit 1:
After doing some additonal research it seems the app is crashing and throwing this error.
Oct 6 16:29:33 Michaels-iPhone Forge[341] : * Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '* -[__NSPlaceholderDictionary initWit
This app has been working just fine on pervious versions and now for some reason is crashing
Edit 2:
So it seems there is a problem with both the header and footer modules (topBar and TabBar) where with IOS 6 they are just not working correctly. If I revert them to the previous version they work just fine for IOS (Will be testing 7 soon)
Next the error I was getting that seemed to be crashing things had to do with the request module, again if I revert that back one version I do not get the crashing I was seeing. Not sure why it was causing it to crash but like I said move it one version lower fixed the issues. I even double check it where I lowered it, ran it and had no crash, added it back in and got the crash, then removed it again and the crashing was gone.
Edit 3:
So I tested IOS 7 with the current settings I have and as expected the header and footers are messed up, seeing as the updates were for IOS 7 I kind of expected this. What is strange is that if I download the app from itunes the header and footer bars work just fine in IOS 7 but they have the old style of rendering. I will try to pre-render later on and see if it helps.
Edit 4:
Still no update from trigger.io on this obvious bug, I have been able to get the topbar to tint by making the core version set to 2.03 ( what seems odd is that forge says the default version is 2.01 but in the drop down I see 2.03 and the docs online show 2.03 as the most current but 2.01 says the "stable" version ) While I can get that working the tabbars are still not functioning properly as it seems to mess with the size of the webview between the header and footer. What is the really sucky part is I have updates that need to be made but here I am a week without an answer from trigger.io, how are we suppose to put faith in a company to build our apps if they put out an update with bugs that they seem unwilling to address or fix?
Edit 5:
To give a little more info for James this is what happens with different versions
scenario 1):
All modules up to date
Core version 2.0.3
IOS6 version (6.1.3)
TopBar and Tabbar show over launch image, once launch image is gone bars will no longer show. ( I have a hide event in place to hide them until a user logs into the the app )
Once the user has logged into the app the webview is messed up, almost like its calculating the height of the page without the tabbar and topbar in place so when it displays the page is not at the top but 100 to 150 px offset from the top
As stated this is with every module up to date and core at 2.0.3
scenario 2):
TopBar module 2.1 and tabbar module 2.0
All other modules are up to date
Core version 2.0.3
IOS6 version (6.1.3)
When loading up the app the topBar shows over the splash screen but the tab-bar does not, once logged into the app the same webview issues happens, offset by 100 to 150 px
scenario 3):
TopBar module 2.0 and tabbar module 2.0
All other modules are up to date
Core version 2.0.3
IOS6 version (6.1.3)
With this config everything seems to work ok, the topbar and tabbar do not show over the launch image, once inside the app the webview is correct and everything seems to work as expected but then a different issue comes up, the app will crash on the forge request, hence this error
Oct 6 16:29:33 Michaels-iPhone Forge[341] : * Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '* -[__NSPlaceholderDictionary initWit
I cannot explain why the request module would work for logging into the app and making other request and then just suddenly fail, I do know though that if I change the request module back to the previous version I experience no issues with IOS 6
scenario 4):
TopBar module 2.0 , tabbar module 2.0, and request module 2.0
All other modules are up to date
Core version 2.0.3
IOS6 version (6.1.3)
Success! We have the app working as it should in IOS 6, no top or tab bar problems, no webview issues and no crashing.
This is great lets see how it looks on IOS 7..
scenario 5):
TopBar module 2.0 , tabbar module 2.0, and request module 2.0
All other modules are up to date
Core version 2.0.3
IOS7 version (7.0)
When I open the app the launch screen comes up, then goes away somewhat quickly and reveals the topbar and tabbar, almost like its going away too quickly and its just a white screen with a topbar and tabbar.
once I log into the app the topbar and tabbar seem to be cut off, like the are the right height but the margin inside the bar is set to like -50px so the bar itself gets pushed up and cut off.
scenario 6):
TopBar module 2.2 , tabbar module 2.1, and request module 2.0
All other modules are up to date
Core version 2.0.3
IOS7 version (7.0)
Opening up the app we see the splash screen but again the splash screen seems to hide too quickly revealing the topbar and tabbar with a white screen, then it places you into the app.
Once logged into the app things look as they should
scenario 7):
All modules up to date
Core version 2.0.3
IOS7 version (7.0)
We have placed every module and core to be up to date, same launch screen issues as in scenario 5 and 6 but don't see the crashing issue as before.
Edit 6
I Just tested out the hide manualy and it does not seem to be working with IOS 7, it just seems to ignore the hide manually command
This is snippet from the config.json
"modules": {
"launchimage": {
"version": "2.1",
"config": {
"android-landscape": "androidLand.png",
"background-color": "#000000",
"android": "androidPort.png",
"ios": {
"1536x2048": "img/splash/1536X2048.png",
"320x480": "img/splash/320x480px.png",
"640x1136": "img/splash/640x1136px.png",
"2048x1536": "img/splash/2048x1536px.png",
"1536x2008": "img/splash/1536x2008px.png",
"1024x768": "img/splash/1024X748.png",
"2048x1496": "img/splash/2048x1496px.png",
"1024x748": "img/splash/1024X768.png",
"640x960": "img/splash/640x960px.png",
"768x1004": "img/splash/768x1004px.png",
"768x1024": "img/splash/768x1024px.png"
},
"hide-manually": true
}
To double check this I tried it in ios6 and it does work, what I see in IOS 7 is the splash screen shows up for about 1 second, then goes away to reveal a white screen and the header and footer then loads up my webview completely ignoring the hide manually command. I tried with IOS 6 and the hide manually works, the way I tested this just to be sure is to completely remove the hide manually call in my code (so it would not hide) and on IOS 6 its not hiding as expected but ios 7 seems to blow right past that and hide the screen.
Edit 7
Seems there are some updates to the modules for tab and top bar.. will give it a shot!
I'm going to try to summarise this into 5 issues - let me know if I missed anything!
on iOS 6.1, the topbar and tabbar show over the launchimage
the window height as reported by webview (or placement of top of page?) is incorrect
the request module can cause an NSInvalidArgumentException
2.0 versions of tabbar and topbar don't work with iOS 7
the launchimage hides too quickly on iOS 7
1: Can you include screenshots, and your config.json, in the question (or, see https://trigger.io/forge/support/ to send directly)? I'm not seeing the behaviour you describe: the topbar and tabbar are invisible until the launchimage hides.
2: Are you using window.innerHeight or similar to layout your app? Or do you mean that straightforward HTML is being laid out incorrectly? A screenshot would be great, along with a stripped down code sample if possible.
3: Could we split this off into a separate SO question? It's almost certainly unrelated to the thrust of this question. In that, samples of config.json and code would be great.
4: iOS 7 support was included in the 2.1 versions of those modules: 2.0 will not behave properly on iOS 7. See https://trigger.io/modules/_/changelog/.
5: If it's just that your app needs a bit more time to initialise, you can use the "Hide Manually" option for launchimage (https://trigger.io/modules/launchimage/current/docs/index.html)