react-native: hot-loading on two devices simultaneously in development - react-native

Question

I'm developing an app for both Android and iOS at the same time and I have my two phones in front of me. I have hot-loading enabled on both of them, but it seems only the last phone I touched will hot-load and the other one stays inactive until I shake it and choose "reload js" again.
Is this intended behaviour?

Answer 1

I ran into this issue too.
You can get around it by running the packager on two separate ports. In my package.json I have:
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start ",
"port-8082": "node node_modules/react-native/local-cli/cli.js start --port 8082",
},
And in my iOS startup code in AppDelegate I changed the port to 8082 e.g.
jsCodeLocation = [NSURL URLWithString:#"http://localhost:8082/index.ios.bundle?platform=ios&dev=true"];
So then I run npm start in one terminal session (which starts on the default port 8081), and npm run port-8082 in another session. Then 8081 will serve the Android device and 8082 the iOS device, and you can use Hot Reloading on both devices simultaneously.
Edit: With the change of react-native file architecture, the AppDelegate code is now:
jsCodeLocation = [NSURL URLWithString:#"http://localhost:8082/index.bundle?platform=ios&dev=true"];

Answer 2

I use this method to debug both Android and iOS platforms at the same time:
Add ["port-8082": "react-native start --port 8082"] in package.json under "scripts" section to launch another metro process to support Android platform. (You could input [npm run port-8082] to launch this metro process)
Using [adb -s <DeviceName> reverse tcp:8081 tcp:8082] to make Android device(port:8081) mapping to MacOS(port:8082).(You could use [adb devices] to find the <DeviceName> of Android Device)