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

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

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.

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.

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.

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

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

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

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

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.

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.

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.

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.

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.

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