Framework7 Vuejs App Statusbar not showing

Hi, @nolimits4web I am currently to make status bar visible on my F7 + vue.js app.

I have tried every suggestion I’ve read but still no success. I still don’t see any status bar when I run
corodva run android

I have cordova status-bar plugin installed and have even added the line
<preference name="Fullscreen" value="false" />
to the config.xml file. Still when I run the app on an emulator I see no change.

Please find below my config.xml file

    <?xml version='1.0' encoding='utf-8'?>
<widget id="com.intellisense.livekampus" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Livekampus</name>
    <description>
        Livekampus community mobile app
    </description>
    <author email="[email protected]" href="http://livekampus.com">
        Henry Ugochukwu
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <allow-navigation href="*" />
    <platform name="android">
        <preference name="android-minSdkVersion" value="21" />
        <preference name="SplashMaintainAspectRatio" value="true" />
        <splash density="land-hdpi" src="res/screen/android/drawable-hdpi/screen.png" />
        <splash density="land-mdpi" src="res/screen/android/drawable-mdpi/screen.png" />
        <splash density="land-xhdpi" src="res/screen/android/drawable-xhdpi/screen.png" />
        <splash density="land-xxhdpi" src="res/screen/android/drawable-xxhdpi/screen.png" />
        <splash density="land-xxxhdpi" src="res/screen/android/drawable-xxxhdpi/screen.png" />
        <splash density="port-hdpi" src="res/screen/android/drawable-hdpi/screen.png" />
        <splash density="port-mdpi" src="res/screen/android/drawable-mdpi/screen.png" />
        <splash density="port-xhdpi" src="res/screen/android/drawable-xhdpi/screen.png" />
        <splash density="port-xxhdpi" src="res/screen/android/drawable-xxhdpi/screen.png" />
        <splash density="port-xxxhdpi" src="res/screen/android/drawable-xxxhdpi/screen.png" />
        <icon density="ldpi" src="res/icon/android/mipmap-ldpi/ic_launcher.png" />
        <icon density="mdpi" src="res/icon/android/mipmap-mdpi/ic_launcher.png" />
        <icon density="hdpi" src="res/icon/android/mipmap-hdpi/ic_launcher.png" />
        <icon density="xhdpi" src="res/icon/android/mipmap-xhdpi/ic_launcher.png" />
        <icon density="xxhdpi" src="res/icon/android/mipmap-xxhdpi/ic_launcher.png" />
        <icon density="xxxhdpi" src="res/icon/android/mipmap-xxxhdpi/ic_launcher.png" />
    </platform>
    <platform name="ios">
        <config-file parent="CFBundleAllowMixedLocalizations" platform="ios" target="*-Info.plist">
            <true />
        </config-file>
        <preference name="StatusBarOverlaysWebView" value="true" />
        <splash src="res/screen/ios/[email protected]~universal~anyany.png" />
        <icon height="180" src="res/icon/ios/[email protected]" width="180" />
        <icon height="60" src="res/icon/ios/[email protected]" width="60" />
        <icon height="120" src="res/icon/ios/[email protected]" width="120" />
        <icon height="76" src="res/icon/ios/[email protected]" width="76" />
        <icon height="152" src="res/icon/ios/[email protected]" width="152" />
        <icon height="228" src="res/icon/ios/[email protected]" width="228" />
        <icon height="40" src="res/icon/ios/[email protected]" width="40" />
        <icon height="80" src="res/icon/ios/[email protected]" width="80" />
        <icon height="87" src="res/icon/ios/[email protected]" width="87" />
        <icon height="57" src="res/icon/ios/[email protected]" width="57" />
        <icon height="114" src="res/icon/ios/[email protected]" width="114" />
        <icon height="72" src="res/icon/ios/[email protected]" width="72" />
        <icon height="144" src="res/icon/ios/[email protected]" width="144" />
        <icon height="167" src="res/icon/ios/[email protected]" width="167" />
        <icon height="29" src="res/icon/ios/[email protected]" width="29" />
        <icon height="58" src="res/icon/ios/[email protected]" width="58" />
        <icon height="50" src="res/icon/ios/[email protected]" width="50" />
        <icon height="100" src="res/icon/ios/[email protected]" width="100" />
        <icon height="167" src="res/icon/ios/[email protected]" width="167" />
        <icon height="1024" src="res/icon/ios/[email protected]" width="1024" />
    </platform>
    <preference name="Fullscreen" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="BackupWebStorage" value="local" />
    <preference name="AutoHideSplashScreen" value="true" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="SplashScreenDelay" value="0" />
    <preference name="Suppresses3DTouchGesture" value="true" />
    <preference name="Allow3DTouchLinkPreview" value="false" />
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <preference name="AllowInlineMediaPlayback" value="true" />
    <plugin name="cordova-plugin-firebase-lib" spec="3.3.0" />
    <plugin name="cordova-plugin-network-information" spec="^2.0.2" />
    <plugin name="cordova-plugin-inappbrowser" spec="^3.2.0" />
    <engine name="ios" spec="^5.0.1" />
    <engine name="browser" spec="^6.0.0" />
    <engine name="android" spec="^8.1.0" />
</widget>

Kindly suggest

show a screenshot of the app

Hi @shastox.

Here it is.

Any idea how I can make the status bar visible? @shastox @nolimits4web

Hello,

So i did some research and found a suitable solution to my issue.

I added the following to my config.xml file

<preference name="Fullscreen" value="false" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />

Reference: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/#statusbarstylelightcontent

That seems to do the trick.

Cheers!!!