No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB

Viewed 67488

React Native app debug on real device has some problems;

My metro bundler console gives warn:

warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.

warning and that cause real IOS device connection problem.

When I try to reload my react native app from Chrome React Native Debugger, it gives above warning and I can not debug my code from on Chrome

react-native: 0.62.2,

IOS: 13.6

It happens on Real device connection. When I work with IOS simulator, there is not problem.

NOTE: My phone and macbook on SAME wi-fi network.

So problem is not related to different wi-fi network usage.

21 Answers

⚠️ For iOS users :

Check that your build target is Debug :

Xcode Product => Scheme => Edit Scheme => Debug (and not release ! )

⚠️ For Android users :

I have found a solution that I posted on github. Not the best but it could be useful:

First, you have to open MainApplication.java and remove import com.facebook.react.BuildConfig;

Next, follow these steps :

    # Reset metro bundler cache : 
    `npx react-native start --reset-cache`
        
    # Remove Android assets cache : 
    `cd android && ./gradlew clean`
        
    # Relaunch metro server : 
    `npx react-native run-android`

And see the magic

See here : https://github.com/facebook/react-native/issues/29396

Running this worked for me for a Physical Android Device.

adb reverse tcp:8081 tcp:8081

or

npm run android-connect

If you face an error saying 'More than two devices are running', make sure that the emulators like BlueStacks are not running.

Your iPhone has to be connected to the same network (WiFi for example) as your Mac, because they have to communicate with each other (React Native Doc).

If it's already the case, then fill in the DCHP server manually on your iPhone and Mac, using Google's server (8.8.8.8), because it could be due to DHCP problems.

You may need to disconnect and reconnect to your Wifi.

For me I need to set the bundler location in my app from "localhost:8081" to "192.168.1.XX:8081" which is my computer's local IP address where Metro bundler runs on and the port is 8081.

If you don't know which port your bundler runs on you can specify it as a parameter like:

npx react-native start --port 8081

Then you need to specify the location in your development app. To do that:

  • Shake your device

  • Click change bundle location (I am on RN 0.64 it may differ in yours)

  • Give the bundler location of your computer's IP and port where Metro bundler runs on like:

Bundle Location Change Dialog

and they started to communicate with each other.

My problem was that I was not connected to the same WiFi on my Mac and Iphone.I turned the wifi off and back on on both devices, and made sure both the mac and Iphone was connected to the same WiFi. Annoying, but true!

Your iPhone & mac must be connected to the same network. If both device connected to same network you must check local network availability for your app. (this happened to me on a iOS 14.0 running device).

check local network - iOS 14
Settings -> Privacy -> Local Network

On Android, this may also happen due to a problem with the network security config. If you do use the network security config, try removing the line android:networkSecurityConfig="@xml/network_security_config" from AndroidManifest.xml

When I remove network_security_config.xml and remove the following:

  `android:networkSecurityConfig="@xml/network_security_config"`

It works

My problem was that the emulator I was using had airplane mode turned on (because I tested related functionality). The problem resolved when I turned it off, thus enabling network to operate as usual.

My problem is that the device is not connected to the internet. Throws the error. Try connecting stable internet connection.

What worked for me in this scenario was these steps

  • run server with --reset-cache
  • run npx jetify
  • open the project in adroid studio
  • go to refactor -> Migrate to AndroidX (this was the step that i was missing earlier)
  • start your emulator
  • run the app from android studio and it should work
yarn start web

you can use this command to scan the QR code and see the app in you EXPO app at you mobile

What did the trick for me was the following: In Xcode go to Debug/Detach from YourAppName Then reattach it by going to Debug/Attach to Process, select your app from the list (usually the first entry at the top).

You musk permit local network in the application setting in iOS. Otherwise, Metro can not find your app even in the same network.

For iOS on Xcode:

Go to Window > Devices and Simulators, Go to "Installed Apps" section, Click on +, Pick your app , Run your code.

(This issue happened to me when I run the app after I uninstalled it from the device)

I tried everything and after running

adb reverse tcp:8081 tcp:8081
yarn android 

it worked.

For me the solution was to remove the installed app and build run in Xcode again.

I work on IOS environment, testing on an IPad that is USB connected.

I managed to fix this issue by adding the bundler address (127.0.0.1) in the ipad to reconnect

Shake the device (opens react native debug menu) > Configure Bundler > "127.0.0.1" in the first field

Hope this helps someone !

Oh, I had the same problem with RN - for me - there was a problem with connecting iphone to macbook server on localhost - and it solved if I just turned off wifi on macbook and then turned it on again. (Yes, it sounds weird - but it's a common problem)

Sometimes it's a firewall / router issue - see if that's your problem:

  1. Find out the local IP address of your computer (where your Metro bundler / server is running).
  2. Open a browser from your phone.
  3. Open the IP address from #1 with port 8081 (e.g. http://192.168.0.42:8081).

If it's not loading -> it's a firewall / router issue. A simple solution would be to connect the computer to the phone's hotspot.

My problem was that i added --variant=release

npx react-native run-android --variant=release

So i remove it and worked for me.Like this:

npx react-native run-android
Related