Add Android Icons to React Native Project

Question

Problem

I'm trying to add icons to my React Native app for Android but I'm running into a big problem. The recommended way in the Android documentation isn't working for me.

When I right click on the res folder in Android Studio, I don't have the option to create a new "Image Asset" as seen in the "Android Studio Screenshot" below.

What I've Tried

1. I created a new React Native project on the same version I'm using and still don't have the option to create a new "Image Asset"
2. I've also tried using an online Android Icon generator and copying each image for each pixel density into the corresponding /res/mipmap folder. The app launches and the image I want shows up as the app Icon, however it isn't formatted properly. In the past I've used Android Studio's Image Asset creator to format the image properly. As you can see from the "Icon Screenshot" below, it's too small and should be taking up the entire icon circle instead of having the white boarder around it.

Has anyone expirenced this and have a suggestion?

Environment

• React Native 0.61.5
• Android Studio 3.1.3

Android Studio Screenshot

Icon Screenshot

Answer 1

To solve this problem I just opened the Android Studio with the terminal /opt/android-studio/bin/studio.sh. So after loading a lot of things, the options appear to me

Answer 2

In my case, the cause is that Android Studio isn't able to build gradle successfully (the error and solution can be found in this SO post).

Once Android Studio is able to build gradle, I can see "Image Asset".

Answer 3

I found out why I wasn't able to generate a new Image Asset from Android Studio!

I had to upgrade to the newest version of Android studio from 3.1.3.

I think this was because React Native 0.61.5 is using AndroidX which may not have been compatible with Android Studio 3.1.3 so it wasn't reading my Android project properly.

Once I upgraded Android Studio I was able to use Android Studio's Image Asset generator and properly format the icons!

Answer 4

Just go through this website to generate android assets and icons for icon AndroidAssetStudio and then just replace your current folder with this and rename icons accordingly

Answer 5

In projectName\android\app\src\main\AndroidManifest.xml setting like this

<application
 ...
      android:icon="@mipmap/picturename"  //(Mine without ".png" is work fine)
 ...
>

And the create file folder like this picture. Here is my project screenshot