Ios splash screen react native

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:

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.

  

• 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

Source Code

• Guess Game