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.
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.
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… ?
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?
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
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.
@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 .
@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.
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
