How to fix all build errors in react native(Android specific).

When I first started to build Android apps with react native, I was soo frustrated with the framework and almost gave up on it. This is because anytime I tried to compile the app with npx react-native run-android I run into a lot of errors. Fixing one error after days of google searching and reading through stack overflow threads, produces a different set of errors which will then take another few days to resolve and the process repeats until you eventually give up or the app miraculously compiles. It was a nightmare.

In this article I will be showing you how to avoid all the errors I have encountered and how to avoid them or fix them in case you run across them while developing your app in react native.

1. Always read the documentation of a package or its npm repository page for how to correctly install a package

This is a common source of error when building apps with react-native. Sometimes you don't have the time to read the step by step processes involved in installing and setting up the package to work with your application, so you rush through the installation guide and end up missing an important step required to integrate the package with the platform you are working with.

React native compiles code to a specific native platform. This means that sometime to make a package to work with a platform for example android, you have to make some changes to native code and build tools.

Lets take a popular framework for example react-native-vector-icons, which is a library that allows you to use vector icons from different vector icons toolkits all in one place including FontAwesome, Ionicons, MaterialIcons, AntDesign and so on. You install this package using:

npm install react-native-vector-icons

And then you can start using the library? well… not quite. If this is all you do, then be ready for some nasty errors and frustration. As you can see from https://www.npmjs.com/package/react-native-vector-icons you need to make some changes in Xcode if you are building for iOS and you also need to make some changes to files inside the android folder if you want this package to work with the android platform. Specifically for android, you have to make changes to these files:

android/app/build.gradle 
android/app/src/main/assets/fonts 
android/settings.gradle 
android/app/src/main/java/<your_android_app_package_name>/MainApplication.java

as specified by the link above.

The setup might be quite tedious, but strictly following the steps judiciously will save you a lot more headache down the line.

There are some packages that require you to install other packages for it to work correctly. take for example, @react-navigation/native library https://reactnavigation.org/docs/getting-started/, which requires you to install react-native-screens and react-native-safe-area-context. But on android devices, react-native-screens requires you to configure android/app/src/main/java/<your_android_app_package_name>/MainActivity.java, adding the following to the MainActivity class:

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

and requires you to add an import statement at the top of this file:

import android.os.Bundle;

before you can start using the library in your project.

Basically, any library you install with

npm install <package-name>

make sure you find and follow the installation instruction for that package.

Also, if eventually you need to update a package, or maybe you are creating a new react-native app in which you decide to use a newer version of a package, make sure you check for breaking changes, and check if additional steps are required to make the new version work.

2. Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.3 (or other similar error with other Gradle versions)

Basically, what this error is trying to tell you is that this particular package does not support the Gradle version you are using for your android build. Everyone has dealt with this error at one point if you've use npx react-native init <Project-name> to generate a new react native application.

Why does this error happen?

This happens because react-native init is always shipping the latest version of Gradle to your android project, and third party libraries might not have support for that Gradle version, making your Gradle version incompatible with the library.

What you need to do is install a earlier version of Gradle for your project and then rebuild your app.

Step 1: install a earlier version of Gradle

To see your version of Gradle, go to the android folder of your project and type gradlew -v:

cd android
gradlew -v

Go to https://developer.android.com/studio/releases/gradle-plugin. Scroll down to the Update Gradle section. Here, you will see a table of Gradle version and Plugin version.

As you can see, during the time of this writing, the latest Gradle version is 7.3+ and the associating Plugin version is 7.2.

As a rule, what I normally do is pick the previous Gradle version 3 steps away from the latest version. In this case, it is Gradle version is 6.7.1+ and the associating Plugin version is 4.2.0+. You can pick the Gradle version that is most suitable for you.

Now, open android/build.gradle in a text editor. you will see something like this:

buildscript {
...
dependencies {
classpath("com.android.tools.build:gradle:7.2.0")
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}

classpath("com.android.tools.build:gradle:7.2.0") is in the form classpath("com.android.tools.build:gradle:").

Therefore change the plugin version to the version you chose from the table above. this line will now be:

classpath("com.android.tools.build:gradle:4.2.0")

Open android/gradle/warpper/gradle-wrapper.properties in a text editor. You will see something similar to this:

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.0-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

We are interested in the line distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.0-all.zip

this line is in the form

distributionUrl=https\://services.gradle.org/distributions/gradle-<gradle-version>-all.zip

Change the Gradle version to match the plugin version you selected. this line should then look like this when you are done:

distributionUrl=https\://services.gradle.org/distributions/gradle-6.7.1-all.zip

Step 2: Rebuild the app

From your project folder, run the following command:

rm -r android/build ; rm -r android/app/src/release/res ; rm -r android/app/build/intermediates

All this command does is delete the previous build of the app by deleting the folders that contain them. you can delete the folders manually if you like: android/build, android/app/src/release/res, android/app/build/intermediates.

when you are done, go into the android folder and clean gradle:

cd android
gradlew clean

make sure you now have the Gradle version you specified:

gradlew -v

Go back to your root project folder and build the app:

cd..
npx react-native run-android

Your app should now build smoothly with all "Deprecated Gradle features were used in this build" errors now gone. If the error continues, try a more earlier Gradle version. Don't go too far back though.

3. java.io.IOException: Could not delete path

Sometimes you see errors that looks like this this:

* What went wrong:
Execution failed for task ':@myApp/react-native-spinkit:mergeReleaseResources'.
> java.io.IOException: Could not delete path 'C:\Users\My\Desktop\App\node_modules\@myApp
\react-native-spinkit\android\build\intermediates\res\merged\release\drawable-xhdpi-v4'.

I notice I get these types of errors when I make changes to Gradle like changing the Gradle version or changing the range of android versions I support in my android/build.gradle file. When changes that affect the current android build are made, Gradle will try to delete files from the old build and create new files. This error shows that some other program is currently accessing these files and preventing them from being deleted. Most of the time it is the Metro Bundler that is preventing these files from being deleted. So you need to rebuild without running Metro. There are two ways to do this:

• Method 1:Clean Gradle

Run this code, making sure that Metro is not running:

cd android
gradlew clean

• Method 2:Stop Metro manually

Build your app using:

npx react-native run-android

when the metro terminal comes up, close it.

After the app has been bundled, run npx react-native run-android again. This time, allowing Metro to run.

Your app should now be installed and run as expected.

4. Expiring Daemon because JVM(Java Virtual Machine) heap space is exhausted.

When you are building your react native android app, you might encounter the error: heap limit allocation failed. this happens when you have a lot of libraries and your app becomes larger.

This error mostly shows up when you are generating the release AAB of your android app after signing it with a release key to upload on Google Play Store.

To fix this, you will have to increase the heap memory allocation.

To do this, open the file android/gradle.properties in a text editor and add the following lines to the end:

org.gradle.daemon=true
org.gradle.jvmargs=-Xmx4g -XX:MaxPermSize=2048m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

Then open the file android/app/build.gradle in a text editor. Add the following under the android task:

android {
...
  dexOptions {
    javaMaxHeapSize "4g"
  }
...
}

Your app should now build smoothly with no error.

These errors are the root of most errors in react-native android build fails. Fixing it will save you from a lot of errors that crop up from fragmental solutions.

If you are still having trouble with these errors as I did, or are hoping to start android app development with react native, I hope this will save you a lot of time, stress and energy better spent in doing productive work.