Create-react-native-app: development server is not started while scanning the QR code in Expo client application

[San10694]

Description

I recently started to learn React-Native and created a CRNA project.
whenever I scan the QR code in Expo App , the application is not started on my android device though my mobile is connected to same wireless network as my PC (windows)

Expected Behavior

I tried to run "npm start" in command line.code compiled successfully and QR code generated in command line.Whenever I scan this code through Expo app it is not starting my apllication in android device.

Observed Behavior

I got following error

Something went wrong.
could not load exp://192.168.*.**:19000. Network response timed out.
error-log---
uncaught error:java.net.SocketTimeoutException: failed to connect to /192.168.*.**(port 19000) after 10000ms 

Environment

• react-native-scripts:[email protected]
• react-native:-- [email protected]
• expo:-- [email protected]
• node -v:v6.10.1
• npm -v:3.10.10
• yarn --version:N/A
• watchman version:

1. Operating system:windows-10
2. Phone/emulator/simulator & version:android v 6.0

[FredyC]

Hey, I am trying very same thing and failing with same error as well. Here are the versions in my case. I am really just starting to know React Native. I haven't done any change there, just clean run of create-react-native-app (no errors during that).

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

Windows 10 Pro x64
Android 6.0 (LG G3)

Tried disabling Firewall it case it's blocked there, but no luck. I don't have any active antivirus protection.

[FredyC]

Found a troubleshooting section in readme on this and tried http access. This works and yields this result

// 20170625170940
// http://10.0.75.1:19000/

{
  "sdkVersion": "18.0.0",
  "name": "mapper",
  "slug": "mapper",
  "version": "0.1.0",
  "xde": true,
  "developer": {
    "tool": "crna"
  },
  "packagerOpts": {
    "hostType": "tunnel",
    "lanType": "ip",
    "dev": true,
    "strict": false,
    "minify": false,
    "urlType": "exp",
    "urlRandomness": null
  },
  "env": {

  },
  "bundleUrl": "http://10.0.75.1:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles",
  "debuggerHost": "10.0.75.1:19001",
  "mainModuleName": "./node_modules/react-native-scripts/build/bin/crna-entry",
  "logUrl": "http://10.0.75.1:19000/logs",
  "id": "@anonymous/mapper-183ba25c-82ec-44fa-835f-05f67178c163"
}

On the same address but 19001 port there is only a message React Native packager is running..

Trying to access same address on the phone doesn't work, it cannot connect. I also tried connecting my computer to a wifi hotspot created on the phone. Same result.

Also noticed the url http://10.0.75.1:19000/logs in the output above, but that doesn't work either (on a computer).

Honestly, I don't think that IP address is a correct one there. I am not sure how is that obtained, but my network runs on regular 192.168.0.XXX addresses. How can my phone find that IP address?

[San10694]

@FredyC I got an alternative for same problem
please download "Expo XDE" (desktop application) it will definately solve your problem.
following steps you need to follow
1-download Expo XDE for your appropriate OS(ie. windows or mac) from https://expo.io/
2-open Expo XDE and you will find your CRNA project , click on specific project you want to run ,,
3- click on the gear icon in address bar and select host as a Lan , here you will find your "ipAddress:host"
paste this address to your expo mobile App in explore section
and if everything is right then you will get your application running on your mobile .....
hope it will help you

[brentvatne]

this might also be useful for you folks: https://github.com/react-community/create-react-native-app/blob/d01ddabb634532200629c6d17f920eb856fa6416/react-native-scripts/template/README.md#environment-variables

[San10694]

thanks @brentvatne,
but unfortunately I got same error after setting enviornment variables. Only solution I got so for is to run my CRNA app in "Expo XDE" as I explained in my above comment .
thanks for the help buddy

[FredyC]

Ok, I think I've found the culprit. I have a Docker installed which has its own network adapter. For some reason the Expo picks this virtual network over the real one. Using env variable as @brentvatne suggested works, but it's totally cumbersome solution.

I am wondering if this could be somehow configurable per project.

[ide]

@FredyC One thing that might achieve a lot of what you are looking for is to use direnv (https://direnv.net). When you have direnv installed on your computer and set up in your shell profile, it will check for a file called .envrc, which is just a Bash script, in every directory you cd into.

So you could make a file at ~/your-project/.envrc with export REACT_NATIVE_PACKAGER_HOSTNAME=$(hostname) and it would apply only when your terminal is in your project directory (or one of its subdirectories).

[ahmetkakici]

Today i got the same error (Network response timed out.) also couldn't access packager's address from iphone's browser.
The problem was packager gets the first network adapter's local address (for me it was virtual-box adapter) 192.168.56.1 but my wireless network's local address was 192.168.1.28
So instead of scanning url, i manually entered exp://192.168.1.28 to expo ios-app and it worked.

[FredyC]

Yea, in the end, I've solved the problem by changing priorities of my network adapters so the one I want is a first one. Works like magic :)

[FredyC]

Anyway, in my opinion, this should be solved on the Expo side to allow to pick which adapter to use. It's not always feasible to switch adapters priorities, in particular for people moving between e.g. wifi and wired connection.

[brentvatne]

@FredyC - I don't know much about network adapter priorities and have never encountered this issue myself -- would you be interested in helping us handle this on the Expo side?

[FredyC]

@brentvatne Sure thing, just let me know what do you need from me. I am not sure about the way how Expo is finding that IP address. If you have access to a list of adapters of there is some high-level API only.

[GJS153]

I have tried all the suggestions listed above, but none of them worked. Here the error message that I got on my phone: "Uncaught Error: java.net.SocketTimeoutException:connect timed out"
Could someone help me out?

[brentvatne]

@FredyC - it just uses the ip node package -- ip.address() -- https://github.com/expo/xdl/blob/1e3f6637244b112a23963294f71a6a8d2e1b55c8/src/UrlUtils.js#L222

[FredyC]

@brentvatne Ok, I see. The ip.address() allows specifying the name of the network adapter in a first argument. So if Expo can read that optionally from some config, it could solve all problems.

[davidsickmiller]

I ran into this problem today, and then this github issue. It might be helpful to realize there are two facets to the multiple IP address situation.

The first facet is what IP address the server is listening on. Via netstat -an, you can see that the server is listing on all of the computer's IP addresses:
Proto Local Address Foreign Address State
TCP [::]:19000 [::]:0 LISTENING
TCP [::]:19001 [::]:0 LISTENING

So that facet seems solved already.

The second facet is which IP address to tell the user to type into Expo (or to transmit via the QR code). This is a more difficult problem, because you don't know for sure how the user has configured their network.

Idea 1: If you're on Windows and can access its details for each network adapter, you could guess that the user's phone is probably on a "Wireless LAN adapter" rather than an "Ethernet adapter".

Idea 2: Since QR codes have the capacity for 406 bytes, you could transmit an array of IP addresses, and the app can try each of them until it finds one that works.

Idea 3: Use a different protocol that does some sort of subnet broadcast.

[devWebNuts]

Thanks @ahmetkakici . That worked for me :-)

[anp]

@davidsickmiller I agree that some of these solutions would be very good. Implementing any of them will require some effort on the Expo client side, and we're tracking that work over there.

Until we have these network reliability features impl'd (which we're tracking on the client roadmap), I believe setting REACT_NATIVE_PACKAGER_HOSTNAME will work for all of the issues raised in this thread, so I'm going to give this a close. Thanks!

[fraylopez]

Just in case it may help someone. In Windows 10, after looping through all workarounds on this thread with no luck I've managed to get it working by disabling and re-enabling the wifi connection. Besides from the firewall rules, every other setting is out of the box.
It's worth to say that at some point I reset the network settings as well, which cleans all your wifi passwords among other net stuff, proceed carefully.

[bbeckk]

I disabled all the virtualBox adapters and then it worked

[FredyC]

@bbeckk You are most likely having same issue as me and instead of disabling you can change network adapter priorities ... https://github.com/react-community/create-react-native-app/issues/270#issuecomment-312342147

[GBarkhatov]

It was an issue for me. Having latest versions/updates of everything. Win10, vmware, vbox, create-react-native-app.

Tried disabling and enabling the firewall.

Though it worked from Expo XDE, I just felt like it should work on CLI.

So the issue was (as described earlier by @ahmetkakici) that yarn start was using vmware network adapter.

I went to the settings of my wi-fi adapter and changed metrics on TCPIP4 to 2
https://www.ghacks.net/2016/12/02/change-network-adapter-priorities-in-windows-10/

Now CRNA with yarn start points to the proper IP and everything is working from CLI

[nickcarenza]

For me this was caused by the port range not being accessible.

To solve, I made a .exprc file like this:

{
    "manifestPort": 8000
}

It seems to be an undocumented config file.

[evanslight]

I solved this issue through updating my iPhone expo app. It worked smoothly.

[joshuachinemezu]

Stopped my xampp server and it worked like magic

[gusleo]

remove security apps on phone working for me

[aliraza4167]

Yes the problem was that I had VirtualBox installed and it had its own virtual network adapter. Disabled it and ran "npm run android" and it worked.

[Shah14]

@FredyC Thanks for your insightful answer. I had a similar problem as there was a virtual connection of VmWare running. Thanks

[GoodGameHUSC]

In my case, I try
set REACT_NATIVE_PACKAGER_HOSTNAME='localhost'
and it worked

[anp]

Hey everyone! This particular issue has been resolved for a while now. If you're still having issues with a similar message and have tried the solutions in this thread, please open a new issue. Thanks!