How to add icons to React Native app

by

iOS Icons

  • Set AppIcon in Images.xcassets.
  • Add 9 different size icons:
    • 29pt
    • 29pt*2
    • 29pt*3
    • 40pt*2
    • 40pt*3
    • 57pt
    • 57pt*2
    • 60pt*2
    • 60pt*3.

Images.xcassets will look like this:

Android Icons

  • Put ic_launcher.png in folders [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
    • 72*72 ic_launcher.png in mipmap-hdpi.
    • 48*48 ic_launcher.png in mipmap-mdpi.
    • 96*96 ic_launcher.png in mipmap-xhdpi.
    • 144*144 ic_launcher.png in mipmap-xxhdpi.
    • 192*192 ic_launcher.png in mipmap-xxxhdpi.

Update 2019 Android

The latest versions of react native also supports round icon. For this particular case, you have two choices:

A. Add round icons:
In each mipmap folder, add additionally to the ic_launcher.png file also a round version called ic_launcher_round.png with the same size.

B. Remove round icons:
Inside yourProjectFolder/android/app/src/main/AndroidManifest.xml remove the line android:roundIcon="@mipmap/ic_launcher_round"and save it.

Otherwhise the build throws an error.

Leave a Comment