Connecting to localhost with React Native

Question

I'm trying to fetch an json from a locally hosted express API using a react native fetch get request. Our react native code is:

 useEffect(() => {
    fetch("http://localhost:5000/api/listings")
      .then((response) => response.json())
      .then((responseJSON) => {
        console.log(responseJSON);
        setIsLoading(false);
        setListings(responseJSON);
      })
      .catch((error) => console.log(error));
  }, []);

The following error is logged when we try to send the request:

Network request failed
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:30140:19 in <unknown>
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:31129:20 in <unknown>
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:31045:8 in _callTimer
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:31253:8 in Object.callTimers
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:3213:30 in MessageQueue.__callFunction
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:2945:16 in <unknown>
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:3167:12 in MessageQueue.__guard
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:2944:13 in MessageQueue.callFunctionReturnFlushedQueue

When sending a get request from postman, the json is displayed so I am confused what is going wrong.

Answer 1

I believe the code below will help you. Enter it in terminal / cmd. Your emulator must be open.

adb reverse tcp:5000 tcp:5000

Now your link should work http://localhost:5000/api/listings

If the first option did not work, try replacing your link by the link below:

http://10.0.2.2:5000/api/listings

This is due to the fact that Android does not understand localhost as your PC, for it, it is the localhost, so in the first choice we redirect the emulator door traffic for Windows / Linux. In the MacOS this error does not occur because the MacOS understands that the whole environment is localhost.

Answer 2

Run the below command to access localhost or 127.0.0.1 or your computer's ip

adb -s <device_name> reverse tcp:backend_port tcp:backend_port

Example:

adb -s emulator-5554 reverse tcp:8080tcp:8080

OR

adb reverse tcp:8080 tcp:8080

Answer 3

The development environment is a context and the android runner environment (if it is this) is another context.

If your backend is in node, you could use the serve lib . It is SO independent and I think this is the easiest form.

You could configure the host in /etc/hosts/ file too, if you are using Linux (Debian-like).