React Native Fetch on Android returns Network request failed

Question

I am building a React Native mobile application that is using a Laravel backend, currently running on localhost:8000. When making a fetch request from an Android device to my server, my application gets the following error logs:

My code is below:

export default class App extends Component {
 login() {
    fetch('http://localhost:8000/api/establishments/get')
      .then((response) => response.json())
      .then((responseJson) => {
        console.log('success!');
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
    return (
      <TouchableOpacity activeOpacity={.5} onPress={() => this.login()}>
        <Text>Sign In</Text>
      </TouchableOpacity>
    );
  }
}

When I copy and paste the exact route into my browser, the server responds successfully and completely as expected. I believe it is an issue with network permissions from my application? I have only just began learning React Native a week ago and would appreciate any help at all.

I have also tried adding axios to my React Native application and using axios.get(...) and I get an identical error log as when using fetch, shown in the above image. — davidzucco
– davidzucco, Commented Jul 25, 2017 at 1:58

Kristijan Tomić · Accepted Answer · 2018-03-03 08:58:36Z

2

iOS runs in a simulator while Android runs in an emulator. Emulator emulates a real device, while simulator only imitates a device. Therefore localhost on Android points to the emulated Android device instead of the machine where your server runs. You should change localhost in yours request paths with the IP address of your machine.

More details at: https://github.com/facebook/react-native/issues/10404#issuecomment-267303151

answered Mar 3, 2018 at 8:58

Kristijan Tomić

1217 bronze badges

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

Comments

Mμ. · Accepted Answer · 2017-07-25 03:54:27Z

1

I suspect that 127.0.0.1 or localhost will point to the emulator itself in your computer where the server is currently running. Try replacing 127.0.0.1 / localhost with 10.0.2.2 if you are on AVD or 10.0.3.2 if you are on Genymotion or with your computer's actual IP address. In addition, you should also make sure that your android app can use internet. You can do that by adding

<uses-permission android:name="android.permission.INTERNET" />

in your AndroidManifest.xml.

edited Jul 25, 2017 at 3:54

answered Jul 25, 2017 at 3:23

Mμ.

8,5723 gold badges28 silver badges36 bronze badges

9 Comments

davidzucco Over a year ago

Sorry I didn't specify. I am using the 'npm start' command from my terminal, and deploying to my physical device (Galaxy S8+).

Mμ. Over a year ago

can you access internet, on your phone and are you in the same network as your computer?

davidzucco Over a year ago

Yes I am on the same WiFi as my laptop, on my phone.

Mμ. Over a year ago

Do you have this on android manifest: <uses-permission android:name="android.permission.INTERNET" /> to enable internet?

davidzucco Over a year ago

Do you know where the AndroidManifest.xml is located?

|

Nijat Aliyev · Accepted Answer · 2020-06-23 19:55:36Z

Founded solution for Laravel and react native (Physical device)

open cmd run ipconfig copy ipv4 address for example my ipv4 address is 192.168.43.235
Connect same network for laptop and physical device or open hotspot and connect same network
Now run command start laravel backend php artisan serve --host=192.168.43.235 --port=8000
change api url from react native api service

apiServise.js

    import axios from 'axios';
    
    const api_url = 'http://192.168.43.235:8000';
    
    export const getCategories = request =>
  axios
    .get(api_url + '/api/categories', {
      params: request || {},
    })
    .then(response => response.data);

homescreen.js

import {getCategories} from '../services/ApiService';

async fetchCategories() {
    await getCategories()
      .then(response => {
        this.setState({
          dataCategories: response
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

Now run command start react native app react-native run-android

that is all...now api request working fine.

Kaan Eroğlu · Accepted Answer · 2020-01-11 22:51:10Z

-2

Change http://localhost:8000/api/establishments/get localhost with, which can your emulator reach generally 10.0.2.2 ;) have phun.

answered Jan 11, 2020 at 22:51

Kaan Eroğlu

631 silver badge7 bronze badges

Collectives™ on Stack Overflow

React Native Fetch on Android returns Network request failed

4 Answers 4

Comments

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related