Weird StatusBar Functionality After Upgrade Capacitor 4 -> 5

After upgrading from Capacitor 4 to 5 my Statusbar started acting weird.
It stopped applying the styles and overlay I declared in code.

Any ideas?

Pictures from before and after the upgrade:




What device are you testing on?

A Samsung S20 plus with Android 13.

Have you checked the Android logs and web logs while debugging the app on the device to make sure there aren’t any errors?

Assuming you have verified info.platform === 'android' is returning true?

For what it’s worth, I am on a Pixel 7 running Android 13 and am not having issues with my app :upside_down_face:

I checked the android logs for errors, couldn’t find any… I can also see that the correct StatusBar methods are being called.

info.platform === ‘android’ is returning true as my custom splashscreen is showing.

I ran a few more tests and it applies the correct styles when I add following Toast right above the other two StatusBar lines:

await this.toastr.presentToast((await StatusBar.getInfo()).style);

I have no idea what is happening because adding this infront of the other two lines does not fix it:

const info = await StatusBar.getInfo();

Do you also set the statusbar styles at application startup? If it works for yout, could you share your code? I started a new Ionic 7 project to test the behaviour in a blank app and I can reproduce the same behaviour. It seems that one way or another the native plugins are not ready at startup.

I do it on app start up in my main.ts file (A Vue project).

The code I use is as follows (note that DeviceInfoHelper is a custom wrapper around Ionic’s helpers):

if (DeviceInfoHelper.isMobileApp()) {
    StatusBar.setStyle({ style: Style.Dark })

    if (DeviceInfoHelper.isAndroid()) {
        StatusBar.setOverlaysWebView({ overlay: true })

Can’t get it to work. Pretty sure it’s a bug as I can reproduce the problem in an Ionic 7 starter project. Annoying…