Trouble Shooting - wkh237/react-native-fetch-blob GitHub Wiki

Index

How to remove files from Android's default apps?

When a file is downloaded by Android Download Manager or scanned by fs.scanFile, it will be added to Android's Media Content Database so that it becomes visible in default apps (for example, Downloads and Gallery).

Upon removing the file, you have to apply fs.scanFile again on the file's path after deleting it, otherwise, the user will still see the file in those apps but unable to interact with them.

Failed to execute 'readAsText' on 'FileReader'

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.

version 0.7.0+ does not work with react-native 0.27 (Android)

On 0.7.5, we have fixed Android OkHttp dependency issue on pre 0.28 projects excepted 0.27, 0.29.0, and 0.29.1. For 0.29.0 and 0.29.1 it's because rnpm link is broken in these versions, you may need to manually link Android package. It is recommended to upgrade you project if possible

$ react-native upgrade

After the project upgraded, run rnpm link again.

App crash on start (Android)

This might because rnpm added multiple new RNFetchBlobPacket() to your MainApplication.java, the error message may looks like

java.lang.RuntimeException: Unable to start activity ComponentInfo ...

Try to remove duplicated new RNFetchBlobPacket() in MainApplication.java

RNFetchBlob.fetch is not a function

source #58

This usually means that you're using ES5, you use require('react-native-fetch-blob') instead of import RNFetchBlob from 'react-native-fetch-blob'. There's a very very good explanation on StackOverflow

The issue is you are using ES5 style require statements with a library written against ES6/ES2015. You have two options:

ES5:

var RNFetchBlob = require('react-native-fetch-blob').default

ES6:

import RNFetchBlob from 'react-native-fetch-blob'

by rmevans9@StackOverflow

Unknown type name 'namespace' (IOS)

This usually happens when the RNFetchBlob deployment target version is incorrect, it is fixed in 0.7.1, you may upgrade your package to 0.7.1 or manually fix it by following steps

Open .xcodeproj of your app and open the Libraries folder in left side tree view

Find project -> RNFetchBlob, click on it

Change the deployment target to 8.0

Rebuild the project again

Could not send any HTTP request except localhost (IOS)

reference from official document

App Transport Security is a security feature, added in iOS 9, that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server.

ATS is disabled by default in projects generated using the React Native CLI in order to make development easier. You should re-enable ATS prior to building your app for production by removing the NSAllowsArbitraryLoads entry from your Info.plist file in the ios/ folder.

To learn more about how to configure ATS on your own Xcode projects, see this post on ATS.

Could not compile on IOS

If you're having problem when compiling IOS project, and the error looks like

ARC forbids synthesizing a property of an Objective-C ..

You should try to upgrade Xcode to version >= 7.3 or upgrade react-native-fetch-blob to latest version, because we have already solved this problem.

see also #31

Undefined is not an object (evaluating 'RNFetchBlob.DocumentDir')

Error messages like XXX is undefined, could not found RNFetchBlob ... usually because the package does not properly installed, there're some closed issues about installation problems #51, #12, #30

How to access files from assets

After 0.6.2 you can access files inside app bundle by simply adding the prefix bundle-assets:// before the filename. You can also wrap the filename by fs.asset API. For example, upload a file from assets


RNFetchBlob
    .fetch('POST', 'http://myupload.com/upload', 
           { 'Content-Type' : 'application/octet-stream' },
           RNFetchBlob.wrap(RNFetchBlob.fs.asset('my-asset.png')))
    .then((resp) => { ... })

Generally you can access the file as usual once you wrap the file name by fs.asset, but keep in mind, assets files are readonly, so you are not be able to remove, or change them.

On Android, files should be placed in the android/app/src/main/assets/ folder or a subfolder of this directory. The asset file must not be compressed in the APK. If the file type is not one automatically excluded from compression by aapt, the extension type can be added to the aaptOptions in build.gradle as such:

    aaptOptions {
        noCompress "txt", "json"
    }

The compression state of the file in the APK can be verified by running

unzip -lv {app.apk}

The column method should indicate no compression.

fs.readStream is freezing JS thread

By default, readStream uses a very small buffer (4kb), when the file is large, the onData events will likely becomes heavy overhead to JS thread, the solution is increase the bufferSize to reduce the amount of event, but keep in mind if the buffer size is too large (greater than heap limit), it will crash the app. For more discussion see #118.

Firebase login and other API calls no response after replace the XMLHttpRequest

This is caused by incorrect implementation in XMLHttpRequest polyfill, we've fixed this issue in 0.9.6-beta.2, it should be fixed after you upgrade the package.

How to remove files created by Download Manager ? (Android)

For the files downloaded by Download Manager, you will need to set the destination explicitly for ensuring the file will be created in an accessible location.

RNFetchBlob.config({
    addAndroidDownloads : {
      useDownloadManager : true,
      title : new Date().toLocaleString() + ' - #236 test.png',
      // download manager will use this location instead.
      // keep in mind this `path` should be somewhere on external storage (like SDCardDir or DCIMDir)
      path : RNFetchBlob.fs.dirs.DCIMDir
    }
  })
  .fetch('GET', `${TEST_SERVER_URL}/public/github.png`)