iOS Launch screen in React Native

Question

I\'m working with a React Native app and I\'m trying to set a customize launch screen but I\'m not able to.

React Native creates a LaunchScreen.xib by default, so I\

Answer 1

Upon following the above solutions my app was getting stuck on the Splash Screen so I did the following 7 steps to add the custom splash screen on ios.

1. Open the Xcode and locate the LaunchScreen.xib file in your project (Notice that this is the screen which is shown by default in ios)
2. To remove/edit the text on the screen click on it and do the necessary changes as you like.
3. To change the background color locate the following icons on the right side bar and click the little icon button at the very top, fourth from the left (when you hover, it’ll say “Show the Attributes Inspector”)

4. Now that you have know how to change the background color, lets add image to the Splash screen to do that click on the following button and select the Image view from the list and drag and place it where ever you want it on the splash screen.

5. Now we have to add the image to the Images.xcassets so that we can reference it in the LaunchScreen.xib to do that goto Images.xcassets. click on + button followed by import and then add the image you want to show in the splash screen. Beneath AppIcon you’ll see your image file name. This is the name we’ll use to reference in our LaunchScreen.xib

6. Now we have to reference the image we added in the LaunchScreen.xib file so navigate back to LaunchScreen.xib and click the image view that we added earlier and on the right hand corner you will see bunch of options. click on first one that says image and select the image which you imported in step 5

7. clean the project and run react-native run-ios and you should see the changes.

Answer 2

If you want to use the existing Launch Screen .xib file React Native initially has set up, but with your own logo and background color (and without any of the React Native default text), you can follow the instructions here: https://medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec.

Answer 3

If you create a Launch screen with the help of React then you should add the same thing in the LaunchScreen.xib file in iOS Xcode for that you can take a Screenshot and add it as an Image in the Images.xcassets.

Open LaunchScreen then add UIImageView in the View from Object Library from Right Panel in Xcode.

Add Trailing, Leading, Bottom and Top Constraints to the View. As Shown Below -

Don't Forget to change the UIImageView ContentMode as AspectFit so that it will look same when the app runs.

After That you need to add code in AppDelegate so that you don't get a white screen. The code is -

 UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
 launchScreenView.frame = self.window.bounds;
 rootView.loadingView = launchScreenView;

You can Refer - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

Answer 4

Just for those still having trouble, there is one more step missing from the accepted answer before making the iOS Launch screen work.

Open Info.plist in the project folder and delete "Main nib file base name" key. Then, rebuild and hopefully the issue is gone.

Answer 5

Update

generator-rn-toolbox is deprecated. Use react-native-make instead.

old Answer

I recommend generator-rn-toolbox for applying launch screen or main icon using on react-native. It is more simple and easy to use through cli as react-native.

• Do not need to open XCode.
• Do not need to make a lot of image files for various resolutions.
• Anytime change launch screen using one line commend.

Requirements

• node >= 6
• One square image or psd file with a size of more than 2208x2208 px resolution for a launch screen(splash screen)
• Positive mind ;)

Install

1. Install generator-rn-toolbox and yo
2. npm install -g yo generator-rn-toolbox
3. Install imagemagick brew install imagemagick

4. Apply splash screen on iOS

   yo rn-toolbox:assets --splash YOURIMAGE.png --ios

   or Android

   yo rn-toolbox:assets --splash YOURIMAGE.png --android

That's all. :)

Source

Answer 6

For me on XCode 10.1 and react-native 59.2 I had to go through the additional steps after already adding the images, storyboard and 1 universal image.

• Right click on the image, click Show in Finder, then edit your Contents.json file
• Add the image to the 2x and 3x sections
• Go to the Launch Screen storyboard, with the "ruler" menu
• Make sure only the inside red arrows are on, not the outside red arrows
• Click "Safe Area Relative Margins"

Image should now be centered on all size iPhones (tested on Portrait).