androidreact-nativefetchmultipath

network request failed react native on https image upload Android


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());