Capacitor: bug: Status bar not visible on iOS application using Ionic Capacitor

[andreas-aeschlimann]

Bug Report

Capacitor Version

npx cap doctor output:

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 1.2.1

  @capacitor/core: 1.2.1

  @capacitor/android: 1.2.1

  @capacitor/ios: 1.2.1

Installed Dependencies:

  @capacitor/android not installed

  @capacitor/cli 1.2.1

  @capacitor/core 1.2.1

  @capacitor/ios 1.2.1


  Found 7 Capacitor plugins for ios:
    capacitor-fcm (0.1.0)
    cordova-plugin-facebook4 (6.2.0)
    cordova-plugin-ionic (5.4.5)
    cordova-plugin-streaming-media (2.2.0)
    cordova-plugin-whitelist (1.3.4)
    cordova-plugin-x-socialsharing (5.6.2)
    es6-promise-plugin (4.2.2)
[success] iOS looking great! 👌

Affected Platform(s)

• [ ] Android
• [x] iOS
• [ ] Electron
• [ ] Web

Current Behavior

When I open the application, I can see the status bar data (provider, time, connection and battery status) during the startup (splash screen). When the application has loaded, the status bar is invisible, but taking up space on the top of the application header.

Setup in Info.plist on the iOS App:

View controller-based status bar appearance = YES
Status bar is initially hidden = NO
Stats bar style = Light Content

(none of these settings seem to have any effect on the behavior)

I am calling this on platform ready in app.component.ts:

Plugins.StatusBar.show()
            .then(_ => console.log("Status bar shown: " + JSON.stringify(_)))
            .catch(_ => console.log(_));
Plugins.StatusBar.setStyle({ style: StatusBarStyle.Dark })
            .then(_ => console.log("Status bar set: " + JSON.stringify(_)))
            .catch(_ => console.log(_));
Plugins.StatusBar.addListener("statusTap", () => console.log("Status bar tapped"));

Console output:

[log] - Status bar shown: {}
[log] - Status bar set: {}

Tapping the status bar does not scroll up the current view and does not show the tap event (console log).

Odd: The green battery symbol is visible on the status bar when the phone is plugged in. Nothing else is visible. When there is an overlay on the app (like a modal), the status bar is visible on an iPad.

Expected Behavior

Status bar should show appropriately. On click the view should scroll up.

Setup

I have an Ionic Angular application using Capacitor, with an ion-split-pane element within the ion-app root tag.

[jcesarmobile]

Can you provide a screenshot?
And a sample app?

StatusBarStyle.Dark turns the text/icons into white, is it possible that your background has a clear color and that's why you don't see them?

[andreas-aeschlimann]

First, I owe you an apology. Indeed the Dark – I was playing around with the settings – made an issue. The font was white and the background of the status bar too. Shouldn't it be dark though? Anyway, I wanted it to be Light and now I can see the status bar again.

However, nothing happens on a tap on the status bar.

Before using Capacitor (just Ionic Cordova), a tap on the status bar scrolled up the current view. This does not happen now and it also does not trigger this:

Plugins.StatusBar.addListener("statusTap", () => console.log("Status bar tapped"));

[jcesarmobile]

statusTap is not a Capacitor Plugin event, but a regular window event (for Cordova compatibility), so you listen to it like this:

// Events (iOS only)
window.addEventListener('statusTap', function () {
  console.log("statusbar tapped");
});

https://capacitor.ionicframework.com/docs/apis/status-bar#example
We can probably also make it a Plugin event

For the scroll on tap, can you provide a sample app?

[andreas-aeschlimann]

I have just created a new Ionic project from scratch and the scroll does not work on iOS for me. I tried to tap the status bar on the "Home" menu on the Sidemenu starter app from the Ionic CLI. When I tap the status bar, the app does not scroll up.

ionic start statusbar
-> Angular
-> Sidemenu
cd statusbar
ionic build
ionic capacitor add ios
npx cap open ios

BTW, the window event listener does not seem work either.

[andreas-aeschlimann]

Hey @jcesarmobile, I have new updates regarding this issue.

On iOS 12.x, the status bar works as expected.

On iOS 13.x, the status bar is invisible when the device is in Dark Mode. The scroll up function does never work. Have you been able to try the status bar on iOS 13 yet? I don't think it ever worked for me since the update.

[jcesarmobile]

The setStyle is working as expected.

The statusTap event and scrolling to top on tap is broken on iOS 13.

Going to close this issue and we can continue on the new one since that one is focused on the scroll problem https://github.com/ionic-team/capacitor/issues/2109

[andreas-aeschlimann]

Agreed, thanks.

[Robinhoeh]

If you go to Xcode you can select it: