question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. Itย collects links to all the places you might be looking at while hunting down a tough bug.

And, if youโ€™re still stuck at the end, weโ€™re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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
  • 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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

15reactions
Robinhoehcommented, Apr 2, 2020

If you go to Xcode you can select it:

Screen Shot 2020-04-02 at 3 33 52 PM
0reactions
ionitron-bot[bot]commented, Nov 12, 2022

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to fix error with statusbar overlay on ios dispositives
but it doesn't work, I would like to know how I can solve this error. I am using capacitor, to compile the code...
Read more >
Status Bar Capacitor Plugin API
The StatusBar API Provides methods for configuring the style of the Status Bar, along with showing or hiding it.
Read more >
Ionic Capacitor in Xcode Error - [warn] Native: tried calling ...
When i run my application in Xcode below error occur. [warn] - Native: tried calling StatusBar.overlaysWebView, but the StatusBar plugin is not ......
Read more >
Ionic Dynamic Status Bar Color with Capacitor - YouTube
Learn to change the Status Bar color of your Ionic application when entering screens or with a special directive.
Read more >
ionic 6 app with capacitor 4 overlapping with content - Reddit
My Ionic 6 + vue 3 app having a issue with the statusbar in android. It's overlapping with the content. cannot find the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found