[fa icon="calendar"] Publié le 03 November 2016 par Alexandre Moureaux


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

If you don't have, you can use this one to try it out:Calendar App Icon

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:

react-native-app-icon-simulator.png


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!


Liked this article? Interested in building an app with us?

Contact a React Native expert in Paris




Want to rate this article?
Submit Rating

Topics: React Native, Android