Geek Answers Handbook

React Native - Odd Spaces on iPhone X

When I try to create my simulator application running on iPhone X, there are odd spaces at the top and bottom of the screen, as shown in the image. It should be fullscreen. Any idea how I can fix this? Thanks in advance.

I am running rn v0.47 and xcode 9.

enter image description here

+8
react-native
source share
3 answers

Perhaps you are setting the launch screen as images, try setting LaunchScreen as a storyboard and be sure to include Use Safe Area Layout Guides .

enter image description here

enter image description here

If you do not have LaunchScreen.storyboard , you can simply create a new one, install it, or create a new empty project and just grab the existing LaunchScreen.storyboard and copy / paste it into your current project.

+11
source share

Camo's answer is correct. The problem is with the screen saver. But I just wanted to share how I fixed my problem, since I am not using the storyboard to run me. So first I created a new launch image with sizes 1125x2436 (portrait) and 2436x1125 (landscape) and added it to my launchimage directory. And then updated the Contents.json file, adding the following 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" }
+4
source share

Upgrade your LaunchImage assets.

I had an old LaunchImage asset that did not include the dimensions of the iPhone X (s). I tried to “update” or “update” an existing LaunchImage asset, but could not do it. Instead, I simply deleted the existing one and created a new one.

enter image description here

This fixed the bars at the top and bottom of the real application after the launch screen is done.

I think because Apple assumes that if you do not have a suitable LaunchImage for higher iPhone X (s) screens, then your application is not optimized for the new screen, so instead of breaking the layout of the application, it just uses a limited screen size for compatibility.

If you need a good template for creating updated Launch Images, here is the free Sketch template I used and it worked perfectly:

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

0
source share

More articles:


All Articles