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

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"];