React Native - Adding App Icons for Android

Recently, I started dabbling in React Native to prep for a new job. Coming from React, things felt familiar. However, it feels like there is less documentation/articles/tutorials out there compared to anything related to the web (which makes sense - React Native hasn't even released a v1).

One of the things I've been working with is adding an app icon for the Android version of the app I'm building. The goal of this post is to share everything I've learned so far so that maybe it will help you avoid any challenges I ran into.

WARNING: As mentioned, I am new to React Native, so please take what I say here with a grain of salt. If you find something that is incorrect, please let me know in the comments.

So let's get to it! 🕺🏼

What do I need to know?

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 9.0 (also known as Pie).

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?

Luckily, this answer is pretty straightforward.

Assuming you created your project using the React Native CLI, they will live here:

|- android
|-- app
|--- src
|---- main
|----- res

You'll have a bunch of different directories that are prefixed with mipmap and suffixed with different sizes like hdpi and mdpi for instance.

These will each contain your icon in different sizes.

How do I make my icons?

I recommend designing your icons in Figma. You should create two layers:

1. a background layer - the background of the icon
2. a foreground layer - the icon

I created mine in at 108 x 108 and then exported them as PNGs at 1x.

Then I followed @_s_farias 's post called "How to create adaptive icons for Android using Android Studio". This made it very easy to create the icons because Android Studio generated all of them for me and even created most of the necessary subdirectories. 😄

*One thing to note:

• I did have to manually create a drawable directory within res. I then copied the files from the mipmap-xxxhdpi to the drawable directory. I don't know if this is right, but the build succeeded and it worked 🤷🏼‍♂️ (Hoping someone will explain the correct way to do this).

Common Errors

• Forgetting to update the AndroidManifest.xml file

In the very beginning, I ran into errors because I forgot to update these two lines within this file:

      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"

• resource drawable/ic_launcher_foreground not found

Your build is failing because you didn't create the drawable directory. See "One thing to note" in previous section.

Anyways - thanks for reading - hope this helps with you React Native Android icons! 🙏🏼

LearnInPublic