One of the most stunning and sought-after phones is the new iPhone X edge to edge model. A less — bezel phone. There is this small issue of white bars at the top & bottom portions of the screen. This is known as the letterboxing, in websites. We’ll just call it notches. We, wanted your mobile application development to be a smoother process, in case you encounter the same mistakes.

When testing, the app was run using Cordova-ios-4.5.5 on the new iPhone X edge to edge model in the X code simulator (Version 9.1.2), the application was expected to fill the screen however, it didn’t. The top and bottom sections of the screen were filled with white bars, instead.

Fortunately, there are two steps that makes these bars disappear.

I. Set a Viewport Meta Tag

Set Viewport-fit=cover, in the index.html file.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, viewport-fit=cover”>

The Viewport Meta tag fits the display to the entire visible screen. It varies from device to device, and will be smaller on a mobile phone than on a computer screen.

It simply works, yet replaces the white bars with black bars. To remove this continue with the next step.

II. Include config.xml file to remove black bars.

The issue was because the cordova was set to default values which were altered to include the cordova-plugin-splashscreen which incorporates the legacy launch images.

Add the following to the config.xml

<platform name=”ios”>

<splash height=”2208" src=”res/icon/ios/launchimage-1242@3x~iphone6s-portrait_1242x2208.png” width=”1242" />

<splash height=”1242" src=”res/icon/ios/launchimage-1242@3x~iphone6s-landscape_2208x1242.png” width=”2208" /> </platform>

After including the above statements, make the following changes to the dimensions in res/screen/iOS.

iPhone X — 1125px × 2436px — 2436px × 1125px

With these changes made you can now, see the desired outcome.

Hi there, we at Centizen are dedicated to making sustainable impacts through our services and products. Visit us at Centizen.

StatusBarOverlaysWebView (boolean, defaults to true). On iOS, make the statusbar overlay or not overlay the WebView at startup.

 <preference name="StatusBarOverlaysWebView" value="true" />

• StatusBarBackgroundColor (color hex string, no default value). On iOS, set the background color of the statusbar by a hex string (

  RRGGBB) at startup. If this value is not set, the background color will be transparent.

  <preference name="StatusBarBackgroundColor" value="

  000000" />

• StatusBarStyle (status bar style, defaults to lightcontent). On iOS, set the status bar style. Available options default, lightcontent, blacktranslucent, blackopaque.

  <preference name="StatusBarStyle" value="lightcontent" />

• StatusBarDefaultScrollToTop (boolean, defaults to false). On iOS, allows the Cordova WebView to use default scroll-to-top behavior. Defaults to false so you can listen to the "statusTap" event (described below) and customize the behavior instead.

  <preference name="StatusBarDefaultScrollToTop" value="false" />

Android Quirks

The Android 5+ guidelines specify using a different color for the statusbar than your main app color (unlike the uniform statusbar color of many iOS apps), so you may want to set the statusbar color at runtime instead via

  <preference name="StatusBarBackgroundColor" value="
# 000000" />

2 or

  <preference name="StatusBarBackgroundColor" value="
# 000000" />

3. One way to do that would be:

if (cordova.platformId == 'android') {
    StatusBar.backgroundColorByHexString("
# 333");
}

It is also possible to make the status bar semi-transparent. Android uses hexadecimal ARGB values, which are formatted as

AARRGGBB. That first pair of letters, the AA, represent the alpha channel. You must convert your decimal opacity values to a hexadecimal value. You can read more about it .

For example, a black status bar with 20% opacity:

if (cordova.platformId == 'android') {
    StatusBar.overlaysWebView(true);
    StatusBar.backgroundColorByHexString('
# 33000000');
}

Hiding at startup

During runtime you can use the StatusBar.hide function below, but if you want the StatusBar to be hidden at app startup on iOS, you must modify your app's Info.plist file.

Add/edit these two attributes if not present. Set "Status bar is initially hidden" to "YES" and set "View controller-based status bar appearance" to "NO". If you edit it manually without Xcode, the keys and values are:

<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

Methods

This plugin defines global

  <preference name="StatusBarBackgroundColor" value="
# 000000" />

1 object.

Although in the global scope, it is not available until after the

  <preference name="StatusBarBackgroundColor" value="
# 000000" />

5 event.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(StatusBar);
}

• StatusBar.overlaysWebView
• StatusBar.styleDefault
• StatusBar.styleLightContent
• StatusBar.styleBlackTranslucent
• StatusBar.styleBlackOpaque
• StatusBar.backgroundColorByName
• StatusBar.backgroundColorByHexString
• StatusBar.hide
• StatusBar.show

Properties

• StatusBar.isVisible

Events

• statusTap

StatusBar.overlaysWebView

Make the statusbar overlay or not overlay the WebView.

StatusBar.overlaysWebView(true);

Description

Set to true to make the statusbar overlay on top of your app. Ensure that you adjust your styling accordingly so that your app's title bar or content is not covered. Set to false to make the statusbar solid and not overlay your app. You can then set the style and background color to suit using the other functions.

Supported Platforms

• iOS 7+
• Android 5+

Quick Example

 <preference name="StatusBarOverlaysWebView" value="true" />

0

StatusBar.styleDefault

Use the default statusbar (dark text, for light backgrounds).

 <preference name="StatusBarOverlaysWebView" value="true" />

1

Supported Platforms

• iOS
• Android 6+
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.styleLightContent

Use the lightContent statusbar (light text, for dark backgrounds).

 <preference name="StatusBarOverlaysWebView" value="true" />

2

Supported Platforms

• iOS
• Android 6+
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.styleBlackTranslucent

Use the blackTranslucent statusbar (light text, for dark backgrounds).

 <preference name="StatusBarOverlaysWebView" value="true" />

3

Supported Platforms

• iOS
• Android 6+
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.styleBlackOpaque

Use the blackOpaque statusbar (light text, for dark backgrounds).

 <preference name="StatusBarOverlaysWebView" value="true" />

4

Supported Platforms

• iOS
• Android 6+
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.backgroundColorByName

On iOS, when you set StatusBar.overlaysWebView to false, you can set the background color of the statusbar by color name.

 <preference name="StatusBarOverlaysWebView" value="true" />

5

Supported color names are:

 <preference name="StatusBarOverlaysWebView" value="true" />

6

Supported Platforms

• iOS
• Android 5+
• Windows Phone 7
• Windows Phone 8
• Windows Phone 8.1

StatusBar.backgroundColorByHexString

Sets the background color of the statusbar by a hex string.

 <preference name="StatusBarOverlaysWebView" value="true" />

7

CSS shorthand properties are also supported.

 <preference name="StatusBarOverlaysWebView" value="true" />

8

On iOS, when you set StatusBar.overlaysWebView to false, you can set the background color of the statusbar by a hex string (

RRGGBB).

On Android, when StatusBar.overlaysWebView is true, and on WP7&8, you can also specify values as

AARRGGBB, where AA is an alpha value.

How to change status bar color in Cordova?

Set the background color of the statusbar by a hex string (

RRGGBB) at startup. If this value is not set, the background color will be transparent. If StatusBarOverlaysWebView is set to true, then a 8 digit hex (

AARRGGBB) string can optionally be used to define the transparency.nullcordova-plugin-statusbarcordova.apache.org › docs › reference › cordova-plugin-statusbarnull

Is Apache Cordova discontinued?

Since then, the needs of the community have changed just as Cordova's popularity has waned. Today calls from the Cordova SDK account for less than 1% of App Center's service. Consequently, after a 6 month grace period, App Center will discontinue support for Apache Cordova.nullAnnouncing Apache Cordova Retirement in App Centerdevblogs.microsoft.com › appcenter › announcing-apache-cordova-retirem...null

What is cordova in iOS?

Cordova iOS is an iOS application library that allows for Cordova-based projects to be built for the iOS Platform. Cordova based applications are, at the core, applications written with web technology: HTML, CSS and JavaScript.nullApache Cordova iOS - GitHubgithub.com › apache › cordova-iosnull

How to check cordova version?

To determine what version of Cordova's Android package is installed in your Cordova project, run the command cordova platform ls in the directory that holds your project. As a general rule, Android versions become unsupported by Cordova as they dip below 5% on Google's distribution dashboard.nullAndroid Platform Guide - Apache Cordovacordova.apache.org › docs › guide › platforms › androidnull