React-Native Launch Image causes layout changes

Question

I'm attempting to add a Launch Image to my app and it's causing some unexpected layout changes to my first view.

So far what I've done:

1. Create a LaunchImage set (named LaunchImage) within Images.xcassets
2. Go to my Info.plist and add "Launch screen interface file base name" and set it to "LaunchImage"
3. Go to my LaunchScreen.xib and uncheck "Use as Launch Screen"
4. Under my main project target, General/App Icons and Launch Images, select "LaunchImage" as the Launch Images Source and leave the Launch Screen File field blank.
5. For good measure I even deleted the LaunchScreen.xib file.

In iOS simulator the Device is and always has been scaled to 100% and set to the same device, iPhone 6.

As a result I get my launch image but my first view is changed - margins are drastically reduced and fonts appear smaller. Could this have anything to do with auto-layout? How do I know which view (pre- or post- launch image) was the "true" view and which was distorted?

Answer 1

When using a Launch image from an image set, check that your images are in the correct size: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html

and for the specific sizes:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW2