Note: this is part 5 of a series of posts, aimed at building a React Native app from the ground up. If you haven’t already done so, it’s worth starting from the beginning of the series.
In part 4, we finished the development of our app, adding some polish to the UI. It’s time to turn our attention to delivering the app to our users, beginning with the app icon.
Mobile apps are launched from the device’s home screen (iOS) or launcher (Android). Both platforms display a list of apps, each represented with an app icon and a title.
React Native automatically assigns the app title according to the name that we used when scaffolding the project, but we must create the app icon ourselves.
The first step is to generate a png file which contains the app icon. We are going to create two versions:
I’ve decided to use the boat Material Design icon, which will be displayed on our blue background. Designing and creating the icon asset is out of the scope of this post, but when creating your icon ensure you produce two variants as described above, and make them 1024px square.
iOS uses many different icon sizes for the various different devices. You can find a reference of every app icon size at the Apple Human Interface Guidelines. Once the icon sizes have been produced, they need to be imported to Xcode as an asset catalog.
Creating each icon size manually is tedious and error prone, but thankfully there is an open source project which takes care of all of this: app-icon. We are going to use it to generate our iOS icons.
To run the icon generator, we are going to use npx to download and run the necessary script files as follows:
Note: if you have homebrew, installing imagemagick is as simple as running
brew install imagemagick.
npx app-icon generate
The script will resize the icons to the necessary sizes and import them into the Xcode AppIcon asset catalog automatically.
To see the icon in action, you’ll need to re-compile your app. From the terminal run
Your app will load in the simulator. With the simulator in focus, press Cmd-Shift-h - this should minimise the app and present the iOS home screen, with your app icon in all its glory!
Note: iOS icon assets should be square, and do not support transparency. iOS automatically adds the rounded corners.
Android icons are split into two distinct sections:
app-icon module has also generated Android icons, but currently only supports legacy icons. To create adaptive icons, we need to use an alternative method.
We are going to use Android Studio to generate our app icons.
appfolder and click on the
resfolder to select it.
icon-fg.pngimage, select it and click Open.
Android Studio will generate all of the necessary files to support both Adaptive and Legacy launcher icons. To check that the icons work correctly, from the terminal run
When the app launches, press the Home soft key to return to the launcher, and see your Android icon in all its glory.
We’ve added app icons for the iOS and Android variants of our app, supporting the latest devices and versions (at the time of writing).
If you’d like to learn more about building an app with TypeScript and/or React Native, I run in-person or remote workshops which walk through the fundamentals of building apps with these cutting-edge tools. If you are interested in learning more, let me know and I’d be happy to chat further!