Network request failed || expo || iOS device

[AlexisChup]

🐛 Bug Report

What I would like to do

I'm try to send a request to my API (created with ApiPlatform) in local in my React Native app with my ios device on expo.
Here the request that I want to do : "http://127.0.0.1:8000/api/beers"

What works

My request works on my computer

My request works on my android emulator by typing that : "http://10.0.2.2:8000/api/beers"

What I've done

For the ios Device on expo, I've read that I need to change 127.0.0.1:8000 by the Ipv4 of my computer, so I ran

ipconfig

in a powershell, and get my Ipv4 address, put in my request : "http://172.20.10.2:8000/api/beers"

I've read that ios doesn't allow http protocole, so I add in my app.json -> infoPlist -> NSAppTransportSecurity -> true

    "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "NSAppTransportSecurity" : {
          "NSAllowsArbitraryLoads" : true,
        }
      }
    }

Like all the other topic said, but always the same error : "Network request failed"

I don't see other way to fix it. I probably miss something.

Here the function that permit the request

export function getsBeersFromRatio(){
    const url = Platform.OS === 'android'? 'http://10.0.2.2:8000/api/beers?abv%5Bgte%5D=6.2' : 'http://172.20.10.2:8000/api/beers'
    return fetch(url)
        .then((response) => response.json())
        .catch((error) => console.log(error));
}


  _searchBeersFromRatio(){
    this.setState({
      beers: [],
    },
    () => {
      this._loadBeersFromRatio()
    })
  }



  _loadBeersFromRatio(){
    console.log('====================================');
    console.log('       NEW REQUEST                   ');
    console.log('====================================');
    this.setState({ isLoading: true })
    getsBeersFromRatio().then(data => {
      console.log(data);

    })
  }


    <Button
      title = "get data from API"
      onPress = {() => this._searchBeersFromRatio()}
    />

Here my package.json :

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "postinstall": "node ./scripts/stfu.js"
  },
  "dependencies": {
    "country-list": "^2.1.1",
    "expo": "^33.0.0",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-chart-kit": "^2.6.1",
    "react-native-elements": "^1.1.0",
    "react-native-flags": "^1.0.0",
    "react-native-redash": "^6.3.1",
    "react-native-view-more-text": "^2.1.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.11.0",
    "react-redux": "^7.1.0",
    "redux": "^4.0.1",
    "rn-vertical-slider": "^1.0.4",
    "victory-native": "^32.0.2"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.1.1"
  },
  "private": true
}

Here my app.json

{
  "expo": {
    "name": "BierRatio",
    "slug": "BierRatio",
    "privacy": "public",
    "sdkVersion": "33.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "NSAppTransportSecurity" : {
          "NSAllowsArbitraryLoads" : true,
        }
      }
    }
  }
}

Environment

  Expo CLI 2.11.6 environment info:
    System:
      OS: Windows 10
    Binaries:
      npm: 6.7.0 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.3.0.0 AI-182.5107.16.33.5314842

Target

iOS device on Expo on React Native app

Expected Behavior

I would like the same output as the android emulator do.

Actual Behavior

My actual output is "Netword request failed"

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[RobinCsl]

Hi @AlexisChup,

It seems you are trying to access a local API endpoint, running on your desktop computer, from your iOS device.

To pinpoint the issue:

• can you try to use another API endpoint, for example https://anapioficeandfire.com/ and report if the network request worked?
• is your iOS device connected to the Internet on the same network as your desktop computer?

[AlexisChup]

Hi @RobinCsl

Yes, that's it.

I'm connected in the same network in both.

I've tried your API example, and it works on my emulator and my iOS device.

I'm using other API but there are started by 'https'. Here the problem seem to be the 'http'.

However I tried to fixed it by add "NSAppTransportSecurity" : "true" in the infoPlist in the app.json, but nothing change. Like I say upper.

I've also try to connected to internet in an other home, change the IPv4. But still the issue.

I really don't have other ideas to fix it.

Thanks for your time !

[AlexisChup]

Workaround

I finally find a workaroud :

When I typed http://"My_IPv4_address":8000/"My_Api" on my computer, he said : "ERR_CONNECTION_REFUSED"

So I tried to run $ php bin/console server:run "My_IPv4_address":8000

A firewall notification appears to me, I accept it.
I send my request again in my iOS device and I don't know why it works now.

So I need to run

$ php bin/console server:run

and in a other powershell

$ php bin/console server:run "My_IPv4_address":8000

to have access to my local API in my android emulator and my iOS device.

[RobinCsl]

Glad you figured it out!