I am developing my React-Native app with Webstorm IDE on Android Device. Frequent file changes leave Expo XDE (Windows) in inconsistent state. In this Article, i will propose the workarounds for specific scenarios in order not to waste time.

photoandroid-wallpaper5_2560x1600_1reactexpoicon_200

This may not be the best practices, However, they worked for me to invest more time on learning more

Before you start

In order to generate apk, run the commad:


 # from the home directory, run the command:
 cd android && ./gradlew assembleRelease && cd ..
 # remove the app from the phone
 # tun the next command to install the created release in order to validate it: 
 react-native run-android --variant=release

Issues

  1. No Indication when a new reloading is triggered.
  2. On slow LAN Connection, the reloading takes time. reloads collision causes unexpected state.
  3. RED Screen or Opened warning stops live reload

Webstorm: Aweful IDE to work with as it caches changes and applies them when needed. this is not the case when working with angular format. as a result, you need to do several changes so webstorm stores  them on the disk and trigger the auto-reload.

How to handle stuck EXPO

One of the methods to be sure that expo is stuck is to install traffic indicator on your android to make sure that there is no traffic going on.

Disable live reload

In this case, you will avoid unintended app reloading on partial changes. you reload the app manually after you finish the change.

How? Do this by clicking on the settings 333c17d3f12ea8608a05d1c2deda0f0a and then uncheck Dev mode

Keep live reload but disable IDE Auto Saving

I am against this approach as for me, pressing Ctl+s is auto-triggered.

Workarounds

When I face the states depicted in the figures below, I do the following:

  1. Close the app on the mobile
  2. Restart the project (Without holding the Shift key) on Expo XDE Windows App
  3. Press Ctl+d or go to Device->Run on android