In React Native, you can set the launcher icon for your Android app by customizing the app’s AndroidManifest.xml file and providing the necessary icon resources. Here are the steps to set the launcher icon in React Native for Android:

Step 1: Prepare Icon Resources

  1. Generate Icon Images:
    Create launcher icon images for various screen densities. Common densities include mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi. The icon sizes for these densities are typically 48×48, 72×72, 96×96, 144×144, and 192×192 pixels, respectively.
  2. Place Icons in the Correct Folders:
    Place the generated icon images in the res directory of your Android project. The directory structure should look like this:
   android/app/src/main/res/mipmap-mdpi/ic_launcher.png
   android/app/src/main/res/mipmap-hdpi/ic_launcher.png
   android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
   android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
   android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png

Step 2: Update AndroidManifest.xml

  1. Navigate to the android/app/src/main directory:
    Open the AndroidManifest.xml file located in the android/app/src/main directory.
  2. Update the application tag:
    Inside the <application> tag, set the android:icon attribute to the reference of your launcher icon. This should be in the format @mipmap/ic_launcher.
   <application
     android:name=".MainApplication"
     android:label="@string/app_name"
     android:icon="@mipmap/ic_launcher"
     ...
   >

Step 3: Link Resources in Gradle

  1. Open android/app/build.gradle:
    Open the build.gradle file located in the android/app directory.
  2. Ensure the Following Block is Present:
    Make sure the android block contains a sourceSets block that includes the res.srcDirs for your resources.
   android {
       ...
       sourceSets {
           main {
               res.srcDirs = [
                   'src/main/res',
                   ...
               ]
           }
       }
   }

Step 4: Build and Run

After making these changes, you can rebuild your React Native project and run it on an Android emulator or device:

npx react-native run-android

Your custom launcher icon should now be displayed when you run your React Native app on an Android device or emulator.

React, React Native

Tagged in: