Could not connect to React Native development server on Android

Question

When I run react-native run-android  it gives me the following error      Could not connect to development server      Package server is running and I can access it directly from browser on my mobile device  My Android device is connected to computer and has debugging enabled  I checked using adb devices command   My Android version is 4 4 4 so I cannot use adb reverse command  I have set the ID address and port in Dev setting  USB debug is on  I use Windows 7    How to fix this error

User · Answer

This is applicable to Android 9 0  according to the Network Security Configuration  Well  so after trying all possible solutions I found on the web  I decided to investigate the native Android logcat manually  Even after adding android usesCleartextTraffic  true   I found this in the logcat   06-25 02 32 34 561 32001 32001 E unknown ReactNative  Caused by  java net UnknownServiceException  CLEARTEXT communication to 192 168 29 96 not permitted by network security policy   So  I tried to inspect my react-native app s source  I found that in debug variant  there is already a network-security-config which is defined by react-native guys  that conflicts with the main variant    There s an easy solution to this  Go to  lt app-src gt  android app src debug res xml react native config xml Add a new line with your own IP address in the  like    lt  xml version  1 0  encoding  utf-8   gt   lt network-security-config gt     lt domain-config cleartextTrafficPermitted  true  gt       lt domain includeSubdomains  false  gt localhost lt  domain gt       lt domain includeSubdomains  false  gt 10 0 2 2 lt  domain gt       lt domain includeSubdomains  false  gt 10 0 3 2 lt  domain gt          lt domain includeSubdomains  false  gt 192 168 29 96 lt  domain gt        lt  domain-config gt   lt  network-security-config gt    As my computer s local IP  check from ifconfig for linux  is 192 168 29 96  I added the above line in       Then  you need to clean and rebuild for Android   cd  lt app-src gt  android   gradlew clean cd  lt app-src gt  react-native run-android   I hope this works for you

User · Answer

In my case  running on a Macbook  i had to turn off my firewall  thus allowing incoming connections from my android  RN v0 61 5

User · Answer

To add to goldylucks s answer  you can use IP 192 168 0 10 if that is the IP of your PC running the React Native packager   You may need to open your firewall as well   In Ubuntu 18 04  you can get your IP by   ip -c addr show   You will see your IP in there  something like  inet 192 168 0 10 24 brd 192 168 0 255 scope global dynamic noprefixroute enp0s25  notice the 192 168 0 10 in my sample    Then  you could open port 8081 in your firewall  something like   sudo ufw allow 8081   It will be using TCP  so make sure TCP is open on port 8081   Then you can follow goldylucks s answer and goto Dev settings and enter 192 168 0 10 8081 or whatever IP you need   You can test it from the browser on your device  While the packager is running from your PC  navigate to http   192 168 0 10 8081 from your mobile device and make sure it works  It will show something like  Packager running   It will be clearly working or failing   Goldylock s answer excites me because it solves the issue very nicely if you are having problems with that error messages  It sucks to have to rebuild the app all the time or worse yet  delete the APK off your device and then build again   As such  you should probably be using wifi as part of your dev strategy

User · Answer

From the Docs  http   facebook github io react-native docs running-on-device html method-2-connect-via-wi-fi  Method 2  Connect via Wi-Fi      You can also connect to the development server over Wi-Fi  You ll   first need to install the app on your device using a USB cable  but   once that has been done you can debug wirelessly by following these   instructions  You ll need your development machine s current IP   address before proceeding       Open a terminal and type  sbin ifconfig to find your machine s IP   address          Make sure your laptop and your phone are on the same Wi-Fi network      Open your React Native app on your device     You ll see a red screen with an error  This is OK  The following steps will fix that     Open the in-app Developer menu     Go to Dev Settings   Debug server host for device     Type in your machine s IP address and the port of the local dev server  e g  10 0 1 1 8081     Go back to the Developer menu and select Reload JS

User · Answer

Make sure NPM server is running  Else run it again  It will solve the issue

User · Answer

We faced this issue  In order to fix this  solution is dead simple is below    Cancel the current process of   react-native run-android    by CTRL   C or CMD   C Close metro bundler window command line which opened automatically  Run the command again     react-native run-android          Basically this error tells that your current build got failed due to reasons like Code issue or dependency issue    Click here for more details

User · Answer

In my case  my emulator has a proxy setting  after turning it off everything works fine

User · Answer

Easiest for MAC  Get ip address of your wifi network via ipconfig getifaddr en0  Then write that ip to your DEV settings - gt  Debug server host  amp  port for device adding  8081  example  192 21 22 143 8081  Then reload  That s it

User · Answer

If you are trying to debug app in your physical android device over wifi using a windows machine  then the device may not be able to access the port of your pc or laptop  you have to make the port accessible  this involves two steps    First create a rule in firewall  for doing this follow the following steps    open run dialog type wf msc click on inbound rules click new rule on right hand side select port from pop up menu and click next select tcp port and specific local ports and enter the port number like 8081  default   allow the connection select all in profile section give some appropriate name and description click finish  you have to make your pc accessible to outside  for doing this follow the following steps    open network and sharing centre from control panel change adapter settings select your wifi network right click  properties click on sharing tab check all the checkboxes    You are good to go  now try running react-native run-android

User · Answer

In my case the problem was with Android security policies  According to the documentation      Starting with Android 9 0  API level 28   cleartext support is disabled by default    But the application tries to access Metro Bundler through HTTP  right  And that s why it can t  In order to enable cleartext traffic  open your AndroidManifest xml and add android usesCleartextTraffic  true  to  lt application gt  node   For example    lt application     android name  com example app      android allowBackup  false      android icon   mipmap ic launcher      android label   string app name      android theme   style AppTheme      android usesCleartextTraffic  true  gt    You can find more solutions in this SO  https   stackoverflow com a 50834600 1673320  OP s problem is different  but similar

User · Answer

My solution is modify or make new AndroidManifest xml in android app src debug    lt  xml version  1 0  encoding  utf-8   gt   lt manifest xmlns android  http   schemas android com apk res android      xmlns tools  http   schemas android com tools  gt        lt uses-permission android name  android permission SYSTEM ALERT WINDOW   gt        lt application android usesCleartextTraffic  true  tools targetApi  28  tools ignore  GoogleAppIndexingWarning    gt   lt  manifest gt    I am using React Native version  0 61 5

User · Answer

if  adb reverse tcp 8081 tcp 8081 this dosent work   You can restart you computer it ll work   because your serve is still running that s wrok form me

User · Answer

Basically this error comes when npm server is not started   So at first check the npm server status  if it s not running then start npm with command npm start and you can see in terminal      Loading dependency graph done    Now npm is started and run your app in another terminal with command  react-native run-android

User · Answer

Run this and it worked for me  adb reverse tcp 8081 tcp 8081

User · Answer

Found the issue with Android X device  For Android API 28 and above In network security config xml with cleartextTrafficPermitted  quot true quot   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt network-security-config gt     lt domain-config cleartextTrafficPermitted  quot true quot  gt              lt  domain-config gt   lt  network-security-config gt   Then  reload JS

User · Answer

I ve added  lt uses-permission android name  android permission INTERNET    gt  to debug AndroidManifest xml and it started working  I ve removed it from main AndroidManifest xml and forgot to add in debug   ReactNative version is 0 61 2

User · Answer

Ubuntu  Try running these commands both in your root folder only    sudo npm start --- this will pause automatically after saying -- Loading Graphs  done  something like this    when this is done -open another terminal react-native  run-android     If still the issue prevails  delete your build  folder in android   ios execute this command and then execute the above mentioned commands in the same order  react-native bundle --platform android --dev false --entry-file index js --bundle-output android app src main assets index android bundle --assets-dest android app src main res  amp  amp  react-native run-android

User · Answer

For me i have uninstalled a package that i recently installed and the project ran again on my physical device using the following command  npm uninstall recentPackageName  hope this helps

User · Answer

After trying all the most upvoted answers and failing to make it work  I figured that my Android Simulator was on Airplane mode  Quite silly but posting this so it could save some time  P S  I had a safe reboot on my Simulator before this  which is probably the cause why my simulator booted in Airplane mode

User · Answer

Solution for React-native  gt V0 60 You can also connect to the development server over Wi-Fi  You ll first need to install the app on your device using a USB cable  but once that has been done you can debug wirelessly by following these instructions  You ll need your development machine s current IP address before proceeding  Open a terminal and type ipconfig getifaddr en0 For MAC Make sure your laptop and your phone are on the same Wi-Fi network  Open your React Native app on your device  You ll see a red screen with an error  This is OK  The following steps will fix that   Open the in-app Developer menu  shake your phone or press CMD ctrl   M Click on Settings click on Debug server host  amp  port for device On popup Type your machine s IP address and the port of the local dev server  e g  10 0 1 1 8081   Go back to the Developer menu and select Reload   DONE

User · Answer

n my case with Android 4 4 2 had to do some additional steps   Make sure rn server is running npm start  delete app-debug apk from android app build outputs apk   uninstall from android if previously installed and run following commands from root folder   1  create dir mkdir android app src main assets 2  create file index android js which is a clone of index js cp index js index android js 3  react-native link 4  curl  http   localhost 8081 index android bundle platform android  -o  android app src main assets index android bundle  5  react-native run-android

User · Answer

When I started a new project   react-native init MyPrroject   I got could not connect to development server on both platforms iOS and Android   My solution is to   sudo lsof -i  8081   find a PID of node kill -9  lt node PID gt    Also make sure that you use your local IP address   ipconfig getifaddr en0

User · Answer

Starting with Android 9 0  API level 28   cleartext support is   disabled by default        we can use  android usesCleartextTraffic  true  this will work but this is not recommended solution         For Permanent and recommended Solution is below    Step 1   create a file in android folder app src debug res xml network security config xml  Step 2   add this to network security config xml   lt  xml version  1 0  encoding  utf-8   gt   lt network-security-config gt     lt  -- deny cleartext traffic for React Native packager ips in release -- gt     lt domain-config cleartextTrafficPermitted  true  gt      lt domain includeSubdomains  true  gt localhost lt  domain gt      lt domain includeSubdomains  true  gt 10 0 2 2 lt  domain gt      lt domain includeSubdomains  true  gt 10 0 3 2 lt  domain gt     lt  domain-config gt   lt  network-security-config gt    Step 3   Apply the config to your AndroidManifest xml    lt application  android networkSecurityConfig   xml network security config  gt   lt  application gt

User · Answer

For me all done as mentioned above still it was not working then I followed below steps and working like charm Go Window security   gt  Select Firewall and network protection   gt  Turn off private network

User · Answer

and first of all I appreciate you for posting your doubt  It s mainly because maybe your expo or the app in which you run your react native project may not be in the same local connected wifi or LAN  Also  there is a chance that there is disturbance in your connection frequently due to which it loses its connectivity   I too face this problem and I personally clear the cache and then restart again and boom it restarts perfectly  I hope this works for you too

User · Answer

I met this question too in native and react-native pro  my solution was    open npm server with npm start run native project with Android Studio transmission network request with adb reverse tcp 8081 tcp 8081 when you need to reload the page  just input  adb shell input keyevent 82   just keep it in order    P S  if you ran a fail project  just run adb kill-server

User · Answer

None of the above solutions worked for me  I just opened Dev menu by clicking Ctrl M and then clicked on change bundle location and added my machine IP followed by port

User · Answer

I got the same problem and resolve it by deleting node module package and then again install yarn  Simply on some changes we need to clear our

User · Answer

This is most probably a firewall issue  If someone using ubuntu faces this issue   then you can use   sudo service iptables stop   to disable the firewall for the port to be accessible

User · Answer

Default metro builder runs on port 8081  But in my PC  this port is already occupied by some other process  McAfee Antivirus  So I changed the default running port of metro builder to port number 8088 using the following command  react-native run-android start --port 8088   This resolved my issue and the app works fine now   PS  You can check whether a port is occupied or not in windows using  Resource Monitor  app   Under  Listening Ports  in  Network  tab   Check out this link for detailed explanation  https   www paddingleft com 2018 05 03 Find-process-listening-port-on-Windows

[android] Could not connect to React Native development server on Android

Examples related to android

Examples related to react-native