React Native Part 2 (Networking: Fetching Data)

I think it’s because the codeblock in brackets doesn’t return anything. In the second example it’s clear that the lambda should return the result of apiClient.get(endpoint). If you supply a codeblock as the lambda body this block can contain several statements and you need to explicitly return a value if you want the arrow function to return something. So I believe () => { return apiClient.get(endpoint);} should work.

2 Likes

Hey Sam,

Yeah that works as well and makes perfect sense haha! Just tested it.

2 Likes

Hi everyone, I met the same issue in this section and I found my way to solve the issue. I can fetch the listings data and get the product images.

  1. change the address of assetBaseUrl in the Backend → config → development.json to your localhost address.

  2. In the component client.js, use your localhost address.

1 Like

hey everyone so I was getting the Network Error before, and couldn’t figure out why it wasn’t working. I was able to use localhost and 127.0.0.1 (just learned they are the same thing) but as Mosh said, using localhost won’t work for android devices.

I then found a post in the React Native Developers discord channel where someone said that you can’t fetch from localhost because localhost is your own phone (if you try using localhost and running the app on your own physical iOS device, you’ll see that you still get the network error even though it works in the simulator). The same person who posted the above mentioned message then said that you need to use your computer’s LAN IP address. I had been using the IP address i found when I googled “what is my IP address” since I didn’t know there were different types/purposes.

After following the instructions on this site (get your LAN IP address in MacOSX), and I have fixed the issue and can attest that using my LAN IP address allows my iOS simulator, iOS physical device, AND android simulator to successfully connect to my API.

As a reminder, you’ll have to use the LAN IP address in the baseURL in client.js in the client AND assetsBaseUrl in development.json in the API.

I hope this helps!

hey everyone so I was getting the Network Error before, and couldn’t figure out why it wasn’t working. I was able to use localhost and 127.0.0.1 (just learned they are the same thing) but as Mosh said, using localhost won’t work for android devices.

I then found a post in the React Native Developers discord channel where someone said that you can’t fetch from localhost because localhost is your own phone (if you try using localhost and running the app on your own physical iOS device, you’ll see that you still get the network error even though it works in the simulator). The same person who posted the above mentioned message then said that you need to use your computer’s LAN IP address. I had been using the IP address i found when I googled “what is my IP address” since I didn’t know there were different types/purposes.

After following the instructions on OS X daily (get your LAN IP address in MacOSX), I was able to fix the issue and can attest that using my LAN IP address allows my iOS simulator, iOS physical device, AND android simulator to successfully connect to my API.

As a reminder, you’ll have to use the LAN IP address in the baseURL in client.js in the client AND assetsBaseUrl in development.json in the API.

I hope this helps!

Good morning, gentlemen. I’m experiencing the identical issue as mentioned above, and I’ve tried every potential option with no success. Why is this network fault a problem because I performed the same thing Mosh did?

Apps in production will typically connect to a HTTPS domain with an SSL certificate, and not an IP.

Localhost won’t work from your phone, because localhost on your phone is the phone itself, and localhost on the laptop is the laptop.

What you should do is create a Virtual Host. You can call it whatever you like. I’ll use http://awesome.api:9000 as our example here.

On Linux or a Mac, we edit the hosts file with admin rights

sudo nano /etc/hosts

On Windows, the path is

C:\Windows\system32\drivers\etc\hosts

In there, we add the fake domain name, and point it to 127.0.0.1:

127.0.0.1 awesome.api

Browsing to awesome.api now takes you to localhost. But we still need to proxy our device to the laptop. You can use Proxyman for that! (now also available for windows) https://proxyman.io/.

Load it up, and proxyman will be running on port 9090, and will tell you the IP address (in my case it was 192.168.0.2). In your phone Wifi settings, add the proxy settings, IP and port 9090.

Next open your phone browser and browse to proxy.man/ssl, download and then install the Proxyman Certificate profile from Settings.

Finally, go into Settings > General > About > Certificate Trust Settings, and switch on Enable Full Trust for the proxy man cert.

At this point you should be able to reach http://awesome.api:9000 from your phone! :sunglasses:

Just remember to turn proxy settings back off on your phone when not devving! :stuck_out_tongue:

Dear somebody,
That’s not working for me too. I used the correct IPv4 address, I did the same as Mosh and worked perfectly fine, but now there is no “Listings” screen when I tap on “Feed” button. Don’t appear for me any error or warning.
Anybody who resolved the poblem? Please help us.
Thankssss.

Well, I tried all of the possibilities, I used IPv6, './listings/, localhost.
I also downloaded the zipped files and tried them, every time I got “problem”: “NETWORK_ERROR”.
I don’t know Mosh why didn’t figured out a better solution for backend, as I see a lot of people has the same problem. Is there somebody who resolved the problem?

The response of the request:
Object {
“config”: Object {
“adapter”: [Function xhrAdapter],
“baseURL”: “http://192.168.0.10:9000/api”,
“data”: undefined,
“headers”: Object {
“Accept”: “application/json”,
},
“maxContentLength”: -1,
“method”: “get”,
“params”: Object {},
“timeout”: 0,
“transformRequest”: Array [
[Function transformRequest],
],
“transformResponse”: Array [
[Function transformResponse],
],
“url”: “/listings”,
“validateStatus”: [Function validateStatus],
“xsrfCookieName”: “XSRF-TOKEN”,
“xsrfHeaderName”: “X-XSRF-TOKEN”,
},
“data”: null,
“duration”: 69619,
“headers”: null,
“ok”: false,
“originalError”: [Error: Network Error],
“problem”: “NETWORK_ERROR”,
“status”: null,
}

Thanks Jonasliu90, this solution worked for me!