Simbaclaws edited a comment on issue #189: URL: https://github.com/apache/cordova-plugin-statusbar/issues/189#issuecomment-750866061
Dear @aacassandra, personally because of this bug I decided to use a different native runtime then cordova since I was using ionic framework version 4+. Nowadays some cordova plugins tend to have issues with newer versions of operating systems from android and iOS. And it depends on the maintainers of these specifically made cordova plugins to update them rather then have a company backed solution for all of the plugins you'll need. I'm using a native runtime for web apps called: [capacitor](https://capacitorjs.com/). This is a native runtime created by the ionic team (from the ionic company) instead of individual maintainers. (I'm only using cordova from now on when a specific thing is not available in capacitor) Currently I'm using [status bar](https://capacitorjs.com/docs/apis/status-bar) from capacitor in order to style my status bar correctly across newer and older versions of ios and android. Here are 2 services that I made in ionic angular to get information about the platform you're using and to set the statusbar according to the current platform you are on in either a "dark" or "light" mode. Information service using capacitor: ```typescript import { Injectable } from '@angular/core'; import { Plugins } from '@capacitor/core'; import { Platform } from '@ionic/angular'; const { Device } = Plugins; @Injectable({ providedIn: 'root' }) export class InformationService { constructor( private platform: Platform ) { } async givePlatform() { return this.platform.ready().then(async ()=>{ const info = await Device.getInfo(); return info.platform; }); } } ``` statusbar service using capacitor: ```typescript import { InformationService } from './information.service'; import { Injectable } from '@angular/core'; import { Plugins, StatusBarStyle } from '@capacitor/core'; const { StatusBar } = Plugins; @Injectable({ providedIn: 'root' }) export class StatusbarService { constructor( private info: InformationService ) { } changeStatusBar(color) { this.info.givePlatform().then((platform) => { if (platform !== 'web') { if (color === 'dark') { StatusBar.setStyle({ style: StatusBarStyle.Dark }); if (platform === 'android') { StatusBar.setBackgroundColor({ color: '#121212' }); } else if (platform === 'ios') { StatusBar.setBackgroundColor({ color: '#000000' }); } } else if (color === 'light') { StatusBar.setStyle({ style: StatusBarStyle.Light }); StatusBar.setBackgroundColor({ color: '#ffffff' }); } StatusBar.setOverlaysWebView({ overlay: false }); }}); } } ``` This can be used like so: ```typescript this.statusbar.changeStatusbar('dark'); ``` where statusbar is the imported service. In my case my app's theme had different dark colors for ios and android, hence I made a platform check that changed the bar color based on the platform. You can change this if you like. Be weary (all of this is ionic 4+ with angular). I am pretty sure you can add capacitor using any of your beloved frameworks. In my case I also made a theming service that handles all theming related stuff regarding light and dark mode. This might not be related to the current cordova plugin issue we're having, but this is how I solved it with an alternative solution in my app. ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
