Search code examples
iconsreact-native

How to add icons to React Native app

I am making a React Native app. I would like to customize the app icon (meaning the icon that you click on to start the app). I have Googled this, but I keep finding different types of icons that refer to different things. How do I add these types of icons to the app?

Solution

  • 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.