A project committed to making file access and data transfer easier, efficient for React Native developers.
A project committed to making file access and data transfer easier, efficient for React Native developers.
This repository no longer is the main location of "react-native-fetch-blob".
The owners of this fork have agreed to maintain this package:
https://github.com/joltup/rn-fetch-blob
That means issues and PRs should be posted there.
A project committed to making file access and data transfer easier and more efficient for React Native developers.
For Firebase Storage solution, please upgrade to the latest version for the best compatibility.
This project was started in the cause of solving issue facebook/react-native#854, React Native's lacks of Blob implementation which results into problems when transferring binary data.
It is committed to making file access and transfer easier and more efficient for React Native developers. We've implemented highly customizable filesystem and network module which plays well together. For example, developers can upload and download data directly from/to storage, which is more efficient, especially for large files. The file system supports file stream, so you don't have to worry about OOM problem when accessing large files.
In 0.8.0 we introduced experimental Web API polyfills that make it possible to use browser-based libraries in React Native, such as, FireBase JS SDK
Install package from npm
npm install --save react-native-fetch-blob
Or if using CocoaPods, add the pod to your Podfile
pod 'react-native-fetch-blob',
:path => '../node_modules/react-native-fetch-blob'
After 0.10.3 you can install this package directly from Github
# replace <branch_name> with any one of the branches
npm install --save github:wkh237/react-native-fetch-blob-package#<branch_name>
Automatically Link Native Modules
For 0.29.2+ projects, simply link native packages via the following command (note: rnpm has been merged into react-native)
react-native link
As for projects < 0.29 you need rnpm to link native packages
rnpm link
Optionally, use the following command to add Android permissions to AndroidManifest.xml automatically
RNFB_ANDROID_PERMISSIONS=true react-native link
pre 0.29 projects
RNFB_ANDROID_PERMISSIONS=true rnpm link
The link script might not take effect if you have non-default project structure, please visit the wiki to link the package manually.
Grant Permission to External storage for Android 5.0 or lower
The mechanism for granting Android permissions has slightly different since Android 6.0 released, please refer to Official Document.
If you're going to access external storage (say, SD card storage) for Android 5.0 (or lower) devices, you might have to add the following line to AndroidManifest.xml.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rnfetchblobtest"
android:versionCode="1"
android:versionName="1.0">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+ <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+ <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
...
Also, if you're going to use Android Download Manager you have to add this to AndroidManifest.xml
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
+ <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
</intent-filter>
Grant Access Permission for Android 6.0
Beginning in Android 6.0 (API level 23), users grant permissions to apps while the app is running, not when they install the app. So adding permissions in AndroidManifest.xml won't work for Android 6.0+ devices. To grant permissions in runtime, you might use PermissionAndroid API.
ES6
The module uses ES6 style export statement, simply use import to load the module.
import RNFetchBlob from 'react-native-fetch-blob'
ES5
If you're using ES5 require statement to load the module, please add default. See here for more detail.
var RNFetchBlob = require('react-native-fetch-blob').default
After 0.8.0 react-native-fetch-blob automatically decides how to send the body by checking its type and Content-Type in the header. The rule is described in the following diagram
To sum up:
Content-Type header does not matter. When the body is an Array we will set proper content type for you.Content-Type containing substring;BASE64 or application/octet the given body will be considered as a BASE64 encoded data which will be decoded to binary data as the request body. RNFetchBlob-file:// (which can simply be done by RNFetchBlob.wrap(PATH_TO_THE_FILE)), it will try to find the data from the URI string after RNFetchBlob-file:// and use it as the request body.Content-Type header not containing ;BASE64 or application/octet.It is Worth to mentioning that the HTTP request uses cache by default, if you're going to disable it simply add a Cache-Control header
'Cache-Control' : 'no-store'
After 0.9.4, we disabled
Chunkedtransfer encoding by default, if you're going to use it, you should explicitly set headerTransfer-EncodingtoChunked.
Most simple way is download to memory and stored as BASE64 encoded string, this is handy when the response data is small.
// send http request in a new thread (using native code)
RNFetchBlob.fetch('GET', 'http://www.example.com/images/img1.png', {
Authorization : 'Bearer access-token...',
// more headers ..
})
// when response status code is 200
.then((res) => {
// the conversion is done in native code
let base64Str = res.base64()
// the following conversions are done in js, it's SYNC
let text = res.text()
let json = res.json()
})
// Status code is not 200
.catch((errorMessage, statusCode) => {
// error handling
})
If the response data is large, that would be a bad idea to convert it into BASE64 string. A better solution is streaming the response directly into a file, simply add a fileCache option to config, and set it to true. This will make incoming response data stored in a temporary path without any file extension.
These files won't be removed automatically, please refer to Cache File Management
RNFetchBlob
.config({
// add this option that makes response data to be stored as a file,
// this is much more performant.
fileCache : true,
})
.fetch('GET', 'http://www.example.com/file/example.zip', {
//some headers ..
})
.then((res) => {
// the temp file path
console.log('The file saved to ', res.path())
})
Set Temp File Extension
Sometimes you might need a file extension for some reason. For example, when using file path as the source of Image component, the path should end with something like .png or .jpg, you can do this by add appendExt option to config.
…
Use Specific File Path
If you prefer a particular file path rather than randomly generated one, you can use path option. We've added several constants in v0.5.0 which represents commonly used directories.
let dirs = RNFetchBlob.fs.dirs
RNFetchBlob
.config({
// response data will be saved to this path if it has access right.
path : dirs.DocumentDir + '/path-to-file.anything'
})
.fetch('GET', 'http://www.example.com/file/example.zip', {
//some headers ..
})
.then((res) => {
// the path should be dirs.DocumentDir + 'path-to-file.anything'
console.log('The file saved to ', res.path())
})
These files won't be removed automatically, please refer to Cache File Management
react-native-fetch-blob will convert the base64 string in body to binary format using native API, this process is done in a separated thread so that it won't block your GUI.
…
If you're going to use a file as request body, just wrap the path with wrap API.
…
In version >= 0.3.0 you can also post files with form data, just put an array in body, with elements have property name, data, and filename(optional).
Elements have property filename will be transformed into binary format, otherwise, it turns into utf8 string.
…
What if you want to append a file to form data? Just like upload a file from storage example, wrap data by wrap API (th
No open issues yet, or sync has not completed.