React Native - Odd spaces on iPhone X

Question

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.

Answer 1

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.

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.

Answer 2

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"
}