Seeing black bars at the top and bottom of the iPhone X Simulator

Question

Running my App in the iPhone X Simulator (GM Seed) I am noticing two strange effects:

• the App does not use the full screen space (top and bottom area is black)
• a strange white bar beneath the title bar

Does anybody know what is happening here and how to resolve this? I can't find any new settings in Interface Builder.

Solution 1

When using launch images (instead of the much easier Launch screen file), you need to provide the properly sized launch image for each device size you wish to support. Once you add the additional launch image, your app should take advantage of the new screen size.

The new iPhone X requires a launch image sized at 1125px × 2436px which is a 3x image for 375pt × 812pt.

Of course if you switch over to using a Launch screen file instead of individual launch images, your app will automatically adapt to all device sizes without any additional work.

Solution 2

I have figured out this issues in iPhone X. Launch image size (1125*2436px) Please flow this below steps. 1.i)Choose your project name in Xcode. ii)Select your project target iii)Then select Launch images source

2. You can get Migrate popup i) Choose Assets ii)Select Migrate

3. After that select your Assets.xcassets in your project

4. Then select Launch image in assets i)Then select attribute inspector

5. finally check your Launch image source. you can see set Launch image.

Solution 3

iPhone X needs different launch image sized 1125px x 2436px (375pt x 812pt @3x).

Check human interface guidelines for more details.

Solution 4

I have figured out how to fix (though I still don't understand why this happened only on iPhone X) LaunchScreen storyboard on iPhone X with seeing black top&bottom bars.

I have LaunchScreen storyboard with one UIImageView.

UIImageView's top&bottom has to be pinned to SuperView's top&bottom. NOT to SafeArea.

Solution 5

I fixed it by simply inserting some random text in the Lanch Screen File textfield. I dont even have a Launch Screen File... XCode is so buggy.

update

Although this fixes it in simulator (still very weird and unexpected) when uploading a binary to iTunes Connect it will fail due to not finding a LanchScreen file of name "random-name"

View more solutions

Comments

[Christian Cerri]

can you go into more detail on how to integrate the new iphoneX image into a Launch Screen? Any Image Sets I add to Xcode 9 don't have iphoneX slots, only Launch Image sets.

[rmaddy]

@ChristianCerri Image sets are not tied to devices. They just give you 1x, 2x, and 3x options. I was referring to launch images. Those are the only device specific images. If you have a question about adding different sized images to a Launch screen then please post your own question specific to that issue.

[Christian Cerri]

just did as you asked: stackoverflow.com/questions/46191522/…

[TomSawyer]

How the hell launch images related to blackbar on top and bottom of iPhone X simulator ??!

[rmaddy]

@TomSawyer If your app doesn't use a Launch screen storyboard then the launch images determine what screen sizes your app supports.

[Yuri Natividade]

This solved my problem with LauchScreen with Autolayout. But instead of pin to the borders, I centered horizontally and vertically and equal the width/height to SuperView.

[Mihir Oza]

It's working only the problem is my navigation bar not show properly.

[NadtheVlad]

Upvoted for the pictures. But you should clear out the "LaunchScreen" Text from the Launch Screen File text field in your last image.

[Karthick C]

Thank's @NadtheVlad. Please clear the "LaunchScreen" text from Launch Screen File and delete LaunchScreen.Storyboard file from Xcode.

[Crashalot]

See answer from @sabiland if you're still seeing black bars and using a launch screen. Would be great if this answer could be supplemented with the tidbit about how to design the launch screen properly for iPhone X.

[Crashalot]

This only worked after also pinning views in other storyboards to the view top/bottom as opposed to the layout guides. Be sure to check storyboards while in iPhone X mode.

[Govaadiyo]

Right its working for iphone x . but its not working for any other devices bro.

[mxcl]

Some of us are working for clients that refuse to adopt the new systems. So sure, I agree, it's much easier and preferable, but we don't all have choice.

[green0range]

Thanks! It was landscape checkbox from Launch Image that was causing problem since my app is only portrait.

[Chirag Bhutani]

@rmaddy, I have a legacy code which uses auto resizing and is built for iPhone 5 and it scales for iPhone 6 and 6 Plus but it doesn't scale for iPhone X and black space is shown on top and bottom of the screen. Could you please tell me if there is a way that scaling can be done on iPhone X or is it not possible to scale the app for iPhone X.

[Phyllis Sutherland]

Yes yes! this fixes it in xcode. Thanks! That's good enough for testing. Will buy a real iphone X to avoid the xcode issue in future to test on.

[rd_]

why i can't see superview in my storyboard when i go to give that constraint

[Viktor Sehr]

Thank you, had the same issue and resolved it by adding launch images (an SDL2 application)

[Aqib Zareen]

select Laaunchscreen.storyboard in target general i resolved issue.