One of the first things you have to do when creating an app is adding app icons.

There are resources online like this Stackoverflow post explaining how to manually set up your React Native 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!

Our toolbox is a set of Yeoman generators to kickstart your projects. The assets generator is one of these tools.

Install RN toolbox

To use it, you need ++code>node 6++/code> installed.

Then, install the generator with:

++pre>++code>npm install -g yo generator-rn-toolbox
++/code>++/pre>

To generate your icons, the generator uses ImageMagick. On macOS, you can install it with:

++pre>++code>brew install imagemagick
++/code>++/pre>

Use RN toolbox

Have a single icon file at the ready somewhere. 200x200px is sufficient.
‍

Then in your React Native project, run:

++pre>++code>yo rn-toolbox:assets --icon <path to your icon>
# For instance
yo rn-toolbox:assets --icon ../icon.png
++/code>++/pre>

You will be asked for the name of your react-native project. For instance, if you created your project with ++code>react-native init MyAwesomeProject++/code>, your project name is ++code>MyAwesomeProject++/code>.

When you are asked:

++code>? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json?++/code>, reply with ++code>Y++/code>.

And... that's it!

Congratulations, both your Android and your iOS app now have properly sized and set up icons:!

UPDATE:

The generator also generates the Splashscreens for you! Check it out here.


If you have any questions, ideas or issue with our generator, feel free to post them here!