DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Alen
Alen

Posted on • Updated on

Generating Android APK file with React Native

Let's be honest, even if you really like React Native, you were frustrated with it at least once. Especially if you have just started working with it.

So I hope this post will help at least some of you :D.

This are 7 steps how to generate your Android APK file so you can test your app on a real phone and share it with your friends or testers.

Currently tested and working with latest version today 0.64

  1. Generate private signing key using keytool. How to do that you can find it here. If you are using OpenJDK, then your keytool is probably in C:\Program Files\OpenJDK\openjdk-xxxxx-xxx\bin.

  2. Make sure to copy signing key to /android/app/ folder of your react native app.

  3. Edit gradle.properties file in your android folder by adding following (make sure to replace ***** with a password that you want to use, my-upload-key and my-key-alias with the names you want):

     MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore<br>
     MYAPP_UPLOAD_KEY_ALIAS=my-key-alias<br>
     MYAPP_UPLOAD_STORE_PASSWORD=*****<br>
     MYAPP_UPLOAD_KEY_PASSWORD=*****<br>
    
  4. Add signing config in Gradle config file. Edit the build.gradle file in your android/app/ folder:

    ...
    android {
     ...
     defaultConfig { ... }
     signingConfigs {
         release {
             if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                 storeFile file(MYAPP_UPLOAD_STORE_FILE)
                 storePassword MYAPP_UPLOAD_STORE_PASSWORD
                 keyAlias MYAPP_UPLOAD_KEY_ALIAS
                 keyPassword MYAPP_UPLOAD_KEY_PASSWORD
             }
         }
     }
     buildTypes {
         release {
             ...
             signingConfig signingConfigs.release
         }
     }
    }
    ...
    
  5. Check if the file my-release-key.keystore ("my-release-key" is the key you entered earlier) is located in path /android/app/ (if it is not there, make sure to copy it there from the folder where your key was created).

  6. Create assets folder in /android/app/src/main/

  7. Open your terminal and position yourself to root folder. Run command:

    react-native bundle --platform android --dev false --entry-file 
    index.js --bundle-output 
    android/app/src/main/assets/index.android.bundle --assets-dest 
    android/app/src/main/res
    
  8. Open one more terminal and position yourself into android folder. Run command:
    gradlew clean
    or
    ./gradlew clean

  9. After previous command is finished run:
    gradlew assembleRelease -x bundleReleaseJsAndAssets
    or
    ./gradlew assembleRelease -x bundleReleaseJsAndAssets

  10. If everything goes well, you can find your signed apk file in android/app/build/outputs/apk/
    or
    android/app/build/outputs/apk/release/

Top comments (3)

Collapse
 
yoiler_cordoba profile image
Yoyler Cรณrdoba

Thanks this helped me a lot

Collapse
 
kamalhossain profile image
Kamal Hossain

In step 2, you should mention user must save the generated my-upload-key.keystore file in specific path first.

Collapse
 
alencengic profile image
Alen Author

I did some updates. Thank you for your comment.

๐ŸŒš Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.