Statusbar text color not changing for iPhone 11

Ionic Native
#1

I am using:

this.statusBar.styleDefault();

In the emulator it correctly sets the white background and the dark text in the statusbar. But on real device (iPhone 11) it only changes the background color to white but does not change the text from light do dark.

I am using Ionic 5.

#2

If you’re using Cordova you’ll need to make sure that you’ve installed the plugins and follow the example in the documentation.

If you are using Capacitor in your project, you should just use the Capacitor StatusBar API in app.component.ts…

import { Platform } from "@ionic/angular";
import { Plugins, StatusBarStyle } from "@capacitor/core";
const { StatusBar } = Plugins;

this.platform.ready().then(() => {
    if (this.platform.is("hybrid")) {
        StatusBar.setStyle({ style: StatusBarStyle.Dark })
    }
});
1 Like
#3

I think I am using Capaciator.

But I am getting now:

[app-scripts] [17:04:33]  typescript: node_modules/@capacitor/core/dist/esm/global.d.ts, line: 3 
[app-scripts]             ',' expected. 
[app-scripts]        L2:  declare const Capacitor: _Capacitor;
[app-scripts]        L3:  declare const Plugins: import("./core-plugin-definitions").PluginRegistry;
[app-scripts]        L4:  export { Capacitor, Plugins };
[app-scripts] [17:04:33]  typescript: node_modules/@capacitor/core/dist/esm/global.d.ts, line: 3 
[app-scripts]             Cannot find name 'import'. 
[app-scripts]        L2:  declare const Capacitor: _Capacitor;
[app-scripts]        L3:  declare const Plugins: import("./core-plugin-definitions").PluginRegistry;
[app-scripts]        L4:  export { Capacitor, Plugins };
[app-scripts]             Property 'PluginRegistry' does not exist on type '"./core-plugin-definitions"'. 
[app-scripts]        L2:  declare const Capacitor: _Capacitor;
[app-scripts]        L3:  declare const Plugins: import("./core-plugin-definitions").PluginRegistry;
[app-scripts]        L4:  export { Capacitor, Plugins };
[app-scripts] [17:04:33]  typescript: node_modules/@capacitor/core/dist/esm/global.d.ts, line: 3
#4

Please run ionic info in your terminal to ensure that you have Capacitor installed.

the output should look something like this:

Ionic:

   Ionic CLI                     : 6.9.1 (/Users/me/.nvm/versions/node/v13.12.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.1.0
   @capacitor/core : 2.1.0

You can also run ionic doctor check to look for other issues.

#5

OK the titel Capacitor does not appear in ionic info. So it seems I am not using Capacitor.

As for the Cordova plugins, I am correctly following the mentioned documentation.

And I tested and it worked correctly for:

  • All Android emulators
  • Real Android Device Samsung S10
  • All iOS Emulators
  • Real iOS Device iPhone 6

but its somehow does not work correctly for real device iPhone 11. The statusbar gets correctly white color but the font also changes to white :confused: as you can see in the screenshot:

Screenshot_26_05_20__08_26-2

Here the dark versions, which is correct:

WhatsApp_Image_2020-05-14_at_04_29_51_jpeg

Here is the code in more details:

if (localStorage.getItem('isLightColorSelected') == "true") {
                    this.statusBar.styleDefault();
                } else {
                    this.statusBar.styleLightContent();
                }

Please help :confused:

#6

OK The solution is: