[SOLVED] network request failed react native on https image upload Android


This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under
CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

Issue

I am trying to upload image through fetch api but getting Network request failed error on real device android. I also tried lots of lots of suggestion from google but nothing worked for me.

my dependencies are:

"react-native": "0.62.0",
"axios": "^0.19.2",
"form-data": "^3.0.0",
"react": "16.11.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"

my snippets for image uploading:


const imagePick = () => {
          const formData = new FormData();

        try {

            const options = {
                title: 'Select Avatar',
                storageOptions: {
                  skipBackup: true,
                  path: 'images',
                },
              };

            ImagePicker.showImagePicker(options, (response) => {

                formData.append('avatar', {
                    uri: response.uri,
                   type: response.type, 
                   name: response.fileName,
                 })

                fetch(url, { 
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'multipart/form-data',
                        'Authorization': `Bearer ${authToken}`
                    },
                    body: formData
                })
                .then(res => {
                    console.log(res.status)
                })
                .catch(e => {
                    console.log(e)
                })

            });

        } catch (e) {
            toast("Unable to upload profile photo")
        }
      }

I am also using secure https url;

Solution

I was also facing the same issue but I guess this issue isn’t related to axios library, instead it is because of the React Native itself.

As mentioned here, comment, it is because of Flipper.

So till the time React Native works upon it, you can comment below mentioned line from MainApplication.java

initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

To comment, put // in front of above line

//initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

Answered By – NMahendroo

people found this article helpful. What about you?