React native is a technology launched by Facebook and excessively being used by mobile application developers for developing Android and iOS applications at same platform. To make development faster such platforms provide some options like: reloading, enabling hot-reload, enabling live-reload. These are the one which use Just-In-Time compilation process to render the screen faster with effective changes without wasting time in building again and again.
Oh, wait…
To get the benefits of Just-In-Time compilation all we need to do is connecting the debugging device with development server. However, if the connection with the development server is lost, the app will stay in its old state. Now the problem comes. Once the app is disconnected it cannot be run in its present state. To solve this problem, I have written this blog and you are here. Here, I shall reproduce the problem with creating a new project and then shall solve it.
Major steps include:
⦁ Initiate a react-native project
⦁ Run the project on debugging device
⦁ Reproduce the problem
⦁ Applying the solution
⦁ Possible issues and solution
Let’s start with it.
⦁ Initiate a react-native project:
To create a new project for react-native open the terminal and move to desired directory where you want the project to reside and type following command. Here, i have named the project as testDebug.
react-native init testDebug
Once the command is ran successfully, we can check its folder structure using CLI and GUI. Here, I am showing it with CLI:
To list all the directories made in the root directory of the project, navigate to root directory and run the command:
ls -al
⦁ Run the project on debugging device:
As of now we have initiated the project successfully. Now it’s time to build the app with default codes. To build the application first connect the debugging device with the working PC using USB and do not forget to enable developer option and USB debugging option. Once it is done successfully, to cross verify, run the following command on the terminal:
adb devices
This will list out attached devices with the PC.
NOTE: To run this command, ADB is required to be downloaded first. For more details on ADB click here.
Now let’s start the metro bundler to initialize a development server to debug the app. To start it type following command in another terminal:
react-native start –reset-cache
The option reset-cache given in the command resets any previous stored cache.
As of now all is set. Let’s run the project with command:
react-native run android
Once build is completed and above command is executed successfully, a screen renders on the debugging device with default react-native welcome screen.
On the other side, metro bundler starts running to launch the app on device as soon as the build is completed successfully.
Till now we have created a project and executed it successfully with metro bundler running. Next we shall reproduce the problem and then will try to resolve it with a few steps.
Let’s move on.
⦁ Reproduce the problem:
As of now as our app is connected with development server, we can get benefits of Just-In-Time compilation. To enable these options just shake debugging device once and a list of options will be there.
For now we shall enable only hot reloading and rest are out of the scope here.
Once we enable the hot reloading, app relaunches from start and on the metro bundler reloads the app
Once we start developing and make changes in the code, development server renders change on the device screen.
Now after a few changes in the code, if we detach USB, device loses its connection with development server and throws an error:
java.io.EOFException
webSocketJavaScriptExecutor.java
To run the project successfully even after disconnecting with the development server we need to follow a few steps which are explained in the next section.
Let’s solve the problem.
⦁ Applying the solution:
In order to solve this problem, first we have to make an assets directory then bundle application. To create an assets directory move to android/app/src/main from the root directory of the project and create a directory named assets.
Now from the root directory run following command to bundle the application
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
And the last step is to rebuild app with the command react-native run-android. Now if we remove the USB and disconnect the connection from development server, it will run on its last sate without throwing any error on screen.
4. Possible issues and solution:
Finally, we have launched our app without maintaining its connection with development server. However, there are some cases when these steps will not work. Not to worry for it. In this section, these cases are briefly mentioned.
In the start of the blog we understood the need of development server and its connection with the debugging device. When we do follow above steps we have to check if any option is enabled which requires device connection with its development server. If it is so, app tries to find or establish connection with the development server which was lost after plugging out USB. As it is still looking for the development server and not found to work with those enabled options it throws an error saying development server not found.
To overcome this problem, we have to disable all the options which require connection with development server. To do so just shake debugging device, disable all the options which were enabled on start like: disable hot-reloading, live-reloading and then follow the apply solution section again.
And, here we go. We have launched our app successfully in its present state without USB debugging.
