How to add icons to React Native app

Question

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?

Answer 1

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.