How to Add App Icon to React Native Android App

Add App Icon to React Native Android App | This is a continuation of my previous tutorials and I am using the directory location and names of my project I set up before. After you code an Android app in React Native, you have to generate an apk to distribute via play store. But before that, you need to set an Icon to your android app. You can do it with an image editor but you have to export the files portable for all the android devices. Don’t 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 React Native app.

1. CREATE AN ICON IMAGE USING AN IMAGE EDITOR

First, you need an image version of the app icon. You can design your own icon image using your favorite image editors like Photoshop. Just save your image with a jpg or png extension. Square size will be better.

2. GENERATE APP ICON USING ANDROID ASSET STUDIO

Android Asset Studio is an online app icon generator service which is one of the easiest ways of making your app’s icon with the image you give.

The link below will direct you to Android Asset Studio.

https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

This will be the page you see with the above link. From here, you are starting the work.

1. Select Image tab in the foreground option. Then select the icon image you created in the previous step from your local system.
2. Adjust the padding you need.
3. Now you can select a shape of your app icon from the menu. The available shapes are Square, Circle, Tall rect, and Wide rect. You can also continue with no shape. If the image you uploaded is a png with a transparent background, no shape option will make the app icon as the shape of the image you uploaded.
4. If you need an effect for your icon, you can also set it.

You can customize your app icon as you like from here. After all, you can see an option to set the name. Do not change it. This must be ic_launcher as default.

The Android app icon you are making is portable for all devices. You can see the various sizes from Android Asset Studio itself by clicking SEE ALL under your icon preview.

After you customize your icon, download the zip file ic_launcher.zip by clicking the download button on the top right.

3. UNZIP IC_LAUNCHER.ZIP

I believe that the zip file you downloaded will be there in Downloads directory of your system. Unzip it using the below command.

On Terminal,

sudo apt-get install unzip
sudo unzip /Downloads/ic_launcher.zip -d AppIcon

You 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 REACT NATIVE PROJECT

Copy the items in res directory under AppIcon to res directory in your project. The following command will take care of it.

On Terminal,

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. We have a solution for replacing this too.

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 res directory under your project. Also, You need to add the line shown below to AndroidManifest.xml file under android/app/src/main directory.

android:roundIcon="@mipmap/ic_launcher_round"

So your  Round or Circle icon is also set.

Note: If you already run your project on your device, you need to uninstall it. Then run react-native run-android to install the modified app on your device again.

Have a nice code !