Network Response Time Out Error (create-react-native-app) (expo)
React NativeReact Native-AndroidExpoCreate React-Native-AppReact Native Problem Overview
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
React Native Solutions
Solution 1 - React Native
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,
Solution 2 - React Native
This is due to not open port from your machine.
Linux (Ubuntu)
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.
Windows
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.
Solution 3 - React Native
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:
> 1. Goto Control Panel > Network and Internet > Network Connections 2. 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.
Solution 4 - React Native
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.
Solution 5 - React Native
I had done everything mentioned in context. Just Changed my connected WiFi network from public to private. This Worked for me
Solution 6 - React Native
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
Solution 7 - React Native
- Found ipv4 address
- open expo app then tap to explore button from bottom
- write exp://[ipv4adress]:19000 to searchbar
- Then your app will open
Solution 8 - React Native
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
Solution 9 - React Native
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
Solution 10 - React Native
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
Solution 11 - React Native
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.
Solution 12 - React Native
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.
Solution 13 - React Native
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.
Solution 14 - React Native
change LAN to Tunnel to solve this issue
Solution 15 - React Native
This issue could possibly be resolved by:
Setting your environment variable with alternative instructions here
Or
Assigning interface matrix priority for your network adapters with detailed instructions here or here.
Or
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!
Solution 16 - React Native
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...
Solution 17 - React Native
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..
Solution 18 - React Native
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.
Solution 19 - React Native
This error beaus your port it is not open just check port is open or not for ubuntu you can check using the following way
sudo ufw status verbose
check 19000 port open then you need it then run following command if port not open
sudo ufw allow 19000/tcp
for other port runs following command
sudo ufw allow 19001/tcp
because http port not you are getting erro. above step solve your problem similar for mac and windows check firewall setting once
Solution 20 - React Native
Solution 1:- Connect both(your PC and mobile)with same network then scan the QR with expo application.
Solution 2:-Select / change connection type as Tunnel mention in local host development window of your browser then scan the QR with expo application.
I think this will help :)
Solution 21 - React Native
I had the same issue but after some research, I found that this is because your computer has previously connected to multiple adapters. Expo may pick the IP address of one of these. To avoid this
-
Go to the command prompt and write 'ipconfig'.
-
Copy the IPv4 Address under Wireless LAN adapter Wi-Fi.
-
Then wrte the below command.
set REACT_NATIVE_PACKAGER_HOSTNAME=(Your IP here)
Solution 22 - React Native
i just want to remember this for those who only try to scan the QR Code
You need to connect your phone to your computer using a USB cable the first time you want to launch the app,that will install the app on your device then the expo scan will work, i think all the solution above will work maybe it's just because you didn't connect them first that everything didn't work
just read the docs https://reactnative.dev/docs/running-on-device
Solution 23 - React Native
I got it by using this command on my ubuntu system:
> sudo ufw allow 19000/tcp
and then type this: > sudo ufw allow 19001/tcp
restart vscode and the expo server and then you are good to go!
Solution 24 - React Native
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!
Solution 25 - React Native
- 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.
Solution 26 - React Native
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.
Solution 27 - React Native
If you have tried everything, and still not working for you. Change the Connection to 'Local' instead of 'LAN', it is working perfectly for me. It is not the best solution but does the work.
Solution 28 - React Native
It might sound very naive. But just restarting my machine solved this issue.
Solution 29 - React Native
I had the same issue after npm start script on windows environment. Putting mobile on the same network as my Windows development environment was solved issue.
Solution 30 - React Native
Change your network settings:
- Network and Internet setting
- Status
- Change connection properties
- Checked public option
Solution 31 - React Native
I had the same issue I got this when I cancel the permission window of node js I solved it by going at the directory
- On the Start menu, click Run, type WF.msc, and then click OK.
- In the Windows Firewall and Advanced Security, in the left panel in Inbound Rules I had two options or rules disabled Node.js Serverside Javascript.
I simply double click and in new window In action, I select allow the connection and save
Solution 32 - React Native
Starting EXPO using the -- tunnel flag should help: $ expo start --tunnel
Solution 33 - React Native
I found the solution for windows 8 and 10.
official support link - SEE HERE
> When you first connect to a Wi-Fi network, you can set it as public or private—depending on the network and what you want to do:
Private network. Use this for networks you trust, such as a network at home or work. When a network is set to private, your PC is discoverable to other devices on the network, and you can use your PC for file and printer sharing.
Public network. Use this for networks you connect to when you’re out and about, such as a Wi-Fi network at a coffee shop. Your PC will be hidden from other devices on the network, and you can’t use your PC for file and printer sharing.
Solution 34 - React Native
I got this to work by allowing ports 19000 and 19001 inbound through the Firewall, and then changed my home WiFi network to private (you don't need to do this if you allow public connections in the 2 Firewall rules above).
I can only do this with Command Prompt, not with Ubuntu on WSL2. If anyone knows how to do this through Windows Subsystem for Linux let us know.
Solution 35 - React Native
Reinstalling the Expo go client worked for me. But make sure you have tried above solutions
Solution 36 - React Native
For Linux Ubuntu 21.10
This is for users, that don't use UFW.
Make sure ufw is inactive, else, execute 'sudo ufw allow 19000'
sudo ufw status
List rules:
sudo iptables -L
This will output on clean Ubuntu like this:
Chain INPUT (policy ACCEPT)
target prot opt source destination
Chain FORWARD (policy ACCEPT)
target prot opt source destination
Chain OUTPUT (policy ACCEPT)
target prot opt source destination
Now allow port 19000 with command:
sudo iptables -A INPUT -p tcp --dport 19000 -j ACCEPT
Make sure that rule added:
sudo iptables -L
Expected output:
Chain INPUT (policy ACCEPT)
target prot opt source destination
ACCEPT tcp -- anywhere anywhere tcp dpt:19000
Chain FORWARD (policy ACCEPT)
target prot opt source destination
Chain OUTPUT (policy ACCEPT)
target prot opt source destination
After restart all rules will be wiped, so we need to install package, that will add rules from a file rules.v4 on each OS boot
sudo apt install iptables-persistent
su root
iptables-save > /etc/iptables/rules.v4
Enjoy! :)
Solution 37 - React Native
Uninstalling McAfee Antivirus and restarting my Laptop fixed this issue. also check if there is any extension or tool added for web browser security. then disabling that will also be a quick fix for this issue.