Fixing Android App Icon Cropping in React Native (Adaptive Icons)

The Problem

Your beautifully designed app icon appears zoomed in and severely cropped on the Android home screen, losing its edges and looking unprofessional. This happens on Android 8+ (API 26+) due to Adaptive Icons – the system applies a mask (circle, squircle, rounded square) and scales up your icon to fill the mask, cropping anything near the edges.

Standard icon generation tools like app-icon, rn-ml, and react-native-make only generate PNG files for different densities. They do not handle the safe zone requirements of adaptive icons, so even if the generated PNGs look correct in the project folder, the Android system will still zoom and crop them at runtime.

The Solution

Create (or modify) the folder android/app/src/main/res/mipmap-anydpi-v26/ – this folder takes precedence over density-specific folders on Android 8+. Then add an <inset> element around the foreground drawable to create internal padding. This keeps your design inside the safe zone that the system mask respects.

Modified XML files

ic_launcher.xml

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@color/ic_launcher_background"/>
    <foreground>
        <inset android:drawable="@mipmap/ic_launcher_foreground"
               android:inset="16%" />
    </foreground>
</adaptive-icon>

ic_launcher_round.xml (same content)

The inset="16%" adds a 16% margin around your design. Start with 16%; if cropping still occurs, increase to 20-25%. After updating these files, uninstall the app completely from your device/emulator and rebuild – the system caches old icons.

Why This Works

The <inset> tells Android to shrink the effective drawing area of your icon before the mask is applied. Your original image remains intact, but the system sees a smaller version with transparent borders, so when it scales to fill the mask, the actual design stays visible without being cropped.

Conclusion

If you're facing icon cropping issues in your React Native Android app, don't waste time regenerating images or trying different tools. The definitive solution is to manually add <inset> to your mipmap-anydpi-v26 files. This method works with any generation tool and is Google's standard practice for adaptive icons.