Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥 React Native developers are often in the situation of releasing their React Native apps to the Google Play Store so that Android users can download them. In this tutorial, we are going to learn how to generate a React Native Release Build APK for Android, using both React Native CLI and Android Studio IDE. At Instamobile, we launched all of our React Native Templates to production (Google Play Store demos), so we are familiar with the process as well as the errors that might show up when generating a React Native Release Build APK for Android. We are documenting our learnings in this React Native tutorial, to help mobile developers ship their Android apps to production more quickly. There are two ways to generate a production-ready build for Android, so we are presenting both of them below. Using React Native CLIFirst of all, make sure your Android project is error free. That means, it is compiling and running successfully on the emulator or on an Android device Thus, open the Android project using Android Studio or run it from the command line. If everything compiles as expected you are good to go. Step 1. Generate a keystoreYou will need a Java generated signing key which is a keystore file used to generate a React Native executable binary for Android. You can create one using the keytool in the terminal with the following command keytool -genkey -v -keystore your_key_name.keystore -alias your_key_alias -keyalg RSA -keysize 2048 -validity 10000 Once you run the keytool utility, you’ll be prompted to type in a password. Make sure you remember the password: Thus, this command prompts you for the password of the keystore, the actual key, and the distinguished name fields for your key. Hence, everything should be entered manually and carefully. Enter your keystore password: password123 Re-enter new password: password123 What is your first and last name? [unknown]: Dani Williams What is the name of your organizational unit? [unknown]: Sample Company What is the name of your organization? [unknown]: Sample What is the name of your city or Locality? [unknown]: XYZ What is the name of your State or Province? [unknown]: ABC What is the two-letter country code for this unit? [unknown]: XX Your terminal output will look similar to this: Press Enter when you’re prompted to enter the password for <my-key-alias>. Note: If you need to have a new key password, then type it in. As a result, it generates a key-store file on your project directory named my-release-key.keystore valid for 10000 days. Most importantly, back up this keystore file and its credentials (store password, alias, and alias password) which will be required later. Step 2. Adding Keystore to your projectFirstly, you need to copy the file your_key_name.keystore and paste it under the android/app directory in your React Native project folder. On Terminal, mv my-release-key.keystore /android/app You need to open your android\app\build.gradle file and add the keystore configuration. There are two ways of configuring the project with keystore. First, the common and unsecured way: android { .... signingConfigs { release { storeFile file('your_key_name.keystore') storePassword 'your_key_store_password' keyAlias 'your_key_alias' keyPassword 'your_key_file_alias_password' } } buildTypes { release { .... signingConfig signingConfigs.release } } } This is not a good security practice since you store the password in plain text. Instead of storing your keystore password in .gradle file, you can stipulate the build process to prompt you for these passwords if you are building from the command line. To prompt for password with the Gradle build file, change the above config as: signingConfigs { release { storeFile file('your_key_name.keystore') storePassword System.console().readLine("\nKeystore password:") keyAlias System.console().readLine("\nAlias: ") keyPassword System.console().readLine("\Alias password: ") } } Therefore, you should make sure the signingConfigs block appears before buildTypes block to avoid unnecessary errors. Moreover, before going any further, make sure you have an assets folder under android/app/src/main/assets. If it’s not there, create one. Then run the following command to build the bundle. 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/ Note: If you have a different entry file name, like index.android.js, change it within the command. Step 3. Release APK GenerationPlace your terminal directory to android using: cd android Then run the following command For Windows, gradlew assembleRelease For Linux and Mac OSX: ./gradlew assembleRelease As a result, the APK creation process is done. You can find the generated APK at android/app/build/outputs/apk/app-release.apk. This is the actual app, which you can send to your phone or upload to the Google Play Store. Congratulations, you’ve just generated a React Native Release Build APK for Android. There are frequent errors that show up in this process sometimes, which is typical to a React Native app, given React Native is continuously evolving. We are laying out here the most frequent React Native build errors that we ran into, to save you time and headaches. If your build fails with the following error: :app:processReleaseResources FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ‘:app:processReleaseResources’. > com.android.ide.common.process.ProcessException: Failed to execute aapt You can always solve this React Native Android build error by running: cd .. rm -rf android/app/src/main/res/drawable-* 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/build/intermediates/res/merged/release/ cd android && ./gradlew assembleRelease These are steps to generate a Release Signed APK in React Native for Android applications, that can be published to the Google Play Console. Generate a React Native Release Build with Android StudioAs previously, make sure your Android project is error free. Step 1: Set Up Your Android Production EnvironmentIn order to build the APK (the format of the app that you’ll upload to the Google Store), you need to install Android Studio. Most importantly, make sure you have SDK version 27 as this is what React Native uses. Step 2: Install the JDKYou also need to make sure you have a recent Java Development Kit installed (like version 8). The installation differs depending on your platform. As a result, you can use Oracle’s Java SDK or use SDKMAN to install other options, like OpenJDK. Step 3: Generate a Release APK using Android StudioNavigate to App Release sidebar. Here, you will see a list of tracks for various testing phases. Click on MANAGE in the production track. Then click CREATE RELEASE to create a React Native Android build APK. You will come across a message about using App Signing by Google Play. This is a new feature which puts the managing of keys into Google’s hands. This is an important feature because if you manage your own keys and you lose them, you will no longer be able to release updates for your app. In fact, you’d have to create a new one under a new name. For that, you will need to generate an upload key.
Thus, click on OK, then click on Next. Select both the V1 and the V2 signature version and click Finish. As a result, a build should start after which you should see both app-x86-release.apk and app-armeabi-v7a-release.apk inside of android/app/release in your project. In this way, you can generate the release version APK for your React Native Android project. This is the final step of generating a React Native Release Build for Android. You can now upload your app to Google Play. ConclusionCongratulations on completing this React Native Android Build tutorial using both React Native CLI and Android Studio. We hope you found this tutorial enlightening. Time to distribute your app to the Google Play Store. For detail referencing, you can go ahead and read the official documentation. Don’t forget to share this post if you found it useful. Happy Coding! Next StepsNow that you have learned about resources to learn React Native development, here are some other topics you can look into
If you need a base to start your next React Native app, you can make your next awesome app using many React Native template. How do you create APK file in React Native CLI?So to summarize, here were my steps:. Generate React Native bundle: react-native bundle --platform android --dev false --entry-file index. android. ... . Generate a Signed APK file from Android Studio.. Install Signed APK File to USB device: adb -d install -r <path_to_signed_apk> ... . Profit!. How do I release APK in React Native?The Process to Generate a Debug APK File Using React Native. Step 1: Asset Directory.. Step 2: Create Blank File.. Step 3: App Bundle Creation.. Step 4: Generate APK.. Step 1: Create a Keystore.. Step 2: Add Keystore to the Project.. Step 3: Release your APK generation.. |