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:
- Open your React Native utility in a textual content editor like VS Code
- Within the utility’s root folder, navigate to
android > gradle > wrapper
- Edit the
gradle-wrapper.properties
file - Replace the
distributionUrl
variable with the URL for a appropriate model of Gradle - 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.
Extra nice articles from LogRocket:
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!
LogRocket: Immediately recreate points in your React Native apps.
LogRocket is a React Native monitoring answer that helps you reproduce points immediately, prioritize bugs, and perceive efficiency in your React Native apps.
LogRocket additionally helps you improve conversion charges and product utilization by exhibiting you precisely how customers are interacting along with your app. LogRocket’s product analytics options floor the explanation why customers do not full a selected move or do not undertake a brand new characteristic.
Begin proactively monitoring your React Native apps — strive LogRocket at no cost.