Change splash screen in React Native iOS app

Final result

This is, supposedly, an easy task, but after read and read a lot about it, this was the only way I could get my splash image working, so I wanted to share with the community.

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

Launch Image template

When the images are ready, you need to downloaded an take the ones inside assets/iphone folder, I only took those ones:

• Default@2x.png (640x960)
• Default-568h@2x.png (640x1136)
• Default-667h@2x.png (750x1334)
• Default-Portrait-736h@3x.png (1242x2208)
• Default-Landscape-736h@3x.png (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": "Default-568h@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-667h@2x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Landscape-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Portrait-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

So, at this point you need to create a folder called LaunchImage.launchimage inside Images.xcassets folder in your React Native project and save the images and Content.json file inside it:

LaunchImage.launchimage

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

Migrate asset catalog

Now, in the “Launch Images Source” selector, you’ll be able to choose the folder you created before, LaunchImage (the one with the images):

Selecting the assets

You have to pick this instead of Brand Assets and you can delete Brand Assets folder.

At this point, you’ll be able to run your React Native application with a custom launch image

If you want to learn more about React Native go and check out my new project :)