CODEWITHSUNDEEP
imagefirebaseurlreact-nativestorage
dan89farhan
dan89farhan

Reputation: 51

Attemp to invoke interface method java.lang.String com.facebook.react.bridge.ReadableMap etc on a null object reference

I'm getting this error after uploading image to firebase storage. I am using "react-native": "0.55.4", "react-native-fetch-blob": "^0.10.8", "react-native-image-picker": "^0.26.10", "firebase": "^5.0.4",

this is my code for uploading the image.

// Prepare Blob support
const Blob = RNFetchBlob.polyfill.Blob;

const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;

uploadImage = (uri, imageName, mime = "image/jpg") => {
    return new Promise((resolve, reject) => {
      const uploadUri =
        Platform.OS === "ios" ? uri.replace("file://", "") : uri;
      let uploadBlob = null;
      const imageRef = db
        .storage()
        .ref("images/")
        .child(imageName);

  fs.readFile(uploadUri, "base64")
    .then(data => {
      return Blob.build(data, { type: `${mime};BASE64` });
    })
    .then(blob => {
      uploadBlob = blob;
      alert("blob is " + JSON.stringify(blob));
      return imageRef.put(blob, { contentType: mime });
    })
    .then(() => {
      uploadBlob.close();
      return imageRef.getDownloadURL();
    })
    .then(url => {
      resolve(url);
    })
    .catch(error => {
      reject(error);
    });
});};

Attempt to invoke interface method 'java.lang.String com.facebook.react.bridge.ReadableMap.getString(java.lang.String)' on a null object reference readAsText FileReaderModule.java:43 invoke Method.java invoke JavaMethodWrapper.java:372 invoke JavaModuleWrapper.java:160 run NativeRunnable.java handleCallback Handler.java:790 dispatchMessage Handler.java:99 dispatchMessage MessageQueueThreadHandler.java:29 loop Looper.java:164 run MessageQueueThreadImpl.java:192 run Thread.java:764

Upvotes: 5

Views: 13739

Answers (3)

Salem_Raouf
Salem_Raouf

Reputation: 431

I have solved this by removing all this package because error still appearing even with fetch replacement I think Is triggered by window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest; so I have used the old fashion

const uriToBlob = (uri) => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function () {
            resolve(xhr.response);
        };

        xhr.onerror = function () {
            reject(new Error('uriToBlob failed'));
        };
        xhr.responseType = 'blob';
        xhr.open('GET', uri, true);

        xhr.send(null);
    });
}

Upvotes: 0

Edgar Bonilla
Edgar Bonilla

Reputation: 213

I faced the same error. The solution is to do a 'Fetch replacement' as the official documentation explains:

Since we are not implementing FileReader polyfill, you might run into this error in some cases.

If you're facing this problem with Blob polyfill in Debug Mode, try replace window.fetch with fetch replacement should fix it.

And:

If you have existing code that uses whatwg-fetch, now you don't have to change existing code after 0.9.0, just use fetch replacement. The difference between Official fetch and fetch replacement is that, official fetch uses WHATWG-fetch js library which wraps XMLHttpRequest polyfill under the hood, and our implementation simply wraps RNFetchBlob.fetch.

Basically, you just have to add this to your code, just below your window.Blob = Blob; line:

const Fetch = RNFetchBlob.polyfill.Fetch
// replace built-in fetch
window.fetch = new Fetch({
    // enable this option so that the response data conversion handled automatically
    auto : true,
    // when receiving response data, the module will match its Content-Type header
    // with strings in this array. If it contains any one of string in this array, 
    // the response body will be considered as binary data and the data will be stored
    // in file system instead of in memory.
    // By default, it only store response data to file system when Content-Type 
    // contains string `application/octet`.
    binaryContentTypes : [
        'image/',
        'video/',
        'audio/',
        'foo/',
    ]
}).build()

Documentation: https://github.com/wkh237/react-native-fetch-blob/wiki/Trouble-Shooting#failed-to-execute-readastext-on-filereader

Upvotes: 8

Cory McAboy
Cory McAboy

Reputation: 332

I am running into the same problem. It has something to do with the prep statements:

const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;

The error does not occur if I comment them out.

Upvotes: 0

Related Questions