React-Native (Android only) - TypeError: Network request failed

Question

I use React Native and I want to fetch data from my API. My API is hosted externally. My API is made using ExpressJS.

To make HTTP requests (GET and POST requests) the React Native Fetch is implemented

The error TypeError: Network request failed is thrown whenever trying to call the API (GET or POST, I don't use PUT or others).

The error does not occur in the following environments:

1. Android (local development, using Expo Go)
2. iOS (local development, using Expo Go)
3. iOS (published on the app store)

The error only occurs in the production app, which is visible in the Google Play Store.

I use Sentry to log any errors that occur on the client side.

In here the error is visible. Screenshot of error in Sentry

Inside of my API server I use a function to write errors to a log file.

Some of the customers of our company had contact us regarding this issue.

My following attempts did not solve the issue:

• Restart the API service.
• Remove app.use(cors()); from my Express file of where the Express app is created.
• Try to call one of my other API endpoints.
• View the error logs in my server side. -> The endpoint never seems to be called.
• Installed the app on BlueStacks to see if the error also occurs there -> Yes, error occurs here.
• Ask my co-worker for his Android phone to test the app to see if the error occurs there -> Yes, error occurs here.
• Validate the correct version is published in the Google Play Store. -> Yes, version is correct.
• Try to publish a new version with the same code. -> Did not resolve the issue.
• Search Google to find a possible fix.

Answer 1

Most probably you are using Content-Type", "application/x-www-form-urlencoded in the request headers due to the API that you created in Express.

So you must have used something like this to call that API from your react-native app

const formData = new FormData();
formData.append('username',username);
formData.append('password',password);

fetch('https://some-remote-url/login', {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  body: formData
})

and that above code is not working in android, but working fine in iOS.

To fix that just get rid of FormData, and update your code as following

const _body = `username=${username}&password=${password}

fetch('https://some-remote-url/login', {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  body: _body
})