Addressing frequent errors in React Native

React Native is without doubt one of the most used JavaScript cell frameworks in the present day. React Native permits builders who’re aware of JavaScript and the React internet framework to develop cell purposes utilizing related strategies and rules.

As a React Native developer, you’re sure to run into some errors when creating your utility. When an error is detected by the compiler when working the code, it terminates the method and shows an error message.

Error messages in React Native are very descriptive. They inform the developer what error occurred and the place the error was detected. As well as, they typically present clear directions or a minimum of a clue on methods to resolve the problem.

Some errors are inherently simpler to debug than others. For instance, errors that occur on account of utilizing the fallacious syntax or accessing undefined variables or parts are simpler to debug than errors brought on by misconfigurations or incompatible dependencies.

Whatever the nature of the error, you’ll typically need assistance to resolve them.

On this put up, I’ll cowl some frequent React Native errors and their options. A few of these errors can have totally different options relying on what causes the error within the first place. For such errors, undergo the options one after one other.

Be happy to skip to any of the next sections utilizing the hyperlinks under:

Failed to put in the app

After creating a brand new React Native mission, when trying to run the app for the primary time with the command react-native run-android, you would possibly encounter the next error:

BUILD FAILED in 13s

error Failed to put in the app. Be sure to have an Android emulator working or a tool related. Run CLI with --verbose flag for extra particulars.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Construct failed with an exception.
...

This error message says that the construct course of wasn’t profitable and likewise specifies the actual command that failed. Typically you’ll be able to eliminate the error by merely utilizing new command prompts and restarting the digital gadgets.

Oftentimes, nonetheless, the error is brought on through the use of an incompatible Gradle model to construct the app.

The Android studio construct system requires the best model of Gradle to efficiently construct Android apps. On this case, you’ll have to improve the Gradle model utilized in your app to 1 that’s appropriate along with your Android studio construct system.

Comply with these steps:

1. Open your React Native utility in a textual content editor like VS Code
2. Within the utility’s root folder, navigate to android > gradle > wrapper
3. Edit the gradle-wrapper.properties file
4. Replace the distributionUrl variable with the URL for a appropriate model of Gradle
5. Run react-native run-android once more to construct the app utilizing the brand new model.

Right here’s the total path for steps two and three:

{your-project-folder}androidgradlewrappergradle-wrapper.properties

To get the correct model of Gradle for step 4, go to Gradle’s distributions record and verify for the most recent -all.zip Gradle model. Then, replace the distributionUrl variable as follows:

distributionUrl=https://providers.gradle.org/distributions/gradle-{newest model}.zip

To be taught extra about Gradle and Android studio, learn the Android Gradle plugin and Android Studio compatibility article.

Unable to load script

One other error that builders generally encounter when trying to run their React Native utility is proven under:

Unable to load script. Be sure to're both working a metro server (run 'react-native begin') or that your bundle 'index.android.bundle' is packaged appropriately for launch.

This error is all the time displayed on the related Android gadget. There are a number of causes for this error. As such, there are totally different options too.

Resolution 1: Bundle the bundle appropriately

All your app’s JavaScript is bundled into the index.android.bundle file. If the bundle file is unavailable or not appropriately packaged, you’ll get the Unable to load script error. Comply with the directions under to repair it.

Go into {your-project-folder}/android/app/src/foremost/ folder and verify if an property folder exists inside it. If the property folder isn’t already there, create it.

Subsequent, instantly out of your root folder, run this:

cd android
./gradlew clear

Subsequent, open a command terminal and ensure it’s pointed to your mission’s root folder. In case your mission has only one file (i.e index.js), run the next command:

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

If there are two recordsdata (i.e. index.android.js and index.ios.js) then run the next as an alternative:

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

Be aware that each are single instructions.

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

To execute all of the above steps directly, you’ll be able to place them within the scripts part of package deal.json like so:

"android-script": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/foremost/property/index.android.bundle --assets-dest android/app/src/foremost/res && react-native run-android"

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

Resolution 2: Use adb reverse

If you happen to hold getting the identical error after implementing the primary answer, then it’s worthwhile to contemplate different causes. One other frequent trigger is that the port wasn’t uncovered. This occurs in case you’re working your app on a bodily gadget.

The adb reverse command permits you to to show a TCP port in your Android gadget with a TCP port in your pc. To strive fixing the error, run the next command:

adb reverse tcp:8081 tcp:8081

Right here you might be exposing TCP port 8081 on the cellphone by way of port 8081 in your pc.

If you happen to shouldn’t have the Android platform instruments element in your Home windows PATH variable, then the adb executable is discovered on the following path:

C:Customers{your-username}AppDataLocalAndroidsdkplatform-tools

Resolution 3: Add cleartext help

If the primary two choices don’t remedy React Native’s incapacity to load the script, then it’s possible that the error is coming from a community communication downside.

Particularly, it’s possible that the app is inaccessible from the event server because of cleartext help being disabled, as is the case from Android 9.0 (API stage 28) onwards.

To repair this, modify the AndroidManifest.xml file and add cleartext help as follows:

<?xml model="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:title="android.permission.INTERNET" />
    <utility
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </utility>
</manifest>

You’ll find your AndroidManifest.xml file in:

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

Restart your utility for the change to be utilized.

React Native run-android command is unrecognized

Typically if you try to run your React Native app on Android, you would possibly get the next error message on the command immediate:

Command run-android unrecognized. Did you imply to run this inside a react-native mission?

The error message already hints at the commonest reason for the error: you’re not working the command in a React Native folder. On this case, the answer is to easily make sure that you navigate to your utility’s root folder earlier than working the app. That is what I imply:

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

// Be sure to navigate to the mission folder:
cd AwesomeProject

// Earlier than you run the app:
react-native run-android

In any other case, if the error wasn’t a results of utilizing the fallacious folder, then it’s doable that you just didn’t set up the contents of the mission. To try this, run:

npm set up or yarn set up

It’s additionally doable that your international set up of react-native or react-native-cli is outdated or damaged. On this case, merely reinstall your libraries globally utilizing one of many following instructions:

npm:

npm set up -g react-native && npm set up -g @react-native-community/cli

Yarn:

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

As a observe, I like to recommend utilizing npx (included in npm v5.0+) to put in libraries on demand.

Which means that everytime you run npx react-native init <your-project-name> or another React Native CLI command, it’ll first ask on your permission to put in react-native earlier than creating the mission. This ensures that you just all the time use the most recent model always!

Lastly, if the entire above fails to work, you would possibly have to improve your npm with the next command:

npm set up [email protected] -g

Be certain that you run every of those instructions utilizing a brand new terminal. That is to stop utilizing outdated path sources in your .bashrc file.

react-native command not discovered

command not discovered: react-native is one other frequent error in React Native. You encounter this error when trying to run any react-native command, corresponding to if you attempt to initialize a React Native mission, like so:

react-native init MyProject

The command not discovered error has two potential causes: both you shouldn’t have the CLI put in in your native machine, otherwise you do, however it’s not correctly configured.

Each of those eventualities will be averted through the use of npx for all npm executables. For instance, to create a brand new React Native app, run it with npx as follows:

npx react-native init MyProject

It will set up the most recent obtainable model of the react-native package deal earlier than initializing the mission.

Unrecognized command: “hyperlink”

When trying to hyperlink property like {custom} fonts or icons in a React Native mission, you would possibly get the next error in your command terminal:

error Unrecognized command "hyperlink". data Run "react-native --help" to see a listing of all obtainable instructions.

This error happens if you try to make use of the handbook linking characteristic (i.e. react-native hyperlink and react-native hyperlink unlink instructions), which have been eliminated in React Native 0.69 and changed with autolinking.

To keep away from this error, you’ll want to make use of a third-party asset linking library corresponding to react-native-asset to hyperlink property routinely.

First, set up the library with one of many following instructions:

npm set up -g react-native-asset
# or in case you're utilizing yarn: 
yarn international add react-native-asset

Then create a react-native.config file on the root stage of the mission folder and add the under code snippet:

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

Run one of many under instructions to allow automated linking and unlinking in your codebase.

npm:

npx react-native-asset

yarn:

yarn react-native-asset

Now you need to use any of the required property in your code. For instance, you need to use a {custom} font in your stylesheet:

fontFamily: 'my-custom-font'

Duplicate sources

One other frequent error that you just would possibly face when trying to generate a launch APK utilizing Generate Signed APK from Android Studio is the Duplicate Useful resource error:

[drawable-mdpi-v4/jumper] /Customers/admin/Initiatives/testApp/android/app/src/foremost/res/drawable-mdpi/jumper.png [drawable-mdpi-v4/jumper] /Customers/admin/Initiatives/testApp/android/app/construct/generated/res/react/launch/drawable-mdpi-v4/jumper.png: Error: Duplicate sources
:app:mergeReleaseResources FAILED

FAILURE: Construct failed with an exception.

...

The construct failure occurred as a result of duplicated sources have been discovered within the Android mission contained in the Android folder. There are numerous options for this relying on the trigger.

Resolution 1: Cleansing the drawable folder from the terminal

Oftentimes you’ll be able to eliminate the error just by cleansing the drawable folder from the terminal utilizing Gradle. To do that, cd into the android folder, then run ./gradlew clear earlier than trying to run the app once more:

react-native run android

If it fails, strive the following answer.

Resolution 2: Add some helper code

Most occasions, merely cleansing the drawable folder received’t resolve the problem. If that’s the case, then you definately’ll have to make a slight modification within the react.gradle file to stop duplicate useful resource collisions.

Add the next helper code within the react.gradle file present in node_modules/react-native/react.gradle. The code ought to be positioned proper after the doFirst block:

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

This error was solved in 2018 by GitHub person echaso, who offered the code above.

Conclusion

On this article, we checked out six frequent errors in React Native and the way every of those errors will be debugged. If the error you encountered isn’t included right here, don’t hesitate to verify this text for doable options.

In any case, thanks for studying and see you subsequent time!