Скачать или смотреть How to Fix Network Request Failed Error in React Native Expo when Using HTTP Server

Learn how to resolve the `Network Request Failed` error in React Native and Expo applications when trying to upload images to HTTP servers. Follow our step-by-step guide for a smooth experience.
---
This video is based on the question https://stackoverflow.com/q/77090627/ asked by the user 'GeorgeMet' ( https://stackoverflow.com/u/19624526/ ) and on the answer https://stackoverflow.com/a/77172944/ provided by the user 'GeorgeMet' ( https://stackoverflow.com/u/19624526/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: React Native + Expo + Android + HTTP Server = Network request failed

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the Network Request Failed Error

If you've been working with React Native and Expo, you may have encountered the frustrating Network Request Failed error, especially when trying to upload images to a remote HTTP server that does not use HTTPS. In this guide, we'll explore the reasons behind this issue and provide a clear, step-by-step solution.

The Problem

When you're attempting to upload an image to a remote server using the fetch API within an Expo application on Android, you may run into issues due to the restrictions on cleartext traffic (HTTP, as opposed to HTTPS). The error often appears as:

[[See Video to Reveal this Text or Code Snippet]]

Key Points

You are using Expo for React Native development.

You are calling an HTTP (not HTTPS) server to upload an image.

The configuration options for typical React Native apps don’t apply directly in Expo since it handles certain aspects internally.

The Solution: Allowing Cleartext Traffic in Expo

Expo provides a way to customize your app's configuration without needing to directly interact with native files like AndroidManifest.xml. Here's how to enable cleartext traffic:

Step 1: Install the Required Library

Start by installing the expo-build-properties library. This library allows you to customize build properties in an Expo application.

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Update Your app.json

Once you have installed the expo-build-properties library, you need to modify your app.json file to permit cleartext traffic. Locate the plugins section and add expo-build-properties with the appropriate configuration. Your app.json should include something like this:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Rebuild Your Project

After making these changes, it’s necessary to rebuild your project for the configurations to take effect. You can do this by running:

[[See Video to Reveal this Text or Code Snippet]]

This command clears the cache and starts the development server with your new settings.

Recap of HTTP Image Upload Implementation

In the initial setup for your fetch request, you would typically have something like this:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following the steps outlined above, you should be able to successfully configure your React Native Expo application to send image uploads to a non-HTTPS HTTP server without encountering the Network Request Failed error. Remember to always check for updates in your libraries and configurations as your app evolves.

If you need further assistance, the community forums and documentation are always great resources for troubleshooting and learning best practices.

Feel free to share your experience or any additional solutions you might have found helpful in the comments below!