In order to add app icons (more commonly called “launch icons”) to your Android version of your React Native app, there are a few things you need to know:
- Should my icon be square or round?
- Where do the icons live within my app?
- How do I make them?
We’ll tackle these one at a time.
Should my icon be square or round?
The answer is it depends.
Depending on the OEM device, the system will decide whether it will use a “squareish” icon or a round icon. When I ran my app on the Pixel 2 emulator, the square icon was placed “into” a circular icon and it looked ugly .
After looking at the docs, I found this section which explained why that was happening:
You must only use the android:roundIcon attribute if you require a different icon asset for circular masks, if for example the branding of your logo relies on a circular shape.
The logo/icon I was using had a circular shape hence why I had an issue.
In addition to the square and round icons, you may want to create what’s known as an “adaptive icon”. According the the Android Developer Docs, “adaptive launcher icons” were introduced in Android 8.0. As of this writing, the latest version is Android 10.0.
To summarize, you may need both, depending on the shape of your icon. And you should definitely check out adaptive icons.
Where do the icons live within my app?
Assuming you created your project using the React Native CLI, they will live here:
You’ll have a bunch of different directories that are prefixed with mipmap and suffixed with different sizes like hdpi and mdpi for instance.
Steps for
- 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. Or 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
You can customize your app icon as you like from this link. 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.
UNZIP IC_LAUNCHER.ZIP
I believe that the zip file you downloaded will be there in Downloads directory of your system.
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.
COPY RES DIRECTORY TO REACT NATIVE PROJECT
Copy the items in res directory under AppIcon to res directory in your project.
On Terminal,
AwesomeProject/android/app/src/main/res/
That’s it. Now the Icon is set to your React Native Android App.
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.
