10

When i try to build my app to simulator running iPhone X there's an odd spaces on top and bottom of the screen as shown in the image. It's supposed to be full screen. Any idea how i can fix this? Thanks in advance.

i am running rn v0.47 and xcode 9.

enter image description here

jayfred
  • 213
  • 2
  • 7

3 Answers3

13

Probably you are setting the launch screen as images, try by setting the LaunchScreen as a storyboard and be sure to have the Use Safe Area Layout Guides active on it.

enter image description here

enter image description here

If you don't have a LaunchScreen.storyboard you can just create a new one an set it, or create a new empty project and just grab the existing LaunchScreen.storyboard and copy/paste it to your current project.

Camo
  • 1,778
  • 14
  • 12
  • You're right about that its a launch screen related issue. Already have a laungimage setup and I just fixed this issue earlier realizing i didn't have launch image for iPhone X. – jayfred Sep 21 '17 at 02:12
  • Hi @Camo Why dont I see the Interface Builder Document section? Do you know where is it? or how to turn it on – chiquyet Dec 19 '17 at 13:02
4

Camo's answer is right. The issue is related on splash screen. But i just wanted to share how i fixed my issue since I am not using storyboard for my launchScreen. So first i created a new launchscreen image with dimensions 1125x2436(portrait) and 2436x1125(landscape) and added it to my launchimage directory. And then updated the Contents.json file adding this 2 configurations:

{
 "orientation" : "portrait",
 "idiom" : "iphone",
 "extent" : "full-screen",
 "minimum-system-version" : "11.0",
 "filename" : "1125x2436.png",
 "subtype" : "2436h",
 "scale" : "3x"
},
{
 "orientation" : "landscape",
 "idiom" : "iphone",
 "extent" : "full-screen",
 "minimum-system-version" : "11.0",
 "filename" : "2436x1125.png",
 "subtype" : "2436h",
 "scale" : "3x"
}
jayfred
  • 213
  • 2
  • 7
0

Update your LaunchImage assets.

I had an old LaunchImage asset that did not include the iPhone X(s) sizes. I tried "refreshing" or "updating" the existing LaunchImage asset, but couldn't do that. Instead, I just deleted the existing one and created a new one.

enter image description here

That fixed the bars on the top and bottom of the actual app after the launch screen is done.

My guess is because Apple assumes that if you don't have the proper LaunchImage for the taller iPhone X(s) screens, then your app isn't optimized for the new screen so instead of breaking your app layout, it just uses the limited screen size for compatibility.

If you need a good template for making the updated Launch Images, here's a free Sketch template that I used and it worked great:

https://www.sketchappsources.com/free-source/1122-ios-splash-launcher-template-sketch-freebie-resource.html

Joshua Pinter
  • 45,245
  • 23
  • 243
  • 245