[GitHub] [cordova-plugin-statusbar] Simbaclaws commented on issue #189: styleLightContent not working on iphone 11

[GitBox <gi...@apache.org>]

Simbaclaws commented 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.
   
   I'm using a native runtime for web apps called: [capacitor](https://capacitorjs.com/)
   
   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:
   ```
   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:
   ```
   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
           });
       }});
     }
   }
   ```
   
   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)
   
   This might not be related to the current cordova plugin issue we're having, but this is how I solved it on 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:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org