Network Response Time Out Error (create-react-native-app) (expo)

I am trying to run create-react-native-app on expo app in android.

Firstly ,I created the project by writing command

create-react-native-app test

then I executed

npm start

then scanned the qr code from expo app.

But after scanning QR code , I am getting following error:

Uncaught Error: Java.net,sockettimeoutException: failed to connect to after 10000ms

Github Issue:

https://github.com/react-community/create-react-native-app/issues/144#issuecomment-296631692

This is due to not open port from your machine.

In Ubuntu Run In terminal

sudo ufw status verbose To view open port if you cannot found 19000 port open then you need to open port using

sudo ufw allow 19000/tcp

and then again run

sudo ufw allow 19001/tcp

to serve http for react native i solve this problem in my ubuntu using this method. I hope this will help you.

To open a port in the Windows firewall for TCP access On the Start menu, click Run, type WF.msc, and then click OK.

In the Windows Firewall with Advanced Security, in the left pane, right-click Inbound Rules, and then click New Rule in the action pane.

In the Rule Type dialog box, select Port, and then click Next.

In the Protocol and Ports dialog box, select TCP. Select Specific local ports, and then type the port number of the instance of the React port, such as 19000 for the default instance. Click Next.

In the Action dialog box, select Allow the connection, and then click Next.

In the Profile dialog box, select any profiles that describe the computer connection environment when you want to connect to the Database Engine, and then click Next.

In the Name dialog box, type a name and description for this rule, and then click Finish.

Similarly you can open port 19001 too.

In my case the firewall settings alone didn't do it. My issue was that VirtualBox network devices were taking priority and the Expo host was starting on the wrong network.

On windows you can run ipconfig and look at the network adapters you have. npm/yarn start seems to take whatever shows up first in that list.

I found out about this from here: https://github.com/react-community/create-react-native-app/issues/60

If you don't need the other network adapters in the list, you can disable them in the Network Connections interface of the Control Panel.

If you need to use those connections and have Expo work then to solve the issue I followed this process:

Goto Control Panel > Network and Internet > Network Connections

Right click the desired connection (Higher Priority Connection)

Click Properties > Internet Protocol Version 4

Click Properties > Advanced

Uncheck 'Automatic Metric'

Enter 10 in 'Interface Metric'

Click OK

Repeat for the Lower Priority Connection, but this time put 20 into the 'Interface Metric'

You'll now use the higher priority connection as a default.

You can get around that by fixing your laptop's ip address to a static ip, let's say 192.168.1.69, then you need to change the react native packager ip address to the same of your laptop, using

set REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.69 (Windows)
REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.69 (Mac & Linux)

start your project again and you're good to go.

First of all, disable the unused network connection. In my case it was VirtualBox. Maybe it's using the same port. I am not sure about that. after disabling the unused connections then restart the packager. if you used npm then type

npm start

Found ipv4 address
open expo app then tap to explore button from bottom
write exp://[ipv4adress]:19000 to searchbar
Then your app will open

I suggest you install expo application for react native, link to official guide here

npm install -g exp

Then you can use Genymotion software to emulate different environment setting for your app an run:

exp start

If you use in the terminal "npm start" with native react, the following is for you. I found out that if my application runs successfully IpV addresses of my computer, that are shown in the terminal and that is on Expo app are identical, for example:

ipconfig -> IPv4 Address. . . . . . . . . . . : 10.0.0.124
exp://10.0.0.124:19000

Based on this observation I solved this issue by the following way:

Close npm prompt script which is running app
Close Expo app
Find your IP by running command in the terminal:
```
ipconfig
```
Run command in NodeJS command prompt with your IP (for example 10.0.0.124)
```
set REACT_NATIVE_PACKAGER_HOSTNAME=10.0.0.124
```
Start Expo app, scan barcode
```
npm start
```
If it does not help, then use next steps recommended by React developers in addition to other reasonable efforts:
Install Genymotion with VirtualBox
SignUp at Genymotion site
Run Genymotion software and !!!SignIn

in Windows

run the ipconfig in command prompt
get the ip4 address and copy it.

Than go to

This PC > properties > advanced system settings > environment variables
add the following system variable: REACT_NATIVE_PACKAGER_HOSTNAME
As the value for the variable I had to paste the ip4.

then run the npm start It's work for me

In case someone is still looking for the answer. Do the basic thing first, Disable the VirtualBox Host-Only Network first by opening your network configs. This worked for me.

If you are using git bash for development then this solution by Icruz4 will help

Instead of

set REACT_NATIVE_PACKAGER_HOSTNAME

Use:

export REACT_NATIVE_PACKAGER_HOSTNAME='192.168.1.123'

Note:

When you run

npm start

Expo tells you in the output the IP it's using. If that IP is not the IP you want then the

REACT_NATIVE_PACKAGER_HOSTNAME

environment variable is not set properly

I had done everything mentioned in context. Just Changed my connected WiFi network from public to private. This Worked for me

This issue could possibly be resolved by:

Setting your environment variable with alternative instructions here

Assigning interface matrix priority for your network adapters with detailed instructions here or here.

An Ubuntu machine is unable to open a port

After you make any changes, please restart the computer before testing if it works.

Good luck!

I've had the same issue. The problem is that the command yarn start or npm start finds the first enabled network adapter it finds which just happens to be the adapter for VirtualBox on my (and many other machines). The solution is to either:

manually set REACT_NATIVE_PACKAGER_HOSTNAME environment variable, or disable the unused network adapter in Windows' Network Connection (see image) The problem is that Expo finds the first Network adapter, and not the active network adapter that provides the internet connection.

In my case, this problem occurred because Expo android app need "draw over other apps" permission and I didn't give it. So I give this permission to Expo app and the problem solved..

One of the simplest and 100% working solutions is:

Enable the Mobile Hotspot of your development machine( PC or Desktop ) and connect your Android device with this hotspot.
Goto Control Panel > Network and Internet > Network Connections You will land in here as shown:Network Connections setting
Then set the IP address of Local Area Connection(Your DESKTOP HOTSPOT) to a desired one, say: 192.168.1.69 by right-clicking on the concerned connection and then clicking on properties -> Internet Protocol Version 4(TCP/IPv4) -> Properties. Then set the priority of this connection to be the highest and this is best described here

Then open a command terminal and run:

set REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.69 (Windows)
REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.69 (Mac & Linux)

Then restart your expo server by running npm start in your expo project folder and run the app on your Android device by scanning the generated QR code with the expo app.

If you have tried everything the other answers suggest and it still does not work, please also check that your computer and your phone are connected to the same WIFI network. For me this is what wasted an hour.

I wasted my whole day searching for answer and finally i got solution accidentally. Just change connection from LAN to tunnel

Below is the image,

In Windows,

set REACT_NATIVE_PACKAGER_HOSTNAME=my-ip-address

worked inside my git bash terminal, but not cmd. In git bash, after I ran npm start, I got a firewall popup, which I clicked allow and it worked!

In your device: Log in to your expo app, create account if you doesn't have any.
In you system: open terminal go to you project directory via cd command and then type sudo exp start it will ask you your expo account login details once you done with this.
It will gives you qr code to scan.

I tried many solutions, only this way helped me to solve this problem:

In Windows:

go to "Network and Connections" in Control Panel of windows (Network and Sharing Center>Change Adapter Setting)
Disable all virtual boxes which you can see here
Restart npm or yarn or expo...

You Just need to open the port in Window Firewall and everything should work.

1.On the Start menu, click Run, type WF.msc, and then click OK.

In the Windows Firewall with Advanced Security, in the left pane, right-click Inbound Rules, and then click New Rule in the action pane.

In the Rule Type dialog box, select Port, and then click Next.

In the Protocol and Ports dialog box, select TCP. Select Specific local ports, and then type the port number of the instance of the React port, such as 19000 for the default instance. Click Next.

In the Action dialog box, select Allow the connection, and then click Next.

In the Profile dialog box, select any profiles that describe the computer connection environment when you want to connect to the Database Engine, and then click Next.

In the Name dialog box, type a name and description for this rule, and then click Finish.

Similarly you can open port 19001 too.

来源：https://stackoverflow.com/questions/43593042/network-response-time-out-error-create-react-native-app-expo

标签

react-native

react-native-android

expo

create-react-native-app