Ios splash screen react native

How to add Launch image or splash screen in react-native Ios application and remove existing react native powered screen

April 20, 2017 - 2 minute read -
code tutorial

Introduction

This is very easy task for most of guys out there in app development industry but as a react native learner and starter it becomes little tricky and consume lots of time in searching and reading on internet. So, lets see how to add launch image to Ios application powered by react native in three simple steps.

Step 1: Generate Launch Images

Generate launch images for different resolution from http://ticons.fokkezb.nl/ and download them. After downloading you will launch images in app/assets/iphone for Ios.

Step 2: Configuration Settings

Lets add file path for launch image for different resolution. Locate Ios project for application and navigate to ios/your_app_name/Images.xcassets and create folder named LaunchImage.launchimage. This folder will hold all the launch images.

Lets move all generated images in step 1 to LaunchImage.launchimage folder. For referencing different images for different resolutions we will creating mapping for those. So, lets create a name Contents.json in same folder. Your file will look something like below -

Image resolution is mapped something like below:

Image Resolution File Name
320x480 Default.png
640x960 Default@2x.png
640x1136 Default-568h@2x.png
750x1334 Default-667h@2x.png
1242x2208 Default-736h@3x.png
768x1024 Default-Portrait.png
1024x768 Default-Landscape.png
1536x2048 Default-Portrait@2x.png
2048x1536 Default-Landscape@2x.png

Remove LaunchScreen.xib

Step 3: Xcode Settings

  • Open project in Xcode, open Project settings and then General tab.
  • Go to App Icons and Launch Images section.
  • Remove everything from Launch Screen File. It should be blank.
  • Click Use Asset Catalog and Migrate. Make sure there is only one image-set by clicking right arrow just after Use Asset Catalog and if there is more remove other only LaunchImage should be present.

    xcode-general-settings

  • After all this run your react application and you should be seeing your custom launch image appearing in place of react default launch image.

Launch image

launch-image

Source Code