Monday, January 20, 2020

Setup react-native for Android on Windows 10 and build .apk

As being just a newbie at react-native, I ran into many obstacles trying to setup everything for it. I spent quite a while resolving all issues, googling every bug and making my first 'pomodoro' app working. So I decided to track some steps here I did just in case I forget them and I can to refresh my memory reading this post :). Almost everything here is as is, without detailed explanation. But it works. At least for me.

1. Install Java (JRE and JDK). Initially I installed the latest version of java - that one that was the latest on the 15.01.2020. It did not work with latest Android SDK and I had to delete it and install the specific one - 8.231 (jre-8u231-windows-x64 & jdk-8u231-windows-x64).
After installation, a new system variable must be added JAVA_HOME = C:\Program Files\Java\jdk1.8.0_231 (or another place where the jdk has been installed). Also add the path to the system PATH variable.

2. Install Android Studio. I installed the latest one, it has been good enough. While choosing the components for installation, include the AVD virtual device - that is the most important part. I am pretty sure that it is possible to not install the whole AndroidStudio stuff, but necessary packages only. It would take me even longer, so if it is enough space on the hard drive just install whole the studio. There are many packages required by react-native so it is easy to miss something during manual installation.

3. Set env variables (system). Add 2 new system variables:
ANDROID_SDK_ROOT = Path to your SDK folder (For me it is C:\Users\abuntsev\AppData\Local\Android\Sdk)
ANDROID_HOME = The same as ANDROID_SDK_ROOT. This variable is now deprecated, but I recommend setting it because some programs still using it to locate the sdk.
Add to the PATH variable:
[ANDROID_SDK_ROOT]/emulator
[ANDROID_SDK_ROOT]/platform-tools
[ANDROID_SDK_ROOT]/tools/bin
replacing [ANDROID_SDK_ROOT] with the actual path to SDK.

4. Accept licenses. Run the command sdkmanager --licenses, it gives a list of all unaccepted licenses. Accept them.

5. Check that a virtual device has been installed successfully.
Run the command emulator -list-avds, it must return the list of devices. For me it is just one 'Nexus_5X_API_29_x86'.
If the list is empty, something went wrong. Probably, AVD has not been included during Android Studio installation. If it is ok, try to run the emulator with the command emulator -avd Nexus_5X_API_29_x86. It must display the specified Android emulator.

6. Install react-native. npm install -g react-native react-native-cli

7. Create new react-native project. react-native init my_project
Note: Project name must not start with '_'. Initially I tried so - no error, no warning appeared, but it did not build it later on.

8. Run the project with the command react-native run-android. It must run various processes (starting JS server, launching emulator, downloading gradle, starting a gradle deamon), additinal cmd window will be opened (very useful for logging, i.e. all console.log(..) messages are displayed there). For displaying logs in another window, open new cmd window and run there react-native log-android.


Possible errors.

I know that the error list during the running process could be literally endless, but I'd like to mention just few that I met.

Error: The current character read is 'E' with an int value of 69.
Solution: delete "app\build\intermediates\signing_config\debug\out\signing-config.json"

Error: SecurityException: Requires VIBRATE permission.
Solution: Update the file 'AndroidManifest.xml' - add the following permissions:
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission-sdk-23 android:name="android.permission.VIBRATE"/>

Error: Deprecated Gradle features were used in this build, making it incompatible with Gradle 5.0.
Solution: Run .\android\gradlew.bat build --warning-mode=all
It gives detailed description of erros/warnings or if it builds successfully try react-native run-android again


How to build .apk

1. Add C:\Program Files\Java\jre1.8.0_231\bin to the PATH environment variable.

2. keytool -genkey -v -keystore my-app-key.keystore -alias my-app-alias -keyalg RSA -keysize 2048 -validity 10000
Enter password and details.

3. Create the folder .\android\app\src\main\assets if it does not exist.

4. 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/

5. cd ./android folder and run ./gradlew assembleRelease. if happens the following error Execution failed for task ':app:mergeReleaseResources' Duplicate resources
add the following code in node_modules/react-native/react.gradle. After doFirst

doLast {
   def moveFunc = { resSuffix ->
      File originalDir = file("$buildDir/generated/res/react/release/${resSuffix}");
      if (originalDir.exists()) {
         File destDir = file("$buildDir/../src/main/res/${resSuffix}");
         ant.move(file: originalDir, tofile: destDir);
      }
   }
   moveFunc.curry("drawable-ldpi").call()
   moveFunc.curry("drawable-mdpi").call()
   moveFunc.curry("drawable-hdpi").call()
   moveFunc.curry("drawable-xhdpi").call()
   moveFunc.curry("drawable-xxhdpi").call()
   moveFunc.curry("drawable-xxxhdpi").call()
   moveFunc.curry("raw").call()
}
Eventually, it has to generate the .apk file somewhere here ./app/build/outputs/apk/release/app-release.apk.

6. To install the .apk onto a mobile phone, attach it via usb and allow 'USB debugging' feature via the phone settings. Then run adb install -r ./app/build/outputs/apk/release/app-release.apk. The -r option is used to rewrite the app if it is already installed.

Congratulations, the app has been installed!

No comments:

Post a Comment