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.
Obviously i do not want to uninstall Mcafee from the corporate laptop, I have to find a work around.
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. Now we have the last step which is to forward the request in our local VD’s 8081 port to our machine’s 8088 port which runs the packager server by doing:
adb reverse tcp:8081 tcp:8088
More about adb reverse.
Now you should be able to change your index.android.js and hit
r twice or
cmd+M -> Reload to reload the VD.