How to solve 'TypeError: Network request failed' in React Native?

Question

Environment

I'm developing a mobile app with React Native and Expo.

Also, developing api with Laravel that is in my local environment. (http://localhost:8000/)

This app is working on Expo client app.

What I'm trying to do

I wanna get datas from api.

Code

App.js

componentDidMount() {
  return fetch('http://localhost:8000/api/test')
    .then((response) => response.json())
    .then((responseJson) => {
      console.log(responseJson);
    })
    .catch((error) => {
      console.error(error);
    });
}

Error

TypeError: Network request failed

Expo version

3.22.3

I would appreciate it if you could give me any advice.

iOS won't make api calls to http, there are some additional steps required to make that happen, google it or switch to https — Vaibhav Vishal
– Vaibhav Vishal, Commented Jul 17, 2020 at 5:13

moxspoy · Accepted Answer · 2020-07-17 07:23:27Z

8

you should not use http://localhost:8000 for your base URL, please use your IP Address.

if you use Macbook, you can find the IP in System Preferences > Network

then use fetch('http://172.20.10.5:8000/api/test') in your react native app.

if my base URL when access via browser is http://172.20.10.5:8000/mysite/api/test you need fetch in react native fetch('http://172.20.10.5:8000/mysite/api/test')

basically, android & ios did not allow request using HTTP, you need to do something below to allow HTTP connection instead of HTTPS.

android

and then add android:usesCleartextTraffic="true" in your Android manifest android/app/src/main/AndroidManifest.xml

iphone

add this in info.plist

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

edited Jul 17, 2020 at 7:23

answered Jul 17, 2020 at 3:31

moxspoy

8301 gold badge7 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

LPFJ Over a year ago

Thank you. I changed to my IP address, but it didn't work :(

moxspoy Over a year ago

can i know your full URL in your Browser/Postman for accessing the datas? also make sure your computer (server) and your device must be on the same local network. Wifi and lan shares the same network.

LPFJ Over a year ago

My full URL is localhost:8000/api/test. My computer and iPhone are on the same network.

moxspoy Over a year ago

add android:usesCleartextTraffic="true" in Android manifest

LPFJ Over a year ago

Is that related? I'm using expo client app on iPhone.

|

Lolz · Accepted Answer · 2021-09-15 03:50:03Z

5

Try using http://10.0.2.2/api/test

Emulators has special IP Address for localhost connection.

Check this table out

Read about it here

answered Sep 15, 2021 at 3:50

Lolz

711 silver badge2 bronze badges

Comments

Max Ngassa · Accepted Answer · 2022-08-26 22:23:07Z

-1

if after this it not work, disable you firewall

answered Aug 26, 2022 at 22:23

Max Ngassa

112 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to solve 'TypeError: Network request failed' in React Native?

3 Answers 3

android

iphone

10 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

android

iphone

10 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related