Setting Icons to React Native Apps (iOS and Android)
You are at the finish line. Your hard work has paid off and that wonderful, cool, hip mobile app is ready to conquer the world. Congratulations! However, before you open that champagne bottle or a sparkling tea, if alcohol is not your thing, there is one last step, which is adding the icons to your react native app.
Adding icons to iOS apps
The first step is to create Xcode image catalogs from your saved images. We are launching an app for a cat café so we have chosen an accompanying adorable image. If you do not have an icon but would quickly like to find one, you can use an icon from Flaticon as we are using in this post. The Iconizer app can be used to generate your file in a format suitable for multiple Apple platforms including iPhone, iPad, and Mac. Click on File >>> Open and open your image file. After the image has been opened, deselect all of the preselected platforms except iPhone and if you like iPad (depending on whether your app is developed for iPad as well). Click on the save icon in the top right corner.
There should be a youriconname.appiconset folder with icons in various sizes ranging from icon-40 to icon-1024.
Open your project in Xcode by opening the .xcworkspace file. Click on the project navigator tab and then click on Images.xcassets. Select the entire folder generated by Iconizer, youriconname.appiconset, and add it to the left panel of the Images.xcassets (image below). Rename your icon to AppIcon in Xcode. Remove the app from your iOS device due to potential caching issues on iOS, and click on Product >>> Run or CMND ⌘+ R in Xcode.
Adding icons to Android apps
For Android, the only icon that is needed is the image icon. In Android Studio, open the android folder of your project. In the project panel select app >>> src >>> main >>> res. Following this, right-click and select new >>> Image Assets (image below).
Go to the Source Asset section and from the asset Path select the image icon we would like to use, in this case, it is the adorable cat icon. In the Foreground Layer, we can trim and resize the icon in the scaling section (image below). In the Background Layer, we can choose a background color in the Source Asset section (image below). Click on Next and then click on Finish. This will create app icons in different screen sizes. Build the app and run it again and you should see that it now will have the new icon. Congratulations, you can now open that champagne or sparkling tea bottle. Be careful of that cork though. 🍾
