Addressing common errors in React Native

React Native is one of the most used JavaScript mobile frameworks today. React Native enables developers who are familiar with JavaScript and the React web framework to develop mobile applications using similar methods and principles.

As a React Native developer, you’re bound to run into some errors when developing your application. When an error is detected by the compiler when running the code, it terminates the process and displays an error message.

Error messages in React Native are very descriptive. They tell the developer what error occurred and where the error was detected. In addition, they often provide clear instructions or at least a clue on how to resolve the issue.

Some errors are inherently easier to debug than others. For example, errors that happen as a result of using the wrong syntax or accessing undefined variables or components are easier to debug than errors caused by misconfigurations or incompatible dependencies.

Regardless of the nature of the error, you’ll often need help to resolve them.

In this post, I’ll cover some common React Native errors and their solutions. Some of these errors will have different solutions depending on what causes the error in the first place. For such errors, go through the solutions one after another.

Feel free to skip to any of the following sections using the links below:

• Failed to install the app
• Unable to load script
• React Native run-android command is unrecognized
• react-native command not found
• Unrecognized command: “link”
• Duplicate resources

Failed to install the app

After creating a new React Native project, when attempting to run the app for the first time with the command react-native run-android, you might encounter the following error:

BUILD FAILED in 13s

error Failed to install the app. Make sure you have an Android emulator running or a device connected. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.
...

This error message says that the build process wasn’t successful and also specifies the particular command that failed. Sometimes you can get rid of the error by simply using new command prompts and restarting the virtual devices.

Oftentimes, however, the error is caused by using an incompatible Gradle version to build the app.

The Android studio build system requires the right version of Gradle to successfully build Android apps. In this case, you’ll need to upgrade the Gradle version used in your app to one that is compatible with your Android studio build system.

Follow these steps:

1. Open your React Native application in a text editor like VS Code
2. In the application’s root folder, navigate to android > gradle > wrapper
3. Edit the gradle-wrapper.properties file
4. Update the distributionUrl variable with the URL for a compatible version of Gradle
5. Run react-native run-android again to build the app using the new version.

Here’s the full path for steps two and three:

{your-project-folder}\android\gradle\wrapper\gradle-wrapper.properties

To get the accurate version of Gradle for step four, go to Gradle’s distributions list and check for the latest -all.zip Gradle version. Then, update the distributionUrl variable as follows:

distributionUrl=https\://services.gradle.org/distributions/gradle-{latest version}.zip

To learn more about Gradle and Android studio, read the Android Gradle plugin and Android Studio compatibility article.

Unable to load script

Another error that developers commonly encounter when attempting to run their React Native application is shown below:

Unable to load script. Make sure you're either running a metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.

This error is always displayed on the connected Android device. There are several causes for this error. As such, there are different solutions too.

Solution 1: Package the bundle correctly

All of your app’s JavaScript is bundled into the index.android.bundle file. If the bundle file is unavailable or not correctly packaged, you’ll get the Unable to load script error. Follow the instructions below to fix it.

Go into {your-project-folder}/android/app/src/main/ folder and check if an assets folder exists within it. If the assets folder isn’t already there, create it.

Next, directly from your root folder, run this:

cd android
./gradlew clean

Next, open a command terminal and make sure it’s pointed to your project’s root folder. If your project has just one file (i.e index.js), run the following 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

If there are two files (i.e. index.android.js and index.ios.js) then run the following instead:

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Note that both are single commands.

After the bundle has been generated, run react-native run android.

To execute all the above steps at once, you can place them in the scripts section of package.json like so:

"android-script": "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 && react-native run-android"

The command for the above is npm run android-script.

Solution 2: Use adb reverse

If you keep getting the same error after implementing the first solution, then you need to consider other causes. Another common cause is that the port wasn’t exposed. This happens if you’re running your app on a physical device.

The adb reverse command lets you to expose a TCP port on your Android device with a TCP port on your computer. To try fixing the error, run the following command:

adb reverse tcp:8081 tcp:8081

Here you are exposing TCP port 8081 on the phone via port 8081 on your computer.

If you do not have the Android platform tools component in your Windows PATH variable, then the adb executable is found at the following path:

C:\Users\{your-username}\AppData\Local\Android\sdk\platform-tools

Solution 3: Add cleartext support

If the first two options don’t solve React Native’s inability to load the script, then it’s likely that the error is coming from a network communication problem.

Specifically, it’s likely that the app is inaccessible from the development server due to cleartext support being disabled, as is the case from Android 9.0 (API level 28) onwards.

To fix this, modify the AndroidManifest.xml file and add cleartext support as follows:

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

You can find your AndroidManifest.xml file in:

{your-project-folder}/android/app/src/main/AndroidManifest.xml

Restart your application for the change to be applied.

React Native run-android command is unrecognized

Sometimes when you attempt to run your React Native app on Android, you might get the following error message on the command prompt:

Command run-android unrecognized. Did you mean to run this inside a react-native project?

The error message already hints at the most common cause of the error: you’re not running the command in a React Native folder. In this case, the solution is to simply ensure that you navigate to your application’s root folder before running the app. This is what I mean:

// After initializing a project:
react-native init AwesomeProject

// Make sure to navigate to the project folder:
cd AwesomeProject

// Before you run the app:
react-native run-android

Otherwise, if the error wasn’t a result of using the wrong folder, then it’s possible that you didn’t install the contents of the project. To do that, run:

npm install or yarn install

It’s also possible that your global installation of react-native or react-native-cli is old or broken. In this case, simply reinstall your libraries globally using one of the following commands:

npm:

npm install -g react-native && npm install -g @react-native-community/cli

Yarn:

yarn global add react-native && yarn global add @react-native-community/cli

As a note, I recommend using npx (included in npm v5.0+) to install libraries on demand.

This means that whenever you run npx react-native init <your-project-name> or any other React Native CLI command, it’ll first ask for your permission to install react-native before creating the project. This ensures that you always use the latest version at all times!

Lastly, if all of the above fails to work, you might need to upgrade your npm with the following command:

npm install npm@latest -g

Ensure that you run each of these commands using a new terminal. This is to prevent using outdated path sources in your .bashrc file.

react-native command not found

command not found: react-native is another common error in React Native. You encounter this error when attempting to run any react-native command, such as when you try to initialize a React Native project, like so:

react-native init MyProject

The command not found error has two potential causes: either you do not have the CLI installed on your local machine, or you do, but it’s not properly configured.

Both of these scenarios can be avoided by using npx for all npm executables. For example, to create a new React Native app, run it with npx as follows:

npx react-native init MyProject

This will install the latest available version of the react-native package before initializing the project.

Unrecognized command: “link”

When attempting to link assets like custom fonts or icons in a React Native project, you might get the following error on your command terminal:

error Unrecognized command "link". info Run "react-native --help" to see a list of all available commands.

This error occurs when you attempt to use the manual linking feature (i.e. react-native link and react-native link unlink commands), which have been removed in React Native 0.69 and replaced with autolinking.

To avoid this error, you’ll need to use a third-party asset linking library such as react-native-asset to link assets automatically.

First, install the library with one of the following commands:

npm install -g react-native-asset
# or if you're using yarn: 
yarn global add react-native-asset

Then create a react-native.config file at the root level of the project folder and add the below code snippet:

module.exports = {
    project: {
        ios: {},
        android: {}
    },
    "assets": [
      "./src/assets/font",
      "./src/assets/mp3",
      "./src/assets/icons"
  ]
};

Run one of the below commands to enable automatic linking and unlinking in your codebase.

npm:

npx react-native-asset

yarn:

yarn react-native-asset

Now you can use any of the specified assets in your code. For example, you can use a custom font in your stylesheet:

fontFamily: 'my-custom-font'

Duplicate resources

Another common error that you might face when attempting to generate a release APK using Generate Signed APK from Android Studio is the Duplicate Resource error:

[drawable-mdpi-v4/jumper] /Users/admin/Projects/testApp/android/app/src/main/res/drawable-mdpi/jumper.png [drawable-mdpi-v4/jumper] /Users/admin/Projects/testApp/android/app/build/generated/res/react/release/drawable-mdpi-v4/jumper.png: Error: Duplicate resources
:app:mergeReleaseResources FAILED

FAILURE: Build failed with an exception.

...

The build failure occurred because duplicated resources were found in the Android project inside the Android folder. There are various solutions for this depending on the cause.

Solution 1: Cleaning the drawable folder from the terminal

Oftentimes you can get rid of the error simply by cleaning the drawable folder from the terminal using Gradle. To do this, cd into the android folder, then run ./gradlew clean before attempting to run the app again:

react-native run android

If it fails, try the next solution.

Solution 2: Add some helper code

Most times, simply cleaning the drawable folder won’t resolve the issue. If that’s the case, then you’ll need to make a slight modification in the react.gradle file to prevent duplicate resource collisions.

Add the following helper code in the react.gradle file found in node_modules/react-native/react.gradle. The code should be placed right after the doFirst block:

doLast {
    def moveFunc = { resSuffix ->
        File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}");
        if (originalDir.exists()) {
            File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");
            ant.move(file: originalDir, tofile: destDir);
        }
    }
    moveFunc.curry("ldpi").call()
    moveFunc.curry("mdpi").call()
    moveFunc.curry("hdpi").call()
    moveFunc.curry("xhdpi").call()
    moveFunc.curry("xxhdpi").call()
    moveFunc.curry("xxxhdpi").call()
}

This error was solved in 2018 by GitHub user echaso, who provided the code above.

Conclusion

In this article, we looked at six common errors in React Native and how each of these errors can be debugged. If the error you encountered isn’t included here, do not hesitate to check this article for possible solutions.

Anyways, thanks for reading and see you next time!