07: React Native Icons: From Design to Production in Minutes

#webdev #programming #opensource #learning

React Native has given JavaScript developers the ability to ship truly native iOS and Android applications from a shared codebase. But beneath the shared JavaScript layer, React Native applications are fundamentally native apps — which means they require native icon assets that must meet the exact specifications of both iOS and Android.

React Native's dual-platform nature means that icon preparation is essentially doing iOS and Android icon generation simultaneously, with all the complexity each platform entails. A React Native project contains an ios folder with Xcode project files and an android folder with Gradle build files, and each expects icons to be placed in very specific locations with very specific names. Understanding this folder structure is essential for any React Native developer.

iOS Icons in a React Native Project

The iOS side of a React Native project uses Xcode's standard asset catalog for icons. Icons live in ios/[ProjectName]/Images.xcassets/AppIcon.appiconset/ and must be accompanied by a Contents.json file that maps each icon file to its usage and scale. Every size listed in Contents.json must have a corresponding PNG file, or the Xcode build will fail.

Android Icons in a React Native Project

The Android side places icons in the standard Android resource directories:

android/app/src/main/res/mipmap-mdpi/
android/app/src/main/res/mipmap-hdpi/
android/app/src/main/res/mipmap-xhdpi/
android/app/src/main/res/mipmap-xxhdpi/
android/app/src/main/res/mipmap-xxxhdpi/

Each directory expects an ic_launcher.png and an ic_launcher_round.png file at the appropriate pixel density. Modern React Native projects using Adaptive Icons also need ic_launcher_foreground.png in each density folder.

1. Prepare Your Source Image

Start with a square PNG or SVG at least 1024×1024 pixels. Ensure your logo is centered and has sufficient padding from the edges for Android's safe zone.

2. Generate All Platform Sizes

Use Iconify to generate all iOS and Android sizes simultaneously — all correctly named, all at the right pixel dimensions.

3. Place Files in Correct Directories

Copy iOS icons into the xcassets folder and Android icons into the correct mipmap-* resource directories.

4. Update Contents.json (iOS)

Ensure the iOS Contents.json properly references all icon files. Tools that generate a complete iOS icon set typically include this file automatically.

5. Build and Verify

Run a clean build for both iOS and Android and visually verify the icon appears correctly in simulators and on real devices.

The entire process above is dramatically simplified when you use Iconify to generate your React Native icon assets. All files emerge from the tool already named correctly and ready to place in the right directories. Learn about React Native support at iconify.roboticela.com.