Create-react-native-app: fetch request to localhost server

[telmen]

Description

I'm trying to call HTTP request from a real device to my local network computer which is running server.

Expected Behavior

fetch request to localhost, eg: localhost:8000 to get or post some data.

Observed Behavior

It keeps saying Network Request failed. But when I tried it on android emulator I would change server address to http://10.0.3.2:8000 something like this and it works. Yeah I've already changed my server address to internal server address like 192.168.1.x when I tried on a real device.

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.0
• npm -v: 3.10.8
• yarn --version: 0.17.10
• watchman version:

Also specify:

1. Operating system: Windows 10/Linux Ubuntu 16.04
2. Phone/emulator/simulator & version: iOS 10.3

[anp]

Can you paste an example of the exact code that's failing? Are you able to reach these URLs in a web browser on your phone?

[telmen]

Nevermind, Thanks. https://github.com/react-community/create-react-native-app/issues/60 did the trick for me

[brbrr]

Hi @telmen
Could you post your solution?

I run in to same problem while trying to POST to localhost server from CRNA. GET request from https://facebook.github.io/react-native/docs/network.html works fine

UPD: Solved!
In CRNA code I need to use my server IP instead of localhost 😜

[telmen]

Hi @brbrr, sorry for late reply. Glad that you have solved it. Yeah it was needed to use internal IP address instead of localhost. 👍

[zacharygcook]

@telmen still don't totally understand this problem or why the solution fixes it, but thanks for posting that tip to "use the internal IP address" on here! Solved my problems

[kenshinman]

@zacharygcook same here
example code...

fetch("http://localhost:3000/api/data")
.then( res => res.json() )
....bla bla bla 

the above code doesn't work, but when you represent localhost with your system's ip address (IPv4 address) it works.

Here is the nest explanation i found

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

[NickyMwangi]

This doesnt work for me. I am using Linux mint and Xampp which when installed is Lampp. This is my code
DBRegistration = (uid) => { fetch("http://192.168.0.102:80/TinyvideosAPI/users.php", { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ fbuid: uid, usermail: this.state.emailaddr, userpass: this.state.pass }), }).then((response) => response.json()) .then((responseJson) => { Alert.alert(responseJson); this.props.navigation.navigate("Login") }).catch((error) => { console.error('MySQL error' + error); }); }

[NickyMwangi]

DBRegistration = (uid) => {
fetch("http://192.168.0.102:80/TinyvideosAPI/users.php", {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
fbuid: uid,
usermail: this.state.emailaddr,
userpass: this.state.pass
}),
}).then((response) => response.json())
.then((responseJson) => {
Alert.alert(responseJson);
this.props.navigation.navigate("Login")
}).catch((error) => {
console.error('MySQL error' + error);
});
}

[RimashMohomed]

@kenshinman @NickyMwangi I had the similar issue using 10.0.2.2 as the IP solved, This is due to android emulator see https://developer.android.com/studio/run/emulator-networking