After we code an Android app in React Native, we have to generate an APK to upload it to the play store. But before that, we need to set an app Icon to our React Native android app.
We can design an app icon with an image editor but we have to export the image files portable for all the android devices. It’s better not to go for it.
Adding an app icon to React Native is an easy process. Here I am going to create and add a square icon and a round/circle icon to a React Native app.
1. Design an app icon using an image editor
First, we need an image version of the app icon. We can design our own icon image using an image editor like Photoshop.
Just save your image with a jpg or png extension. Square size will be better.
2. Generate an app icon using the Android asset studio tool
So after designing an app icon image, we need to generate an app icon using the image.
Android Asset Studio is an online icon generator tool that is one of the easiest ways of making our app’s icon with the image we give.
The below url will direct us to Android Asset Studio.
https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html
This will be the page we see after opening the above URL. From here, we are starting the work.
2.1 Upload the icon designed
Select the Image tab in the foreground option. Then select the icon image we created in the previous step from our local system.
2.2 Adjust the padding
Now adjust the padding as we needed.
2.3 Select the shape
Now we can select the shape of our app icon from the menu. The available shapes are Square, Circle, Tall rect, and Wide rect. We can also continue with no shape.
If the image we uploaded is a png with a transparent background, no shape option will make the app icon the shape of the image you uploaded.
2.4 Select effect
If we need an effect for our icon, we can also set it.
We can customize our app icon as we like from here. After all, we can see an option to set the name. Do not change it. This should be ic_launcher as default.
The Android app icon we are making is portable for all devices. We can see the various sizes from Android Asset Studio itself by clicking SEE ALL under our icon preview.
After we customize our icon, download the zip file ic_launcher.zip by clicking the download button on the top right.
3. Unzip ic_launcher.zip
The zip file we downloaded will be there in the Downloads directory of your system. If we are using a Linux system, unzip it using the below command.
sudo apt-get install unzip sudo unzip /Downloads/ic_launcher.zip -d AppIcon
Note: Windows/Mac users can unzip the zip file graphically.
We can see a directory named res under AppIcon. The items inside res have to be copied to our react-native project in the next step.
4. Copy res directory to our React-Native project
Copy the items in the res directory under AppIcon to the res directory in your project. The following command will take care of it.
sudo cp -r Downloads/AppIcon/res/* /var/www/html/AwesomeProject/android/app/src/main/res/
That’s it. Now the icon is set to your React Native Android App.
5. Setting up round icon
the latest version of React native also supports a circle icon for each icon size.
Make an app icon from Android Asset Studio with a circle shape and name ic_launcher_round.
Download this, unzip and copy the res directory contents of this to the res directory under our project. Also, We need to add the line shown below to the AndroidManifest.xml file under the android/app/src/main directory.
android:roundIcon="@mipmap/ic_launcher_round"
So our Round or Circle icon is also set.
If we already run the project on our device, we need to uninstall it and run react-native run-android to install the modified app on your device again.
Summary
In this article, we learned the steps to add an app icon to our android app build using React Native framework. Android asset studio is one of the best tools to make this process easier.
