react-native: 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.

On my Iphone, React Native Debugger does not work.

With emulator there is no problem. But when I use my Iphone, If I click reload button in Chrome React Native Debugger it is not working and it throws below error.

I can see logs on my Chrome React native debugger but it is not stable.

Warn in Metro bundler console:

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.

Real device is connected. My all devices use same Wireless network.

React Native version:

System: OS: macOS 10.15.5 CPU: (8) x64 Intel® Core™ i7-4770HQ CPU @ 2.20GHz Memory: 110.77 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 12.13.1 - /usr/local/bin/node Yarn: Not Found npm: 6.14.6 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.9.0 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2 Android SDK: API Levels: 23, 28, 29 Build Tools: 28.0.3, 29.0.2, 29.0.3 System Images: android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 3.5 AI-191.8026.42.35.6010548 Xcode: 11.6/11E708 - /usr/bin/xcodebuild Languages: Java: 1.8.0_232 - /usr/bin/javac Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.11.0 => 16.11.0 react-native: 0.62.2 => 0.62.2

Steps To Reproduce

  1. Connect IOS device (IOS 13.6) to device.
  2. Validate real device connection on XCode
  3. Start app on real device
  4. Debugger and metro bundler starts
  5. Press reload button in debugger and get above error in metro bundler console

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 46
  • Comments: 81 (2 by maintainers)

Most upvoted comments

Ok I solved this issue "No apps connected. " (on Android Emulator). Please follow this steps (only for Android) :

  • Open MainApplication.java and remove import com.facebook.react.BuildConfig;

  • 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 🎉

If you have an error like Invariant Violation: Module AppRegistry is not a registered callabel module, scroll on your terminal to see the root cause.

React Native is a real piece of work.

image (Only for iOS) If the app build mode is a Release, it will not be connected. To switch build you should go to the Xcode Product > Scheme > Edit Scheme and select Debug for Build Configuration.

For me I realized the issue was because my phone and laptop were not on the same network (one was on wifi one was on cellular). After putting phone on wifi it worked.

After 24 hours I solved this issue. Problem is somehow related to rn0.62 or its dependencies. I upgrade my project to 0.63.1 and it solved. 0.62 is really buggy version. I recommend 0.63.x

The phone and the computer have to be on the same WiFi connection.

In my case, it works well on ios simulator and android but not on real ios devices. What worked for me in ios was.

  • npx react-native start --reset-cache --port 8081 in terminal
  • Shake your ios device
  • Configure Bundler
  • Enter IP address from system preferences like the picture below
  • Add 8081 on the next field and empty on last
Screen Shot 2020-11-06 at 11 06 30 AM Screen Shot 2020-11-06 at 10 56 52 AM

Sometimes connect pc and phone on the same network is not enough 😕

I was able to resolve this on iOS when running on a real device. After bundle finishes, press the stop button in Xcode then open and close the app and it works fine.

shaking device (or CMD + D …) -> Configure Bundler -> metro bundler machine IP Address on Local Network

and also check this

iOS 14 > Settings > Privacy > Local Network

It works fine.

Adding android:usesCleartextTraffic=“true” in the Android Manifest File solves it for me. Seems in newer versions of RN or some of its packages this is disabled. <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:usesCleartextTraffic="true" ... />

In my case, it works well on ios simulator and android but not on real ios devices. What worked for me in ios was.

  • npx react-native start --reset-cache --port 8081 in terminal
  • Shake your ios device
  • Configure Bundler
  • Enter IP address from system preferences like the picture below
  • Add 8081 on the next field and empty on last
Screen Shot 2020-11-06 at 11 06 30 AM Screen Shot 2020-11-06 at 10 56 52 AM

This one worked for me!

Make sure you’re not on a vpn 😅

@hakkikonu Not working to me in Android. With command: react-native run-android, it is not attaching with npm. Please suggest any way out.

I have the same problem, but on Android.

And also, another:

I’ve created a react application with the command npx react-native init. it worked well. I can deploy this app on an Android Emulator, but cannot do it on my device. The device is in developer mode and when I run the command adb devices it returns the device connected.

But, when I try to run the npx react-native run-android command, it responds that No Android device or emulator connected.

For me it was happening when using android emulator. Adding this to the android manifest did the trick:

<application
...
android:usesCleartextTraffic="true">
...
</application>

references:

Try this hakkı kardeş put your terminal command at below. adb reverse tcp:8081 tcp:8081 Then just start server npx react-native start --reset-cache

It worked for me

I also had the same problem in Android only - the development build didn’t have Developer Menu or connection to the Metro Bundler.

The answer from @Johbrun helped me resolve it - just remove import com.facebook.react.BuildConfig;. I have added that line because I thought the BuildConfig class wasn’t imported. However, that’s not the case and importing it from the com.facebook.react namespace actually caused harm:

// com.facebook.react.BuildConfig;
public final class BuildConfig {
    public static final boolean DEBUG = false; // <---- debug is always false :(
    public static final String LIBRARY_PACKAGE_NAME = "com.facebook.react";
    /** @deprecated */
    @Deprecated
    public static final String APPLICATION_ID = "com.facebook.react";
    public static final String BUILD_TYPE = "release";  // <---- build type is always release
    public static final String FLAVOR = "";
    public static final int VERSION_CODE = 1;
    public static final String VERSION_NAME = "1.0";
    public static final int EXOPACKAGE_FLAGS = 0;
    public static final boolean IS_INTERNAL_BUILD = false;

    public BuildConfig() {
    }
}

The global BuildConfig which is the correct one:

public final class BuildConfig {
  public static final boolean DEBUG = Boolean.parseBoolean("true");
  public static final String APPLICATION_ID = "my_app_id";
  public static final String BUILD_TYPE = "debug";
  public static final String FLAVOR = "";
  public static final int VERSION_CODE = 22;
  public static final String VERSION_NAME = "2.2";
}

Here’s my steps to reproduce in a clean project, with a clean install of react-native-cli and react-native. I also cleared my Metro cache.

  • Run npx react-native init pleasework --version 0.63.4
  • Open the .xcworkspace
  • Select your real device
  • Hit run

Surprisingly, the first build seemed to initially working. After doing a clean build it stopped working. This is of course with the Debug build config and I’ve even tried some other results from 2018 like disabling the Xcode debugger but that hasn’t helped. I’m on the same network too, as running on an Android device works fine. I also tried adding the ATS local network exception for unsecured connections but no jazz.

Clean project runtime output in Xcode: https://pastebin.com/TguXkiW6

Here’s the info for this fresh project:

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 61.13 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.4 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /Users/anja0002/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6821437
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: javac 15 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.4 => 0.63.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Not sure why it says react-native isn’t found as I ran npm i -g react-native before to fix a react-native-cli project init issue…

With this project, I noticed:

  • I had to bump grade-wrapper.properties from 6.2 to 6.3 to get it to compile
  • Running on Android simulator & physical device works as expected
  • Running on iOS simulator works as expected
  • Running on physical iOS device from Xcode does not work. The app will eventually load from what I presume is the compiled JS bundle but there is no connection to the metro server. I can terminate the metro server on the Mac and the phone is none the wiser. Shaking the device does not work so the dev menu cannot be opened.

If you’re using USB connection, the most common case is that you don’t have the port redirection running. So run:

adb reverse tcp:8081 tcp:8081
adb reverse tcp:8097 tcp:8097 # for flipper

Ok I solved this issue "No apps connected. " (on Android Emulator). Please follow this steps (only for Android) :

  • Open MainApplication.java and remove import com.facebook.react.BuildConfig;
  • 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 🎉

If you have an error like Invariant Violation: Module AppRegistry is not a registered callabel module, scroll on your terminal to see the root cause.

I tried everything… I almost wanted to remove my code bit by bit to see which one is causing the issue. Luckily I didn’t, it would’ve been a waste of time. Thank you so much!!!

I am having this issue with iOS. Using RN v0.63.2 and xcode v12.0 beta 5 with ios 14 beta on my device. I am unable to connect to the metro bundler and the app can only run on my device while it is running inside of xcode.

I faced this issue with react-native 0.62.2. It got fixed after doing the following steps. Main issue got fixed after changing gradle distributionUrl from 6.2 to 6.3 , but these were things i did in the process if only gradle version doesn’t fix it for you.

  • Check if node version >12 mine was less switched to 13.12. Removed node_modules and package-lock.json and run npm i .

  • run cd android && ./gradlew clean

  • update distributionUrl=https://services.gradle.org/distributions/gradle-6.3-all.zip in gradle-wrapper.properties.

  • run npx react-native run-android

Did you upgrade xcode recently? I started experiencing this problem since the day I installed Xcode 11.6. Im downloading 11.5 right now and will report if it solved my issue.

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).

I had this error when developing using react-native-macos. When I did npm run start:macos I got the error. Running npx react-native run-macos made it work again.