Creating App Icons

App icons appear on a user's home screen and invites them to launch your application. Both Android and iOS require a number of different sizes of icons to accommodate different screen resolutions. We recommend creating a hi-res image (at least 192x192) and using a service such as App Icon Maker to batch resize all possible sizes.

Configuration

The following entry should be located in your environment file. You can substitute the location of your icon directories if you choose.

appIconDir: {
  android: 'assets/appIcon/android',
  ios: 'assets/appIcon/ios'
}

Android

The specified Android directory (assets/appIcon/android in this example) should contain five folders: mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, mipmap-xxhdpi, and mipmap-xxxhdpi. Each folder should contain one png file named ic_launcher.png. Each icon should have a specified resolution per the Android specifications:

folder	dimensions
mipmap-hdpi	72x72
mipmap-mdpi	48x48
mipmap-xhdpi	96x96
mipmap-xxhdpi	144x144
mipmap-xxxhdpi	192x192

Once complete, your folder structure should look as seen here:

Run init to copy the files to the appropriate places within the Android native directory, and on next startup your icons should appear.

iOS

For iOS, React Native uses the Image Set format from Xcode. In short, Xcode generates a Contents.json file that associates image files with their locations and resolutions. Both the Contents.json file and the images should be placed in the specified directory, assets/appIcon/ios in this example.

Here's a sample Contents.json file for an iPhone-only app; this can be copied into your app if you choose

{
  "images" : [
    {
      "size" : "20x20",
      "idiom" : "iphone",
      "filename" : "Icon-40.png",
      "scale" : "2x"
    },
    {
      "size" : "20x20",
      "idiom" : "iphone",
      "filename" : "Icon-60.png",
      "scale" : "3x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "Icon-58.png",
      "scale" : "2x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "Icon-87.png",
      "scale" : "3x"
    },
    {
      "size" : "40x40",
      "idiom" : "iphone",
      "filename" : "Icon-80.png",
      "scale" : "2x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "Icon-120.png",
      "scale" : "2x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "Icon-180.png",
      "scale" : "3x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

Each of the file names should correspond with png files of the same name. If you used Xcode to generate the Contents.json file, you may need to change each of the filename properties to point to the current directory. Once complete, your appIcon folder should appear similar to this:

Run init to copy the files into the iOS native directory, and then your icons should be available on next app startup.