Cannot use Live Reload/Hot Reload on a device

Question

Everything is fine when I am developing on a simulator but right now I am in the phase where my app is almost done but have to change some visual small things on a real device. For this reason I would like to have the same option as when testing on a simulator: Live reload or Hot reload.

Here is the popup when I shake the device:

As you can see I do not have the options: "Enable Live Reload" or "Enable Hot Reload". Also if I make a change in any file and press just "Reload" the change is not happening on the device.

My phone and my computer are using the same WiFi networks - checked several times

Here is a screenshot from my AppDelegate.m file. In React Native 0.42.0 seems like we do not have the old line: jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

Also all the web calls pass successfully and I do not have any red screen with errors.

I tried running the app on a device using the cli and suggestion from @Kamil Sarna in another question:

npm install -g ios-deploy
# Run on a connected device, e.g. Max's iPhone:
react-native run-ios --device "Max's iPhone"

but app shows the splash screen and then exits (again without any errors). Tried to close the previous running server and starting it again with but it exits after splash screen again: npm start -- reset-cache

And finally on the simulator everything is working fine. Here is the menu from it:

My problem is that I cannot test fast on device because it's not catching file changes. Anyone having the same issue?

React Native - 0.42.0 OS - macOS Sierra device - iPhone 5S

Answer 1

I have found a solution. The only thing that works for me is described here: http://moduscreate.com/automated-ip-configuration-for-react-native-development/ (Credit to the author)