Generate your React Native app icons in a single command line

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 icons in a React Native app:

  • 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 React Native toolbox!

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

Install it

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

Use it

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

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 MyAwesomeProject.

When you are asked:

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

And… that’s it!

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