iPhone X via Xcode 8, layout problems

Hello, We have been struggling to resolve this issue in a project using Xcode 8.x… unsuccessfully. Now, I am simply trying out these solutions on a bare and fresh project in the latest Xcode 9.x. I am unable to get rid of the black bars.

The white bars have disappeared, but the black remain. Many days have been spent already trying to make our ionic app fit an iPhone x. Can somebody help?

I have tried modifying the cordova-plugin-splashscreen so it detects an iPhone X screen, but it keeps on detecting the 667 height, iPhone 6.

On my simple cordova starter project, the viewport mod does not seems to work as you can see in this attached image.

I can send you the example project, it is tiny as it is simply the hello world Xcode 9 project from the cordova instructions.

Have you performed all steps described in https://blog.ionic.io/ios-11-checklist/?

Look like either ionic-angular or cordova-plugin-statusbar or both are not up-to-date in your project

Hello @reedrichards, thank you for responding. I was able to get to the end result. The launch screen though is not yet working, but the desired end result is there.

Launch screen:


End result:

Our production app is compiled only on Xcode 8.2.1, we have to keep it this way for several more weeks. Since I do not yet own an iPhone X, I have been copy/pasting the app from the Xcode 8 simulator to the iPhone X simulator to test out the modifications, all tests were unsuccessful.

So I did the same test with this very same hello world app. I opened it in Xcode 8, launched-it in an Xcode 8 simulator, copy/pasted the app in the iPhone X simulator… and the bars came back :(. This is weird, since I run the very same project again from Xcode 9, and the desired end result appears again. I am wondering why the result does not carry through from an Xcode 8 application bundle when the code modifications are only in plist, xml, and html… ?

Cool to hear that helped :slight_smile:

The cordova-plugin-statusbar improvments is coded, see PR https://github.com/apache/cordova-plugin-statusbar/pull/87/commits/dab1596c27108a43f3eb6bac0be295ecb6aa32db

Maybe that’s the reason

Hi @reedrichards, the status bar plugin is not part of our project. We have no plans to introduce it. Any thoughts on why the app package copied from Xcode8 to Xcode9 simulator won’t work for the simple Hello world cordova test app?

I didn’t know it was possible to have a project withouth the status bar plugin :joy:

I’ve absolutely not clue sorry

@reedrichards, to whom, or where, should I reach out to for help on this issue?

I can’t say whom exactly

I would suggest to open a separate post about it. Describe well your issue and maybe someone else of the community will be able to help

When the post is open, you could link it here

Otherwise stackoverflow or another ios/cordova forum

(I will/did split this discussion into its own topic)

1 Like

@vaistardom What is your ionic info output?

In general building for new devices usually only works properly with new Xcode versions.

Hello @Sujan12, thank you for assisting. My ionic info output is:
Cordova CLI: 6.2.0
Ionic CLI Version: 1.7.15
Ionic App Lib Version: 0.7.2
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v0.12.2
Xcode version: Xcode 9.1 Build version 9B55

Oh. That is ancient.

Normal advice with some output like this is: Update Ionic CLI and Cordova CLI please, then post the output again.

If you can not do that:
What does cordova platform list and cordova plugin list output?
What is your Ionic framework version?

@Sujan12, oh gosh! I am new on the team, and discovering the structure of the project hehe! I am also new to Ionic and cordova since last summer.

Here is the cordova platform list output:
Installed platforms:

Available platforms:
amazon-fireos ~3.6.3 (deprecated)
android ~5.1.1
blackberry10 ~3.8.0
browser ~4.1.0
firefoxos ~3.6.3
ios ~4.1.0
osx ~4.0.1
webos ~3.7.0

And here is the cordova plugin list output:

card.io.cordova.mobilesdk 2.0.2 "CardIO"
com.borismus.webintent 1.0.0 "WebIntent"
com.darktalker.cordova.screenshot 0.1.5 "Screenshot"
com.ionic.keyboard 1.0.6 "Keyboard"
cordova-plugin-app-event 1.1.0 "Application Events"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-barcodescanner 0.7.0 "BarcodeScanner"
cordova-plugin-camera 2.1.1 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.3 "Console"
cordova-plugin-contacts 2.0.1 "Contacts"
cordova-plugin-crosswalk-webview 1.2.0 "Crosswalk WebView Engine"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-file 2.1.0 "File"
cordova-plugin-file-transfer 1.2.1 "File Transfer"
cordova-plugin-firebase 0.1.23 "Google Firebase Plugin"
cordova-plugin-geolocation 2.1.0 "Geolocation"
cordova-plugin-globalization 1.0.4 "Globalization"
cordova-plugin-googleplus 5.1.1 "Google SignIn"
cordova-plugin-inappbrowser 1.5.0 "InAppBrowser"
cordova-plugin-network-information 1.2.1 "Network Information"
cordova-plugin-printer 0.7.2-dev "Printer"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.2 "StatusBar"
cordova-plugin-whitelist 1.0.0 "Whitelist"
cordova-plugin-x-socialsharing 5.1.8 "SocialSharing"
de.appplant.cordova.plugin.local-notification 0.8.4 "LocalNotification"
es6-promise-plugin 4.1.0 "Promise"
phonegap-facebook-plugin 0.12.0 "Facebook Connect"
phonegap-plugin-push 1.4.5 "PushPlugin"
uk.co.workingedge.phonegap.plugin.launchnavigator 2.9.11 “Launch Navigator”

The ionic -v output reveals (hope this answers the framework version questions):

No, that is Ionic CLI.

Ionic framework version is in package.json as ionic-angular.

Oh boy. I don’t think this will really work. This is missing a lot of changes in the iOS project, especially about icons and new devices.

You should seriously invest the time to update all the dependencies.
Start with Ionic and Cordova CLI (npm install -g ionic cordova) - this should work without big problems as they are both backwards compatible and only used on the command line. Then post your ionic info again and we can figure out a way to go from there.

Hi @Sujan12, thank you, I will relay the information to my team and we’ll see. Thank you for your suggestions.

p.s.: regarding our posts above, the status bar plugin is indeed part of your project and also not up-to-date

1 Like

@reedrichards, your are absolutely right! I was looking for the plugin in the Xcode project outline. It was revealed to me with these commands that @Sujan12 showed me :joy: .

1 Like

@vaistardom I don’t know if you already figured this one out, but I ran into the same issue. One project was in fullscreen on my iPhone X, the other one was still contained. With exactly the same settings. It turned out that not all my resources were generated properly, due to the fact that the icon should be 1024x1024 and no longer 512x512 in the resources folder to properly generate all files. After updating the resources accordingly, the app showed fully covered on my iPhone X . It seems as if the app didn’t run fullscreen due to the lack of a covering splashscreen/icon.

1 Like

In case anyone runs into this issue in the near future, I had the same problem. Turns out you have to explicitly “support” iPhone X by providing the proper launch screen files. I ended up following the steps opted in this answer. Never had the same problem again :smiley:

1 Like