React-native: Network request Issues with react native 0.59

[MichelMelhem]

🐛 Bug Report

Hello,
I recently encountered a problem with the network requests of my app.
Before version 0.59 the requests to my API worked perfectly but since this version the requests to my API no longer work.

As you can see my api work perfectly :

And when i send the api request with react-native i don't get a log in my API console like this,

To Reproduce

Make a network request with react-native 0.59 and you will get a network error
Make a network request with react-native >0.59 and you will don't get an error

Expected Behavior

You will get a network error in the console

Code Example

import qs from "qs";
import axios from "axios";
import { systemConstants } from "../constants";

interface credentials {
  email: string;
  password: string;
}

interface res {
  data: string;
}

const fetchUser = async (credentials: credentials) => {
  const requestOption = {
    method: "POST",
    headers: { "content-type": "application/x-www-form-urlencoded" },
    data: qs.stringify({
      email: credentials.email,
      password: credentials.password
    }),
    url: "http://192.168.1.25:3000/api/auth/login"
  };

  const res: res = await axios(requestOption);
  res.data;
};

export const userServices = {
  fetchUser
};

Environment

$ react-native info
info
React Native Environment Info:
System:
OS: Windows 10
CPU: (6) x64 Intel(R) Core(TM) i5-8600K CPU @ 3.60GHz
Memory: 8.95 GB / 15.95 GB
Binaries:
Yarn: 1.15.2 - C:Program Files (x86)Yarnbinyarn.CMD
npm: 6.7.0 - C:Program Filesnodejsnpm.CMD

Thank you for your help !

[MichelMelhem]

Ps:
I'm running my app on android not ios

[darekg11]

Your local API is served under HTTP, please add your API IP address to:
/android/app/src/debug/res/xml/react_native_config.xml
This is new since React Native 0.59 and recommended thing to do from Google (blocking all requests served under not crypted HTTP traffic)

[MichelMelhem]

@darekg11
Thank you very much for your help but it would have been nice if it was written in the changelog ...

[nguyenvanphuc2203]

@darekg11 it work on emulator, not work when build release,
help me!

[darekg11]

@nguyenvanphuc2203 This is becuase path /android/app/src/debug/res/xml/react_native_config.xml points to debug Android Manifest that is used when running debug version of the app.
If you would like to have following behaviour in release build, you should create release version of the manifest and add it there:

1. Inside this android/app/src/release/ directory create a AndroidManifest.xml file. (path: android/app/src/release/AndroidManifest.xml)
2. Add required lines there.

I can't test it right now but it should work, let me just point out that you should not use HTTP to communicate with your services in production environment and it is highly discouraged.

[nguyenvanphuc2203]

i try to create release folder contain some file like debug folder but get error.

@darekg11

[darekg11]

But it looks like the XML you created is invalid? Can you paste the content? @nguyenvanphuc2203

[nguyenvanphuc2203]

@darekg11 yes, it look like AndroidManifest.xml in debug folder

[shreyasnisal]

I am still having trouble with this. I need to make a request to an IP, and I get another IP as a response from the first one. Then, I need to make requests to the second IP, which I got at runtime only. Is there some way I can add an IP dynamically to the XML file?

[vikas1992]

@shreyasnisal
bro did you(/or anyone) find any workaround to dynamically update those ip addresses in xml file ??

[hammooooody]

This definitely solved it for me.

added these to my /android/app/src/main/AndroidManifest.xml

<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"  // <-- added this 
        ...>
        ...
    </application>
</manifest>

[paraskathpal]

there is no folder src as i am working on expo not react native cli

[vinitdhoke]

This definitely solved it for me.

added these to my /android/app/src/main/AndroidManifest.xml

<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"  // <-- added this 
        ...>
        ...
    </application>
</manifest>

This worked for me. Debugging was fine but after building apk CORS error was coming. Solved after adding this line. Thank you.

[DillonMemo]

This definitely solved it for me.

added these to my /android/app/src/main/AndroidManifest.xml

<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"  // <-- added this 
        ...>
        ...
    </application>
</manifest>

Thanks for that

[waleedarshad]

Adding this in request header resovle my issue

"Content-Type": "application/x-www-form-urlencoded", Accept: "application/json"`

[ashraf-kx]

This definitely solved it for me.

added these to my /android/app/src/main/AndroidManifest.xml

<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"  // <-- added this 
        ...>
        ...
    </application>
</manifest>

that was Great tweak ;)

[PramanCode]

Can someone please explain how to resolve this issue in a Managed Workflow i.e. Expo. As I can't find any solution for this anywhere. Below is my code producing 'Network request failed' error again and again while trying to upload mp4 video on a local PHP server -
React Native Version - 0.59

async sendData() {
    await MediaLibrary.getAssetsAsync({ first: 10, sortBy: MediaLibrary.SortBy.creationTime, mediaType: MediaLibrary.MediaType.video })
      .then(async response => {
        const body = new FormData();
        var obj = {
          'uri': response.assets[0].uri,
          'type': 'video/mp4',
          'name': response.assets[0].filename
        };
        body.append('key', obj);
       await fetch('http://10.0.0.8:8080/app/test', {
          method: 'POST',
          headers:{
            'content-type':'video/mp4'
          },
          body: body
        })
          .then(res =>  res.json())
          .then((responseJson) => {
            console.log('data: '+JSON.stringify(responseJson));
          })
          .catch((error) => {
            //ERROR 
            console.log(error);
          });
      })
      .catch(e => console.log(e));
}

[snkhan120]

resValue

This definitely solved it for me.

added these to my /android/app/src/main/AndroidManifest.xml

<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"  // <-- added this 
        ...>
        ...
    </application>
</manifest>

its Work!

[PramanCode]

I haven't ejected my project yet so this file doesn't exist, so do I have to eject my project from expo/Managed Workflow to fix this? or Can I make some changes in app.json and get the desired solution?

[gghnisan]

Hello!
If you have RN 0.59+
add the following to the react_native_config.xml file:

    <domain includeSubdomains="false">your.domain.com</domain>

this is my react_native_config.xml file:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="false">your.domain.com</domain>
    </domain-config>
</network-security-config>

http: //your.domain.com
the domain must be without http: //

<domain includeSubdomains="false">your.domain.com</domain>

and then include your file react_native_config.xml in file

android/app/src/debug/AndroidManifest.xml

this is my android/app/src/debug/AndroidManifest.xml file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools">
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <application tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" android:networkSecurityConfig="@xml/react_native_config" />
</manifest>

[KBiswas98]

1. change from localhost to your ip
2. add http://

http://192.168.43.49:3000/user/