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 are 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

Scott Stewart
Jan 18, 2018 · 6 min read
Image for post
Image for post
Photo by Rami Al-zayat on Unsplash.

Step 1: iOS icons

Image for post
Image for post

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

Image for post
Image for post
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.

Image for post
Image for post
*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.

Image for post
Image for post
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.

Image for post
Image for post
What it’ll look like when you’re done
Image for post
Image for post
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

Image for post
Image for post
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.

Image for post
Image for post

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

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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 for post
Image for post
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.

Image for post
Image for post
Image for post
Image for post
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

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post
There. Bam. You did it.

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

Step 4: Android LaunchScreen

Image for post
Image for post

Head over to 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.

Image for post
Image for post

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.

Thanks for reading.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store