Icon and launch image for React Native

September 14, 2016

I recently had to put icons and launch (splash) screen image into my React Native app and was looking for a good tool do it.

After trying out many tools either on the web or scripted apps, I found Ionic to give me to easiest solution. Here is the page that explains how it works.

So to do this. You’ll need to install Ionic.

npm install -g cordova ionic

Then create a dummy ionic project

ionic start myApp tabs

Add both android and ios platform

ionic platform add ios
ionic platform add android

Then you can put your icon and splashscreen image into the resources folder then run ionic resources and Ionic will generate all the images you need.

Now you can transfer this files into your react native project.

For Android:

├── mipmap-hdpi
│   └── ic_launcher.png
├── mipmap-mdpi
│   └── ic_launcher.png
├── mipmap-xhdpi
│   └── ic_launcher.png
├── mipmap-xxhdpi
│   └── ic_launcher.png

For iOS, just open up ios/PROJECT.xcodeproj in XCode. Open up Images.xcassets and drag the correct size image into each box.

A couple of notes here one should watch out for is that Ionic only generate images for iOS version 7 onwards. So it’s best to turn off iOS 6 icons on the right panel of XCode like below

To add splash screen, use the little + button on the bottom left corner

Again adjust the version you want to support and for iPad.