Add App Icons and Launch Screens to React Native Apps (iOS & Android)

I was recently tasked with adding app icons to the React Native app we’re currently building. I found myself jumping around to a bunch of different places trying to find all of the information I needed, so I decided to put it all in one place.

Step 1: iOS icons

We’re not going to waste our time making a million different icon images ourselves, so go ahead and download Icon Set Creator.

Drag a 1024x1024 version of your icon onto the application and hit go (the default platform is iOS so you should be good to go here).

Icon Set Creator will give you a folder with all of the necessary icon sizes.

Now that you have all of your icons, open up your project in Xcode. In the main project folder you’ll find a folder called Images.xcassets and a file called AppIcon.

*Main-Project-Folder* > Images.xcassets > AppIcon

Here you’ll see placeholders for icons in your app. If you want to add iPad or CarPlay icons you can hit the button on the top right corner (Show the Attributes Inspector) to reveal more options.

Example with iPhone and iPad

Open up your newly generated icon folder and start dragging and dropping on the appropriate tiles. If it has a 2x or 3x under the tile, use that version. For example, the top left tile (iPhone Notification iOS 7–11 20pt 2x) will use the file called icon-20@2x.png. Just match up the pt value with the proper scale and you should be all set. Note that iPads use the 1x and 2x versions, while iPhone use 2x and 3x versions.

What it’ll look like when you’re done
All these new files

In your text editor you should notice some new files at ios>*Project Name*>Images.xcassets>AppIcon.appiconset. Should be able to rebuild your app and see your icons (in iOs only) 👍

Step 2: Android Icons

Hop on over to Android Asset Studio to make all of your Android Icons

Android Asset Studio

Drag the same icon file you used for the iOS icons (1024x1024) and edit away. Some cool tools here, go ahead and edit your icon so it looks good in all Android icon versions, and hit the download button in the upper right hand corner.

Once you have your icon folder, open up android>app>src>main>res. You should see a bunch of folders in here called mipmap-hdpi, mipmap-mdpi etc.

The folder you downloaded from Android Asset Studio will have those same folders. Just replace those files and you’ll be all set for Android icons 👍

Step 3: iOS LaunchScreen

Launch Screens are interesting. There’s basically 2 approaches apps seem to choose. The first one is the one pictured below, basically just a blank screen with logo in the center.

Approach #1 (What we’ll be making)

Second approach is basically an image of what your first screen is going to look like, minus all of the content.

Apple Photos app Launch Screen

We’re going to take the full screen centered logo route

Open up Xcode again and in the main project folder you’ll also see a file called LaunchScreen.xib.

Default Launch Screen

Click on that file and you’ll see the default launch screen (you’ve probably seen this if you’ve been working in the app at all). This is a fully editable art board and where we’ll be creating our launch screen.

By default it’s a square, which is weird. If you want to make it look like a certain device (Which isn’t necessary because our final launch screen is just going to be a centered logo), click the Show the Attributes Inspector button (4th from the left in the upper right hand corner, 2nd row) and change the Size dropdown from freeform to Page Sheet.

Select “Page Sheet” and open up the device window on the bottom

Now you’ll be able to view your Launch Screen on various devices.

Remove the default text: Do this simply by clicking on them and hitting the delete key.

Image View

Add Logo: On the bottom right you’ll see a list of components you can add to this file. Scroll down (or type “image” into the search filter) and find Image View. Drag that to the center of the art board.

Import in Images.xcassets

Adding the Logo to the Project: Go back to Images.xcassets and click on the little + on the bottom left and select Import. Don’t import the same image you used for the icons, but rather a more constrained version of the logo

Selecting the image in UIImageVIew: Once that image is in your project, hop back on over to LaunchScreen.xib. Click on the UIImageView component in the center of your art board, some options should appear in the right panel, the top one being an image dropdown. Hit that dropdown and your image should now be in the center of the art board.

It probably looks funky like mine does, so change the content mode from “Scale To Fill” to “Aspect Fit”.

Centering the Logo: It may seem to be centered, but if you switch the device you’re viewing it on you’ll notice it jumping all around. Switch over to the tab that looks like a ruler (Show the Size Inspector). All you want to do here is deselect the top and left red lines in the autosizing section, and select the two in the middle as shown above.

There. Bam. You did it.

Et voila, you should now have a fully resizable Launch Screen. Nice one 👍

Step 4: Android LaunchScreen

And last but not least, let’s tackle the Android side of this.

Head over Ape Tools. We’ll use this to generate all of the android launch screen sizes you’re going to need. Create the same screen we used above, inside a 2048x2048 PNG.

Like before, you’ll get a folder with a bunch of different sized images. And just like Android icons, we’re going to open up android>app>src>main>res and just drag those folders right into it. We’ll only need drawable-hdpi, drawable-mdpi, drawable-xhdpi, and drawable-xxhdpi.

I realize this goes against the point of this tutorial, but I’m a very busy man. Android requires a few more steps to get the Splash Screen working.

I’ve followed the steps in this tutorial and they work great!

https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae

Nice 👊