React Native android app throws Network Error when upload on App store

Question

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:"[email protected]",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

Are you trying to access via http?

JRK
– JRK

2019-07-19 12:11:50 +00:00
Commented Jul 19, 2019 at 12:11 — JRK
– JRK, Commented Jul 19, 2019 at 12:11
yes ...I am using an http server. @JRK

Naveed Khan
– Naveed Khan

2019-07-19 13:00:07 +00:00
Commented Jul 19, 2019 at 13:00 — Naveed Khan
– Naveed Khan, Commented Jul 19, 2019 at 13:00

JRK · Accepted Answer · 2019-07-19 13:16:58Z

3

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!

answered Jul 19, 2019 at 13:16

JRK

3,9741 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Naveed Khan Over a year ago

Thanks so much for the detail answer yes I will move to https in near future. Other than that your code example saved my life right now because when i created the apk before adding your code the apk was throwing network error on my Android device now i add the changes and generated the apk again . The app is working perfectly fine on my android device. Now i have published the app on store and waiting for the approval. After that i will test the app again. Hoepfully it will work and if its not i will let you know again :)

Naveed Khan Over a year ago

Yes I mamk your answer correct. It worked . thanks so much

JRK Over a year ago

@NaveedKhan - you'll need to accept the answer I gave.

AMAL MOHAN N Over a year ago

@JRK I'm using hosted https server and still getting this issue. should I try cleartextTrafficPermitted?

Collectives™ on Stack Overflow

React Native android app throws Network Error when upload on App store

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related