DEV Community

Cover image for How to Generate Release and Debug APKs in React Native📱
Amit Kumar
Amit Kumar

Posted on

How to Generate Release and Debug APKs in React Native📱

Generating APKs in React Native is a key step when you want to distribute your Android app for testing or production. This guide will walk you through the process of creating both release and debug APKs using the command line, npm scripts, and Android Studio.


🚀Generating a Release APK

🔑Step 1: Create a Keystore File

To generate a signed release APK, you need a keystore file. Run the following command in your terminal to create one:

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Enter fullscreen mode Exit fullscreen mode

💡This command will prompt you to set passwords and other details. Save the my-release-key.keystore file securely.

🛠️Step 2: Configure Gradle Properties

Move the my-release-key.keystore file to the android/app directory in your project. Then edit the ~/.gradle/gradle.properties file (create it if it doesn’t exist) and add the following lines:

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=****
MYAPP_RELEASE_KEY_PASSWORD=****
Enter fullscreen mode Exit fullscreen mode

Replace **** with your actual keystore passwords and alias.

📝Step 3: Modify build.gradle

Open the android/app/build.gradle file and ensure the signingConfigs block looks like this:

android {
    ...
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
            minifyEnabled false // Set to true for production to enable code obfuscation
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

⚙️Step 4: Build the Release APK

Run the following command to generate the release APK:

cd android
./gradlew clean
./gradlew assembleRelease
Enter fullscreen mode Exit fullscreen mode

📂 The release APK will be located at:

android/app/build/outputs/apk/release/app-release.apk
Enter fullscreen mode Exit fullscreen mode

🧪Generating a Debug APK

To generate a debug APK, run the following command:

cd android
./gradlew clean
./gradlew assembleDebug
Enter fullscreen mode Exit fullscreen mode

The debug APK will be located at:

android/app/build/outputs/apk/debug/app-debug.apk
Enter fullscreen mode Exit fullscreen mode

⚡Automating APK Generation with npm Scripts

Add the following scripts to the scripts section of your package.json file:

"scripts": {
    "build:android": "cd android/ && ./gradlew clean && ./gradlew assembleRelease",
    "build:android-debug": "cd android/ && ./gradlew clean && ./gradlew assembleDebug"
}
Enter fullscreen mode Exit fullscreen mode

Now you can build the APKs using these commands:

  • 🔥For release APK:
npm run build:android
Enter fullscreen mode Exit fullscreen mode
  • 🛠️ For debug APK:
npm run build:android-debug
Enter fullscreen mode Exit fullscreen mode

🖥️Generating APKs Using Android Studio

  1. Open your React Native project in Android Studio.
  2. Go to Build > Generate Signed Bundle/APK.
  3. Choose APK and click Next.
  4. Select your existing keystore file or create a new one:
  5. If creating a new keystore, provide the required information and remember the passwords.
  6. If using an existing keystore, load your my-release-key.keystore file and provide the passwords.
  7. Select the build type as release or debug.
  8. Click Finish to generate the APK.

✅Conclusion

You can now generate both release and debug APKs using either the terminal or Android Studio. The command-line approach offers flexibility, while Android Studio provides a user-friendly interface. Use the method that best suits your workflow.

Top comments (0)