React Native - Odd spaces on iPhone X

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

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.

Tags:

React Native