My long attempts to show an image on launch screen (or splash screen) in iOS app with React Native have failed so far and here is a solution I finally found. The key is to make use of
LaunchScreen.xib and not to use bunch of launch screen assets settings. (cf:
xcode - iOS Launch screen in React Native - Stack Overflow )
1. Find LaunchScreen.xib
This blog post well describes how to find and edit LaunchScreen.xib so just watch it :How to Remove the “Powered by React Native” Message in iOS Apps | React Cafe.
LaunchScreen.xib file is located under a file which name is the one you chosen for your app.*1
2. Provide image assets
Let’s provide assets. Find and select a file named
Images.xcassets on XCode and show context menu with
ctrl-click then select “New Image Set” as shown in an image below.
Drag'n'Drop images required in XCode. You may need to provide images which size are 1x, 2x and 3x. I named assets
SplashIcon as shown in the image.
3. Set images in LaunchScreen.xib
This is the last step. Open LaunchScreen.xib then drag drop an
Image View into a
Chose an image which added in the step 2.
Basically that’s all. You should be able to see the image you’ve set on launch screen. Make sure do
Reset Content and Settings... on iOS simulator to reflect those changes if you are on the simulator.
Set constrains on the image in order to show it always in the center of the launch screens. Drag a connection with ctrl-clicking the image to the
View. See this post to check required constrains: How to create ImageView center on storyboard using iOS? - Stack Overflow
*1:If you don’t want to use images (so as your logo) for your launch screen, that’s fine and just edit the screen. Actually Apple says “Don’t include logos or other branding elements unless they’re a static part of your app’s first screen.” and “Design a launch screen that’s nearly identical to the first screen of your app.” in their guide line for launch screen.
As far as I checked, some developers follow the guidelines and others don’t. Facebook, for example, follows the guidelines but Google mostly ignores it. Of course, Apple’s applications follow them. You might find it interesting to check out Apps on your device to see the difference of effects.