taiki-t's diary

React Native, Rails そして雑多な記録: The world is waiting for you to give it a meaning.

Show an image on launch screen in React Native iOS app

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.

f:id:taiki-t:20170204191112j:plain

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 View.

f:id:taiki-t:20170204195119j:plain

Chose an image which added in the step 2.

f:id:taiki-t:20170204195817j:plain

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.

Omake*2

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.

*2:https://en.wikipedia.org/wiki/Omake