React-Native Error: Connection to http://localhost:8081/debugger-proxy?role=client timed out

I run react-native run-ios command and my app show for 3 secs before showing this. I am running on ios simulator

> ExceptionsManager.js:76 Connection to > http://localhost:8081/debugger-proxy?role=client timed out. Are you > running node proxy? If you are running on the device, check if you > have the right IP address in RCTWebSocketExecutor.m.

For remote debugging, Your both devices must be connected to the same wifi ( network ).

I get this issue often. Usually when I'm developing with the remote debugger on and I save codebreaking kind of error.

Try to reload... If that doesn't fix it: crlt + cmd + z. then stop remote debugging, then refresh. That will fix it but now you lost your debugger. So go again... crlt + cmd + z. this time start remote debugging, then refresh again. Your project should be back and good to go.

This works for me, but it's super annoying and time-consuming. I wish someone had a better way.

I somehow managed to make it work without creating a new project by deleting the project app in the simulator on the iOS home screen. It works fine now.

This seemingly was happening to me because I had restarted the react-native packager while I still had a Chrome debugger open which was attached to the previous packager/emulator instance.

Killing that debugger Chrome tab and trying run-ios again seemed to solve it, without any restarts or other skulduggery.

Update for iOS 14:

(image from https://www.iphonetricks.org/ios-14-local-network-privacy-feature/)

On iOS 14, when you launch your app on first time, iOS will ask for your permission to scan local network. You need to allow otherwise the app will not be able to connect to remote debugger on your Mac.

For me this happened when I was try to debug a real device. Issue was that my computer and my real device were not on the same WiFi.

Problem can be with your router. Try connect to wifi through iPhone hotspot.

On github I found workaround, how to set DNS to solving this error on your mac and iPhone:

1. On you dev machine, System Preference -> Network -> Wi-Fi -> adcanced -> nameOfYourNetwork
2. In the DNS tab change the ip to 8.8.8.8
3. Make the same DNS change on your iPhone

I had this error when I forgot to switch back to using index file instead of jsbundle after release build.

I had

Instead of

Switched to index file and built again and it worked.

For me this works:

• Stop remote js debugging.
• Close remote js debugger page on brower.
• Run React Native Debugger.
• Press ctrl+t and type React Native pakager port and confirm.
• On simulator press ctrl+M and active remote js debugging.

and good to go!

In my case, I was on a different network than the phone. No SIM Card required, I only needed to make sure I was on the same network (we have work and guest networks here). There are some notes in the documentation for RN that you can checkout (mid-way down there is a pink box with the proxy issue we have all faced):

http://facebook.github.io/react-native/docs/running-on-device.html

I fixed adding a script in "bundle react native code and images" build phases tab main target. I simply added export DISABLE_XIP=NOTHANKS

The problem was that real device was trying to connect to my ip under xip.io domain

I think this script it is necessary when we are going to add custom images assets in the xCode project, but you can check the url of the ip is wrong in Report navigator tab.

My setup react: 16.3.1, react-native-cli: 2.0.1 react-native: 0.55.4 xCode 9.4.1

Here the original react native docs about xip.io (Troubleshooting chapter) https://facebook.github.io/react-native/docs/running-on-device

Here the possibility for disable XIP. https://github.com/facebook/metro/commit/079dcaed990abb6754c03113362e4f537cd32a24

Here the hint that I found for trying this solution https://github.com/facebook/react-native/issues/12786

I tried a lot and finally fixed it by adding NSAllowsArbitraryLoads to info.plist.

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

If you get:

> Another Debugger is already connected

It might sound silly, but don't forget to check for Chrome windows in the background, which could be the "another debugger".

When you tap on "Start JS Debugging", React Native opens a new Chrome window with the debugger. If you have multiple Chrome windows (not tabs) open on Mac OS X, you don't see any visual indication that there is more than one window, so you might be looking at the foreground window with "Another debugger is already connected" and don't realize that the other debugger is a Chrome window in the background.

This happened to me because I was connecting via a WiFi network that had a captive portal (aka a pop up window that required you to fill some info before connecting to the internet).

Please make sure you are connecting via a WiFi Network that has no captive portal. Even your personal hotspot on your phone will do the trick!

Here is the reference I never read and cost me some hours:

> If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.

https://facebook.github.io/react-native/docs/running-on-device#troubleshooting

Delete app from Simulator or real device and rebuild project. This worked for me.

This was happening to me as well. I somehow fixed it with a reboot... go figure. I am guessing Metro Bundler was not able to launch due to port 8081 already been taken by another process. After a reboot I ran react-native run-ios again and this time the simulator launched properly without the error.

Mind you, this was happening to me in a brand new project.

I was facing the same issue for iOS.

Below tricks worked for me:

• Open project in Xcode.
• Go to Product-> Scheme-> EditScheme-> Run.
• Envirionment variable Click + Sign.
• Add flag OS_ACTIVITY_MODE with value disable.
• Run your app from Xcode (Before this close packager.)

Hope this will help someone.

I got same error although it's same to network.

Remove the app from your device and build it again. Will work.

#if DEBUG
jsCodeLocation = [NSURL URLWithString:@"http://192.168.11.21:8081/index.bundle?platform=ios&dev=true"];
#else
#warning "PRODUCTION DEVICE"
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#endif

You can find your ip address from this link https://kb.wisc.edu/page.php?id=6526

For me, none of the above solutions seemed to work. I tried killing the connection, reloading the bundle, stopping and running npm start again without success. What worked for me eventually was clearing the npm cache before starting it again:

npm start --clear-cache

After this, I reloaded the bundle and the debugger was properly attached.

Working on mac.
I solved it by enable "Internet Sharing".

• Go to Settings --> Sharing
• Share you connection from "USB 10/100/1000 LAN"
• To computer using: "Wi-fi"
• check "Internet Sharing" --> create your network
• in your iPhone connect to the new network
• Reload metro and xcode

This was happening to me, I'm developing with my actual phone for the simulator. I had to shake my actual phone and pressed the Remote Debugging option, this loaded a new http://localhost:19001/debugger-ui/ page in my browser with an active debugger.

1. open your /etc/hosts
2. check does them exist

127.0.0.1 localhost
::1 	  localhost

if not, add them and then yarn ios again. if them exist, sorry, there is nothing I can do

Just wanted to mention that when you install a new app on iOS via RN, your device will ask you something about connecting with devices on WiFi, etc. I must have clicked the wrong thing and was stuck in that state. Deleting the app off of my device then re-installing (via RN) brought that dialog up where I could accept it.

I commented all lines in my /private/etc/hosts to solve some VPN issues, but it seems like for the IOS react-native debugger to attach you need these host entries:

127.0.0.1 localhost
255.255.255.255 broadcasthost
::1             localhost

In my case, my IP address was changed and I was pointing to the old IP address from my iphone.