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:
In an Ionic process, we could automate this process with a single command line, why not have the same for React Native?
Our toolbox is a set of Yeoman generators to kickstart your projects. The assets generator is one of these tools.
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>
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:!
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!