Create-react-native-app: Timeout When Running `npm start`

[xwvvvvwx]

Description

If I run npm start and then scan the qr code in the expo app, I always get a timeout error.

My phone and my laptop are on the same network.

Expected Behavior

• create a new project with create-react-native-app
• run npm start
• scan shown qr code
• expo app does not timeout.

Observed Behavior

• expo app does timeout:

"Error while loading: The request timed out." (code -1001)

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-scripts: [email protected]
• npm ls react-native: [email protected]
• npm ls expo: [email protected]
• node -v: v6.9.5
• npm -v: 3.10.10
• yarn --version: not installed
• watchman version: "version": "4.7.0"

Also specify:

1. Operating system: NixOS 17.09
2. Phone/emulator/simulator & version: iPhone 5s // iOS 10.2.1

[anp]

Hi! Thanks for the report! Have you tried the network troubleshooting steps in the user guide?

[kmiloarguello]

Hi my phone and my laptop are on the same network but I tried to open, in my case http://192.168.56.1:19000/ on my phone and it doesn't reach the site.

[sajankumar]

Have you fixed this issue? I still got the same error, My phone and laptop connected in the same network, I tried to access it in my phone chrome browser as mentioned in network troubleshooting steps. It didn't work.

[kmiloarguello]

It might be a host issue. Inside of Expo XDE, I chose in config -> Host -> Tunnel with Protocol exp. The link to preview the app inside of XDS looks something like this exp://4n-g26.username.project-name.exp.direct:80. When I ran npm start finally I got something like this exp://192.168.56.1:19000. I don't know if this could be the problem. 😞

[anp]

@kmiloarguello @sajankumar did you try the steps from the network troubleshooting guide, including using your phone's tethering/hotspot? https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#networking

[sajankumar]

I tried, but it didn't work. Please see the attached screenshot

[kmiloarguello]

Thank you for the answer.
Actually the problem doesn't the network. I guess I could be a XDE host problem. For example I tried to run my project inside of Windows using Expo XDE software and it only works when I run from this button Open on Android (see attachment screenshot).

[sajankumar]

Any help would be highly appreciated :)

[anp]

@kmiloarguello if you're using open on android, that doesn't hit the network the same way as scanning a QR code or typing in a URL. You'll need to be more specific about what steps you're taking from the network troubleshooting guide.

@sajankumar you didn't mention whether you tried this in your phone's web browser. If you can reach the URL in your phone's browser, but not in the Expo app, that's definitely something we need to investigate. Unfortunately I don't have time to help with networking issues that aren't directly a bug in the Expo app :(. If you still think this is a bug, please detail what steps you took from the network troubleshooting guide.

[sajankumar]

@dikaiosune Hey, I tried whatever the steps mentioned in this link https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#networking didn't work. Unfortunately I can't reach URL in my phone's browser.

So, I thought it maybe because of my network firewall so I deactivated the firewall and tried it but it didn't work.

[kmiloarguello]

I took all the steps from the network troubleshooting guide. Now it works for me, the problem was that my physical device wasn't be able to catch the same host url of XDE software. With the QR code scan was not possible to connect my device and XDE. The only way was send the url from XDE to the physical device.

[anp]

@sajankumar if you can't reach the URL in your phone's browser, there's unfortunately not much I can do to help. I'd recommend trying XDE out instead of CRNA, because it handles a number of these networking issues for you.

I haven't heard back from the original reporter, and as far as I can tell all subsequent reports are just due to local network configuration issues, which are out of scope for help and bug reports on this repo (sorry, just not enough time to address every single one!). Giving this a close.

If you're coming to this issue when searching around, please please please try the network troubleshooting steps in the user guide. If you can reach the server URL in your phone's browser, but not in the Expo app, please open a new issue. Otherwise, I'd recommend looking around for resources to change your local network configuration to support connecting between devices, or installing XDE which will create network tunnels for you.

[meotimdihia]

In my case, i solved this problem by changing default IP of CRNA to IP of my Windows PC .
192.168.56.1:19000 (default) to my pc IP.

https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#configuring-packager-ip-address

[quantuminformation]

I just ran yarn ios start and get this error, from a brand new project today with latest versions.

[quantuminformation]

Note I am trying to use the simulator.

Previously the sim worked about 2-3 weeks ago.

[brentvatne]

@QuantumInformation - can you open your browser to http://localhost:19000 and see what the result is?

[MagicJohnJang]

Maybe you could try to close windows(or other) firewall, it work for me.

[sindey1982]

when vpn used in phone ,i came cross this problem. solved after vpn closed.

[mikhsol]

The problem is your OS firewall block access from your phone. Find your phone ip address in settings and allow on your PC/Laptop access (through firewall configuration) from phone ip to your PC ip address and ports 19000, 19001. On ubuntu with ufw firewall need to do something like:
sudo ufw allow from phone.ip.address.here to pc.ip.address.here port 19001

[nunosilva800]

quick 1 liner: sudo ufw allow from 192.168.0.0/24 to 192.168.0.0/24 port 19000:19001 proto tcp

[Irfan434]

The address shown after running npm-start was exp://192.168.56.1:19000, which I could access on my host computer, but not on any other device, even with the firewall turned off (using http://192.168.56.1:19000).

However, changing the address to 192.168.0.8:19000 worked. You'll need to figure out the IP of the host computer on your network.

[ToJen]

@Onumis what does that do exactly?

[nunosilva800]

@ToJen it opens the firewall ports 19000 and 19001 (used by the server and debugger to connect the phone to browser), on all IPs in your subnet. A bit more useful than https://github.com/react-community/create-react-native-app/issues/164#issuecomment-319034626 since you don't have to figure out your phone's ip address and it opens the 2 ports at once.

If you are working at a public wifi, like an airport, I don't recommend opening the firewall, just in case :)

[ToJen]

Thanks @Onumis I eventually got it

[aguher]

I fixed this problem removing all my networks. In mi case I am connected by wifi, but Create-React-Native was selecting my Ethernet network, so, I've disabled from Windows Settings, and now its working

[iftekherislam]

Thank you @aguher ... its really works for me... you have saved lot of my time buddy!

[raminghaderi]

What you need to do is:
Go to cmd and type "ipconfig" and see which network is using the ip shown in your expo app. if it's not your router IP address then what you need to do is to go and disable the network which expo is using:
Control Panel -> Network and Internet -> Network Connections
and here disable the network that expo is using. (it should be a LAN network connection)
try to run "npm start" again, it should be working now.
If my solution is not clear feel free to ask me.

[santosleonardo2]

@raminghaderi, you saved the day!
Thank you so much!!!