Weird StatusBar Functionality After Upgrade Capacitor 4 -> 5

Capacitor
1

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:

Before:

368581557_3449388368649132_2336711154424626287_n
368581557_3449388368649132_2336711154424626287_n921×2048 61.3 KB

After:

367692173_254647454119685_2643155661598312825_n
367692173_254647454119685_2643155661598312825_n921×2048 59.8 KB

Code:

image
image657×709 28.8 KB

2

What device are you testing on?

4

A Samsung S20 plus with Android 13.

5

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:

6

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();
console.log(info.style);
7

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.

8

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 })
    }
}
9

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…