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've created a LaunchImage inside Images.xcassets:

I've also read that I've to modify the "Launch Screen File" under "App Icons and Launch Images" in my options:

Once I've done that, my launch screen became totally black and when the app is loaded, there are both top and bottom black frames:

So I don't know what I have to do to set my launch screen in my React Native project.

I'll be grateful if someone can help me out with those troubles.

Thanks in advance.

Answer 1

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 2

Make sure to delete the app from the simulator. Then do a clean on your project.

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

I was be able to solve the issue, with the help of this thread: Launch Image not showing up in iOS application (using Images.xcassets)

So I'm gonna explain it deeply in case it can help someone else.

First, you need to create certain images. What I used for that was this template and this webpage with an automatic generator: TiCons

When I downloaded my images, I took the ones inside assets/iphone folder, I only took those ones:

• [e-mail] (640x960)
• [e-mail] (640x1136)
• [e-mail] (750x1334)
• [e-mail] (1242x2208)
• [e-mail] (2208x1242)

Also you need this Contents.json file in the same folder, I got it from a friend:

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[e-mail]",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[e-mail]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[e-mail]",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[e-mail]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[e-mail]",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

So, at this point I created a folder called LaunchImage.launchimage inside Images.xcassets folder in my React Native project and save the images and the Contents.json file inside it:

Second, you have to open your project in Xcode and in "General" settings, below "App icons and Launch Images" we have to leave the option "Launch Screen File" empty (also we can delete the LaunchScreen.xib file inside our project), and click in "Use Asset Catalog" after that. A modal will open, we choose to Migrate the catalog Images

Now, in the "Launch Images Source" selector, we can choose the folder we created before, LaunchImage (the one with our images):

We pick this instead of Brand Assets and we can delete Brand Assets folder.

At this point, we'll be able to run our React Native application with our custom launch images:

I know it seems a little bit complex for an supposedly easy task, but after reading a lot about it this was the only way I could get my splash images working, so I wanted to share with the community.