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.
android/app/src/main/res/ ├── 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.