Network Request Failed for Expo when using Json-Server - react-native

It's my first time using expo for mobile development. I am trying to fetch the API from the JSON-Server but there is always the network request failed error. I have seen many posts on this issue but none of which worked for me.
What I have done:
Change to LAN connection on Expo. Start the json-server and set the host as my IPv4 address, worked on web, not on my android mobile. Also fetch http://192.xxx:3000 using the IP instead of localhost.
Change to 10.0.0.2 which should work for android emulator, but since I am using physical device. It does not work for me as well.
Change to 0.0.0.0. Does not work on both web and mobile (the endpoint is not working in the first place).
I have no ideas what else I can do now so I would like to ask if anyone knows what is happening here?

Related

React Native - expo go not able to connect

I'm very new to React Native and I'm understanding now Ports and similar things. In the last days I was able to access through Expo Go my app, but starting from today I ran into issues.
I think the problem was, that I was accessing the app using an university wi-fi connection, while the other days I used a mobile data connection. With Wi-Fi I was not able to access the app. The error log said: java.net.connectException: failed to connect to (...)
So I started a big journey thorugh ports, ip addresses and firewall, arriving to the ubuntu's ufw. Actually I don't know exactly what I've done, but the last try was to disable everything (like it was at the beginning) and retrying to access the app, nothing changed. The error log was: java.net.SocketTimoutException: failed to connect to (...) from (...)
I tried also use tunnel (like this question says Unable to connect to Expo React Native Project on WSL2 with Expo Go on phone) but it didn't help. In this case, the app says New update avalable: downloading... but never ends.
So, any suggestion to understand a) which is the real problem (a part that I've done something that I didn't understand) and b) how to solve it ?

Expo/React Native: Stange local network behavior when making remote calls

When testing my React Native locally, I witnessed some strange behavior I am hoping to get clarification on
Context
I am building and testing a simple form that lets a user update their account info. If their new username is taken, the server responds with a 304 (otherwise, 200).
I am testing on my physical iOS device, and pointing my API against the local IP address that my expo cli is running from that is on the same wifi network (e.g. http://192.111.11.111:8080/)
Strange behavior
In every case where my local webserver does return a 304, my local expo app receives a 200. I have confirmed that my server is in fact returning a 304 with logging + breakpoints. Furthermore, when I point my API against my production server, which has the same backend code deployed, the app correctly receives a 304.
This leads me to believe that the only logical explanation is that there is some magic that expo does when doing local remote calls, but I have been unable to find anyone online that has had similar issues. Does anybody have any thoughts on what could be causing this?

Expo tunnel not working (invalid certificate)

I'd like to use expo start --tunnel to allow connecting to the App over the internet.
However, right after starting, the DevTools open and show me the following error:
Error loading DevTools
ValidationError: "urlType" must be one of [exp, http, redirect, no-protocol]
The console shows me:
Starting Metro Bundler.
Tunnel URL not found (it might not be ready yet), falling back to LAN URL.
Tunnel URL not found (it might not be ready yet), falling back to LAN URL.
So far so bad.. I've then looked into the .expo/packager-info.json to see what URLs have been generated. The file looks like this:
{
"devToolsPort": 19002,
"expoServerPort": 19000,
"packagerPort": 19001,
"packagerPid": 7316,
"expoServerNgrokUrl": "https://sz-p2a.anonymous.123.exp.direct",
"packagerNgrokUrl": "https://packager.sz-p2a.anonymous.123.exp.direct",
"ngrokPid": 5316,
"webpackServerPort": null
}
Then I've tried to open these URLs on the target devices. When doing so, I get an SSLPeerUnverifiedException because of an invalid certificate. I think it's the same error that I get when navigating to the URL directly in the browser.
So, am I doing anything wrong or is the tunnel workflow broken right now?
What might I do to get it working?
I somehow bypassed this problem by removing https from the link.
To do so, take the expoServerNgrokUrl from .expo/packager-info.json and turn:
https://sz-p2a.anonymous.123.exp.direct
into
http://sz-p2a.anonymous.123.exp.direct
Then you can send it to any Expo device.
I had the same issue, logged out expo logout, logged in again expo login and it worked.

React Native cannot access express backend

I have made a REST API for my react native application and want to fetch data from it, though this is not possible for me.
I have tried using localhost and ipv4 as the url, but it doesn't help at all. I also get an "Network Error" at times when I change to the different URLs, which I don't fully understand why they show up, since ipv4 or localhost should work.
I usually get a warning about the metro server after a while, if that has anything to do with it.
How can I connect my React Native client to my express backend?
try to run this command, it will link the port in you device which you run your React Native app with the port of your laptop,
"adb reverse tcp:3000 tcp:3000"
then run "react-native run-android"
i work with the port 3000, you can work with the port you want
I found the issue! I forgot a / in my base url, which broke the whole thing with axios. And I had one too many in my login post request!

Stop exp from switching to LAN URL when tunneling

When trying to run exp start --tunnel in a react-native project, I often see the warning:
22:15:31 [exp] Your URL is: exp://192.168.200.83:19000
....
22:15:31 [exp] Switched to a LAN URL because the tunnel appears to be down. Only devices in the same network can access the app. Restart with exp start --tunnel to try reconnecting.
This is a problem since none of my devices or the AVD can connect to this URL to download the project.
The problem does not seem to related to any firewall settings as it does not occur every time (just very consistently). When the error does not happen, I get a URL that I can work with that looks like:
22:44:38 [exp] Your URL is: exp://en-ux3.myexpousername.myapp.exp.direct:80
Is there something that can be done about this to get it to stop switching? What causes this switching exactly? Is there some way to get devices to be able to use this URL instead (I have an android device connected to same wifi, but seems to be unable to download the project from the LAN URL)?
** Totally new to react-native and expo, so if I am missing evidence of any common debugging steps for this kind of problem, please let me know what they may be in the comments so I can update the question.
UPDATE:
A similar question to this is addressed in the expo forums: https://forums.expo.io/t/switched-to-a-lan-url-because-the-tunnel-appears-to-be-down-only-devices-in-the-same-network-can-access-the-app-you-can-restart-the-project-to-try-reconnecting/4483.
I was having the message
Switched to a LAN URL because the tunnel appears to be down. Only devices in the same network can access the app. You can restart the project to try reconnecting.
And I've solved it closing Visual Studio (then pressing the Restart button from Expo XDE)