One of the first things you have to do when creating an app is adding app icons.
- First, you have to generate icons of different sizes
- Then, you have to add them to your Android and iOS projects
In an Ionic process, we could automate this process with a single command line, why not have the same for React Native?
Introducing our new RN toolbox!
To use it, you need
node 6 installed.
Then, install the generator with:
npm install -g yo generator-rn-toolbox
To generate your icons, the generator uses ImageMagick. On macOS, you can install it with:
brew install imagemagick
Have a single icon file at the ready somewhere. 200x200px is sufficient.
If you don't have, you can use this one to try it out:
Then in your React Native project, run:
yo rn-toolbox:assets --icon <path to your icon> # For instance yo rn-toolbox:assets --icon ../icon.png
You will be asked for the name of your react-native project. For instance, if you created your project with
react-native init MyAwesomeProject, your project name is
When you are asked:
? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json?, reply with
And... that's it!
Congratulations, both your Android and your iOS app now have properly sized and set up icons: