Today, as i was setting up a basic React native app on my company’s laptop, I cannot run the RN packager server which is default to port
8081. I ran the lsof -i :8081 but get nothing. Turns out I have to run it with
sudo because the app that uses this port is the Corporate Mcafee.
Ideally i do not want to uninstall/unload Mcafee unless I have to, try to find a work around first . (For
iOS, as of
Sep/2017, I did not find a way for
RN to work on a custom port, so have to unload McAfee, which is unfortunate.)
First thing to do is to run the packager server in a different port:
react-native start --port 8088
And now the packager server is up and running. However when i run
react-native run-android , it still tells me
JS server not recognized , so to get rid of this msg, i have to change some source code in the node module. The logic is in
node_modules/react-native/local-cli/util/isPackagerRunning.js, and we just need to change the port in the fetch function from 8081 to the
8088 that we use above.
Now the android app should be able to be installed in the virtual device and run. However we still could not leverage the
live reload capability of RN because if we double click
r to reload, we get a red screen saying cannot connect to
10.0.2.2:8081. This is because when we use
Genymotion virtual device, the code in
node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/AndroidInfoHelpers.java will return that url. So we need to cmd+M in the emulator, Go to Dev Settings → Debug server host for device, enter ‘localhost:8081’.
This is to overwrite the emulator’s debug server.(NOTE: if you are connecting your REAL android device, you do not have to change the above host). Now we have the last step which is to forward the request in our local VD’s 8088 port to our machine’s 8088 port which runs the packager server by doing:
adb reverse tcp:8088 tcp:8088
The first part is VD and 2nd one is for the hosting machine. More about adb reverse. (Note: even for the VD, try to avoid using 8081. It would work for normal development/reload, but will not work with
chrome remote debugging which still forwards the http request for
index.android.bundle to the host’s 8081 which is used by Mcafee.)
Now you should be able to change your index.android.js and hit
r twice or
cmd+M -> Reload to reload the VD.