How to enable Live Reload in iOS Device running React Native app?

Question

I'm trying to enable Live Reload mode, but there is no such item in Dev Menu:

It's weird. What version of xcode and react-native your running? — abeikverdi, Aug 04 '16 at 16:45
Related: http://stackoverflow.com/questions/38676746/after-upgrade-livereload-missing-on-real-device-cannot-debug-js-remotely-from-r — Kyle Finley, Aug 04 '16 at 17:33
react-native-cli: 1.0.0 react-native: 0.30.0 Xcode 7.3.1 (7D1014) Watchman 4.6.0 — protspace, Aug 05 '16 at 07:11
Finally fixed that. See http://stackoverflow.com/questions/38676746/after-upgrade-livereload-missing-on-real-device-cannot-debug-js-remotely-from-r — protspace, Aug 05 '16 at 08:29
Hey @protspace make it as actual answer if it works for you. it will help others. — Ashok R, Jan 05 '17 at 03:00

Bruce Lee · Answer 1 · 2017-02-15T08:20:59.043

26

You have this problem is mainly because your device and your development machine is not in the same LAN. check if it is. Make sure your computer and your device connected in the save LAN, everything will be ok.

After all ur devices connected to the same LAN. And if u are using Xcode.

Close the React Native packager (or just close the terminal window)
Delete the app in your iOS device
Clean Xcode project.
Run command npm start -- reset-cache

Then everything will be OK.

edited Feb 15 '17 at 08:20

answered Dec 02 '16 at 14:08

Bruce Lee

4,177
3
28
26

1

This one got me. I had multiple WIFIs around and my iPhone and MBP were bouncing to different ones while working and I didn't even realize. – dwilt Feb 15 '17 at 08:00
@dwilt sometimes just connect to the same LAN can not solve this problem. So i updated my answer. – Bruce Lee Feb 15 '17 at 08:21
just switching to the same Wi-Fi worked for me ......Thanks @Bruce Lee – Akhilesh Sinha Dec 07 '17 at 17:30

score 10 · Answer 2 · answered Jul 20 '17 at 17:36

You need to edit the source for jsCodeLocation from your AppDelegate.

The main problem that the

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

is looking for localhost by default, in simulator it will work as simulator and pc are on the same machine, but for device localhost will be different so to make it work, you need to change that line to

jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.16:8081/index.ios.bundle?platform=ios&dev=true&minify=false&hot=true"];

here 192.168.1.16 change it to your PC local IP address

Projects created with v0.49 or later should use `jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.16:8081/index.bundle?platform=ios&dev=true&minify=false&hot=true"];`, since [new projects have a single entry-point](https://github.com/facebook/react-native/releases/tag/v0.49.0). — mthmulders, Nov 04 '17 at 14:21

score 4 · Answer 3 · answered Mar 13 '19 at 04:51

4

If u are using IOS Simulator, follow the menu Hardware > Shake Gesture, and click the Enable Live Reload option.

Hope it helps! :)

answered Mar 13 '19 at 04:51

Tina Lee

558
4
7

score 0 · Answer 4 · answered Jul 31 '18 at 23:32

0

If you are running the simulator, make sure you sure you "Connect Hardware Keyboard"

answered Jul 31 '18 at 23:32

MoMo

186
1
3
15

score 0 · Answer 5 · answered Jan 16 '20 at 19:16

In my case, I had a local ethernet connection that was taking priority on en0, so I had to change the script at:

node_modules/react-native/react-native-xcode.sh

from

IP=$(ipconfig getifaddr en0)

to

IP=$(ipconfig getifaddr en1)

since my wifi was on that port. Verify that with terminal: networksetup -listallhardwareports

All this I learned from the following blog post:

https://www.stevetrefethen.com/blog/react-native-bundle-loading-failing-on-a-physical-device

Thanks Steve Trefethen!

I'm not sure what the permanent solution should be, but it seems the script should be checking for wifi only connections somehow.

score -1 · Answer 6 · answered Aug 04 '16 at 19:05

-1

If you are running the app on your actual native device. Then shake the device and it will pop up the me menu.

answered Aug 04 '16 at 19:05

Shivam Sinha

4,924
7
43
65

as you can see above I made a screenshot of that menu and there is no such item in it @Shivam Sinha – protspace Aug 05 '16 at 07:06
That's not what the op is asking. – Renato Back Dec 01 '16 at 01:36
This is totally unrelated to the question. He asks how to get a normal menu with Live reload. – ivan133 Jan 31 '19 at 12:32

How to enable Live Reload in iOS Device running React Native app?

6 Answers6

Linked