React Native android app throws Network Error when

问题:

I am working on an app which is used to get Tenders data across the country. I am using axio to post and get data and everything works fine. I have generated Apk and tested it on simulators and Bluestaks but when I published the app yesterday then app started to throw the network error on login page. This is the first time I am getting the error and I am badly stuck now.

please somebody help me

My package.json file is dependencies are

"dependencies": {
"axios": "^0.19.0",
"firebase": "^5.11.1",
"native-base": "^2.12.1",
"react": "16.8.6",
"react-native": "0.60.3",
"react-native-elements": "^0.19.1",
"react-native-image-picker": "^1.0.1",
"react-native-router-flux": "^4.0.6",
"react-native-vector-icons": "^6.6.0",
"react-redux": "^5.1.0",
"redux": "^4.0.1"

},

Node version is 10.16.0 react-native-cli: 2.0.1

my Login page code is here

sendApicall(username,me)
{
    debugger;
    const { REST_API } = config;
    var me = this;
    //const {username,password} = this.state;// {username:"[e-mail]",password:"0346asdff"};
    me.setState({isLoading:true});

    let apiconfig = {
        headers: {
        'Content-Type': 'application/json; charset=UTF-8'
    }};

    axios.post(REST_API.Tenders.Login,
        {
          "PhoneNumber":username,
            "Email":username,
            "Password": "xxxxxxxx"
        },apiconfig).then(response => {
            if(response.data.success)
            {                                    
                me.setState({isLoading:false});
                const baseModel = response.data;
                var orgid = baseModel.orgid;   
                var userData = baseModel.userData;   
              Actions.newSplash({UserCompany:baseModel.data,orgid,UserData:userData});
            }else
            { 
                me.setState({isLoading:false});
                me.showAlertError("Login Falied");

            }

      }).catch(error => {
        me.setState({isLoading:false});
        me.showAlertError("Error"+ error.message);
        console.log("error", error)        
      });
}

and my AndroidManifest.xml file is

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

  <uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>

Your help will be highly appreciated

回答1:

I'm guessing that you're trying to access a HTTP protocol to access the API. As of Android 9 (which again, I assume you're using) you cannot access HTTP without configuring access to 'CLEARTEXT traffic'

Steps to fix/Workaround:

Add an xml file in your android project -> /project_root/android/app/src/main/res/xml (if there isn't an xml folder, just add one).

Then add an xml in there called network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

Then in your AndroidManifest.xml add in your <application> node, dont copy the ... just add the android: part:

<application
  ...
  android:networkSecurityConfig="@xml/network_security_config"   
 >

Hopefully that fixes it for you.

Just as a side note, perhaps think of moving to HTTPS, then you won't have to do this!