React Native Android Fetch failing on connection to local API

Question

I\'m using the fetch API in my react-native Android app to make requests to a local API. I usually query said API from react web apps at http://localhost:8163.

I\'m t

Answer 1

http or https based on it copy the URLhttps://ngrok.com/download

**step 1: download ngrok unzip the package

step 2 :open ngrok.exe install it (or) double click on it terminal will be open

step 3: type

    ngrok http (port no of backend services)

eg:ngrok http 8081

step 4: copy url of https if it is https and then paste it in place of URL from UI. **

Answer 2

You are not able to access your local development server because that port hasn't been forwarded by ADB yet. When you run react-native run-android, React Native maps the port 8081 with your mobile device on USB. When you disconnect your USB you won't be able to refresh or hot reload your code anymore. So in this situation you can do 2 things, either map your local server port just like React Native does or use your local IP address.

1. Mapping Port

   This only works if you are using Android 6.0+. To forward a port using ADB run the following command in your terminal:

   adb reverse tcp:8163 tcp:8163
   

   This will map your local 8163 port to mobile's 8163 port. You'll be able to access your development server this way.

2. Using local IP address

   You can also use your local IP on React Native development app to reload them without USB. Shake your device or long press the menu button to open developer menu. Open Dev Settings, then tap Debug server host & port for device. Here you can enter your machine's local IP with port number 8081. For ex. if your machine's IP is 192.168.1.100 then you'd enter 192.168.1.100:8081 in here for successful connection. Now we have covered that we can reload the app. After this when you want to use your local machine's development server use the same IP with your server's port number.

You should be good to go with this.

Answer 3

Open the console in you're desktop, type : ipconfig

you'll get an IPv4_Address

and try this : 'http://IPv4_Address:8163/extension/auth'

Answer 4

Had the same/similar issue - took me two full days to solve it. I use a Win10 machine with Visual Studio Code, attached Android device and a local PHP server for API. Maybe this will help somebody:

1. Cable -> Try different USB-cables, out of my 3 cables only one works
2. Connection mode -> Very important, I had to choose PTP mode to make it work
3. Same network -> Phone and PC must be on the same network
4. Private network -> The network must be a private network, public does not work
5. IP -> Run ipconfig in PowerShell and get your IP4 address
6. Firewall -> Accept the firewall-prompt
7. PHP server -> Start built in PHP server with "php -S {your IP}:8081"
8. Test PHP server -> Create index.php and open {your IP}:8081 on your phone
9. Fetch -> Create fetch script (example below)

       fetch('http://{your IP}:8081/')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({ message : responseJson.message.data })
        })
      .catch((error) => {
        console.error(error);
      }); 

Answer 5

If you are using Metro Bundler in Expo Developer Tools Use CONNECTION LAN ip address Sample image Metro Bundler

How to used in react native

    getfetch = () => {
    return fetch('http://LAN-IP-ADDRESS-HERE:4300/customers/',{
          method: 'GET',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          }
        })
    .then((response) => response.json())
    .then((responseJson) => {

       console.log(responseJson);

    })
    .catch((error) =>{
        console.error(error);
    });
}

Sample image REST API using postman

Sample image POSTMAN

Hopefully this is helpful :)

Answer 6

Maybe I'm late with the suggestion, but this helped me.

You should try http://0.0.0.0:8163/extension/auth