Network request failed || expo || iOS device

🐛 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”