How to put iOS app in full screen

ionic-v1
1

Hello,

I would like to know how to remove the status bar under ios please.
On android I do not have this problem, but on iOS the status bar is still visible.

Thank you in advance for your answers

image

2

Hi @Tsila,

You need to use the below mentioned plugin.

cordova plugin add org.apache.cordova.statusbar

And then you need to write below mentioned code in your config function,

$ionicPlatform.ready(function() {
  ionic.Platform.fullScreen();
  if (window.StatusBar) {
    return StatusBar.hide();
  }
});

Hope this will work for you.

3

I do this in my code but it still does not work :disappointed:
app.js

.run(function($ionicPlatform,$document, $ionicPlatform) {
  $ionicPlatform.ready(function() {
    
  //*/
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    ionic.Platform.fullScreen();
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.hide();
    }
  });
})

config.xml :

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.cheerup.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>CheerUp</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <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:*" />
        <preference name="Fullscreen" value="true" />
    </platform>
    <engine name="ios" spec="^4.4.0" />
    <plugin name="cordova-plugin-statusbar" spec="^2.2.3" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
</widget>
4

there is an error in your code.

.run(function($ionicPlatform,$document, $ionicPlatform) {
$ionicPlatform.ready(function() {

//*/
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
ionic.Platform.fullScreen();
if (window.StatusBar) {
// org.apache.cordova.statusbar required
return StatusBar.hide();
}
});
})

return was missing in that.

5

I do not know if I’m doing it wrong, but window.Statusbar is not set when I try to display it in console

6

Yes. window.Statusbar will not be displaying in the browser console. Have you added return keyword?