React Native

React Native

Introduction

React native is a fast-growing platform to build hybrid “Mobile” (read not web) apps. It is an initiative by Facebook. Currently, it is in the development phase on version 0.56 it has still got many apps like UberEats in its showcase. The most powerful feature of react-native being flexible UI and fast development(read hot loading) it also has some bugs and issues. In this article, we will look at solutions to some common issues.

1.React Native version mismatch:

Reason for this error screen is that you are trying to run a new version of react native without closing the terminal or clearing caches. To solve this error first we need to get the react-native version. It can be done by typing the following command on the terminal from a react-native project root directory

react-native -v

This will give the react-native version on the system as shown in the screenshot below

now we need the react-native version on which our project is running . To get this we need to have a look at package.json file in the any react-native project and find the version mentioned there.

if both the versions match then you just need to restart the terminal. Otherwise change the version in package.json file to version shown in the terminal and run
npm install
which will download the required version again.

2.Multiple versions of same dependency

React-native throws silent errors a quality which it inherits from Javascript.Some times the app crashes without reporting any error when there  are multiple versions of the same dependency. Let us take an instance of integrating maps in an application.
Silent error is an anti-pattern in computer programming. The complier hides error messages by overriding them with exception handling. As a result of this the root error message is hidden from the developer (hence ‘error hiding’) and so they will not be told what the actual error is.
This is a screenshot of android folder of a react native app exported in android studio. As we can see in app’s gradle file google map services(gms)

Next checkout the gms version in built.gradle of react-native-maps module it should match the version stated in app’s built.gradle. If not make both the version same.
Or you can add following lines in app’s build.gradle to avoid this conflict

implementation(project(‘:react-native-maps’)){
exclude group: ‘com.google.android.gms’, module: ‘play-services-base’
exclude group: ‘com.google.android.gms’, module: ‘play-services-maps’
}
this will exclude the maps dependency if it is being downloaded again.

ProTip: Before debugging an app run react-native start —reset-cache. Some silent errors will be reported on this terminal while the app is running.

3.Unable to load assets index.android.bundle 

So it is end of the day, you have completed your tasks and planning to leave on time today. Just one more thing is left submitting your task for review. You follow these steps:
1.  cd android (from project directory)
2.  ./gradle assembleDebug
3.   go to ProjectFolder/android/app/build/outputs/debug.apk
All is going well and you feel like the king of the world ; Until you download the debug.apk and run it yourself
The Red Screen Of death awaits you my friend

Jokes Apart
This is very common error which comes because the app is actually running in debug mode and is still trying to run on localhost 8081. This error can also arise bundler is not able to assets folder where all assets must be ideally saved. As this problem can arise due to several reasons there are several solutions to this.

Solution #1
⦁ make an assets folder in your project at location given in the following command

mkdir android/app/src/main/assets

2.Run the following command to bundle the app

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 .

3.  Now go to the android folder and run assembleDebug
cd android && ./gradlew assembleDebug

Solution #2.
Following command will change the bundle output path from local host to the required path in the directory.

curl “http://localhost:8081/index.android.bundle?platform=android” -o  “android/app/src/main/assets/index.android.bundle”.

Pro Tip: if you have enabled “debug js remotely” option in developer menu disable it before building an app

Post A Comment

Your email address will not be published. Required fields are marked *