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|
Step 3: Xcode Settings
- Open project in Xcode, open
Project settingsand then
- Go to
App Icons and Launch Imagessection.
- Remove everything from
Launch Screen File. It should be blank.
Use Asset Catalogand
Migrate. Make sure there is only one image-set by clicking right arrow just after
Use Asset Catalogand if there is more remove other only
LaunchImageshould 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.