|
@@ -2,15 +2,15 @@
|
2
|
2
|
[![release](https://img.shields.io/github/release/wkh237/react-native-fetch-blob.svg?style=flat-square)](https://github.com/wkh237/react-native-fetch-blob/releases) [![npm](https://img.shields.io/npm/v/react-native-fetch-blob.svg?style=flat-square)](https://www.npmjs.com/package/react-native-fetch-blob) ![](https://img.shields.io/badge/PR-Welcome-brightgreen.svg?style=flat-square) [![](https://img.shields.io/badge/Wiki-Public-brightgreen.svg?style=flat-square)](https://github.com/wkh237/react-native-fetch-blob/wiki) [![npm](https://img.shields.io/npm/l/react-native-fetch-blob.svg?maxAge=2592000&style=flat-square)]()
|
3
|
3
|
|
4
|
4
|
|
5
|
|
-A project committed to make file access and data transfer easier, efficient for React Native developers.
|
|
5
|
+A project committed to making file access and data transfer easier, efficient for React Native developers.
|
6
|
6
|
|
7
|
|
-> If you're going to use GitHub repo as npm dependency please visit the [archive repository](https://github.com/wkh237/react-native-fetch-blob-package/releases/tag/v0.9.6).
|
|
7
|
+> If you're going to use GitHub repo as npm dependency, please visit the [archive repository](https://github.com/wkh237/react-native-fetch-blob-package/releases/tag/v0.9.6).
|
8
|
8
|
|
9
|
9
|
> For Firebase Storage solution, please upgrade to latest version for best compatibility.
|
10
|
10
|
|
11
|
11
|
## Features
|
12
|
12
|
- Transfer data directly from/to storage without BASE64 bridging
|
13
|
|
-- File API supports normal files, Asset files, and CameraRoll files
|
|
13
|
+- File API supports regular files, Asset files, and CameraRoll files
|
14
|
14
|
- Native-to-native file manipulation API, reduce JS bridging performance loss
|
15
|
15
|
- File stream support for dealing with large file
|
16
|
16
|
- Blob, File, XMLHttpRequest polyfills that make browser-based library available in RN (experimental)
|
|
@@ -88,11 +88,11 @@ pre 0.29 projects
|
88
|
88
|
RNFB_ANDROID_PERMISSIONS=true rnpm link
|
89
|
89
|
```
|
90
|
90
|
|
91
|
|
-The link script might not take effect if you have non-default project structure, please visit [the wiki](https://github.com/wkh237/react-native-fetch-blob/wiki/Manually-Link-Package) to manually link the package.
|
|
91
|
+The link script might not take effect if you have non-default project structure, please visit [the wiki](https://github.com/wkh237/react-native-fetch-blob/wiki/Manually-Link-Package) to link the package manually.
|
92
|
92
|
|
93
|
93
|
**Grant Permission to External storage for Android 5.0 or lower**
|
94
|
94
|
|
95
|
|
-Mechanism for granting Android permissions has slightly different since Android 6.0 released, please refer to [Official Document](https://developer.android.com/training/permissions/requesting.html).
|
|
95
|
+The mechanism for granting Android permissions has slightly different since Android 6.0 released, please refer to [Official Document](https://developer.android.com/training/permissions/requesting.html).
|
96
|
96
|
|
97
|
97
|
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`.
|
98
|
98
|
|
|
@@ -237,7 +237,7 @@ RNFetchBlob
|
237
|
237
|
|
238
|
238
|
**Use Specific File Path**
|
239
|
239
|
|
240
|
|
-If you prefer a specific path rather than randomly generated one, you can use `path` option. We've added [several constants](#user-content-dirs) in v0.5.0 which represents commonly used directories.
|
|
240
|
+If you prefer a particular file path rather than randomly generated one, you can use `path` option. We've added [several constants](#user-content-dirs) in v0.5.0 which represents commonly used directories.
|
241
|
241
|
|
242
|
242
|
```js
|
243
|
243
|
let dirs = RNFetchBlob.fs.dirs
|
|
@@ -259,7 +259,7 @@ RNFetchBlob
|
259
|
259
|
|
260
|
260
|
#### Upload example : Dropbox [files-upload](https://www.dropbox.com/developers/documentation/http/documentation#files-upload) API
|
261
|
261
|
|
262
|
|
-`react-native-fetch-blob` will convert the base64 string in `body` to binary format using native API, this process will be done in a separated thread, so it won't block your GUI.
|
|
262
|
+`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.
|
263
|
263
|
|
264
|
264
|
```js
|
265
|
265
|
|
|
@@ -406,7 +406,7 @@ In `version >= 0.4.2` it is possible to know the upload/download progress. After
|
406
|
406
|
})
|
407
|
407
|
```
|
408
|
408
|
|
409
|
|
-In `0.9.6`, you can specify an object as the first argument which contains `count` and `interval`, to the frequency of progress event (this will be done in the native context a reduce RCT bridge overhead). Notice that `count` argument will not work if the server does not provide response content length.
|
|
409
|
+In `0.9.6`, you can specify an object as the first argument which contains `count` and `interval`, to the frequency of progress event (this will be done in the native context a reduce RCT bridge overhead). Notice that `count` argument will not work if the server does not provide response content length.
|
410
|
410
|
|
411
|
411
|
|
412
|
412
|
```js
|
|
@@ -432,7 +432,7 @@ In `0.9.6`, you can specify an object as the first argument which contains `coun
|
432
|
432
|
|
433
|
433
|
### Cancel Request
|
434
|
434
|
|
435
|
|
-After `0.7.0` it is possible to cancel an HTTP request. When the request is canceled, it will throw a promise rejection, be sure to catch it.
|
|
435
|
+After `0.7.0` it is possible to cancel an HTTP request. Upon cancellation, it throws a promise rejection, be sure to catch it.
|
436
|
436
|
|
437
|
437
|
```js
|
438
|
438
|
let task = RNFetchBlob.fetch('GET', 'http://example.com/file/1')
|
|
@@ -461,7 +461,7 @@ If you want to make a file in `External Storage` becomes visible in Picture, Dow
|
461
|
461
|
|
462
|
462
|
**Media Scanner**
|
463
|
463
|
|
464
|
|
-Media scanner scans the file and categorize by given MIME type, if MIME type not specified, it will try to resolve the file using its file extension.
|
|
464
|
+Media scanner scans the file and categorizes by given MIME type, if MIME type not specified, it will try to resolve the file using its file extension.
|
465
|
465
|
|
466
|
466
|
```js
|
467
|
467
|
|
|
@@ -482,7 +482,7 @@ RNFetchBlob
|
482
|
482
|
|
483
|
483
|
**Download Manager**
|
484
|
484
|
|
485
|
|
-When downloading large files on Android it is recommended to use `Download Manager`, it supports a lot of native features like the progress bar, and notification, also the download task will be handled by OS, and more effective.
|
|
485
|
+When downloading large files on Android it is recommended to use `Download Manager`, it supports a lot of native features like the progress bar, and notification, also the download task will be handled by OS, and more efficient.
|
486
|
486
|
|
487
|
487
|
<img src="img/download-manager.png" width="256">
|
488
|
488
|
|
|
@@ -515,7 +515,7 @@ RNFetchBlob
|
515
|
515
|
<img src="img/android-notification2.png" width="256">
|
516
|
516
|
|
517
|
517
|
|
518
|
|
-If you want to display a notification when the file is completely download to storage (as the above) or make the downloaded file visible in "Downloads" app. You have to add some options to `config`.
|
|
518
|
+If you need to display a notification upon the file is downloaded to storage (as the above) or make the downloaded file visible in "Downloads" app. You have to add some options to `config`.
|
519
|
519
|
|
520
|
520
|
```js
|
521
|
521
|
RNFetchBlob.config({
|
|
@@ -539,7 +539,7 @@ RNFetchBlob.config({
|
539
|
539
|
|
540
|
540
|
**Open Downloaded File with Intent**
|
541
|
541
|
|
542
|
|
-This is a new feature added in `0.9.0` if you're going to open a file path using official [Linking](https://facebook.github.io/react-native/docs/linking.html) API that might not work as expected, also, if you're going to install an APK in `Downloads` app, that will not work too. As an alternative, you can try `actionViewIntent` API, which will send an ACTION_VIEW intent for you which uses the given `MIME` type.
|
|
542
|
+This is a new feature added in `0.9.0` if you're going to open a file path using official [Linking](https://facebook.github.io/react-native/docs/linking.html) API that might not work as expected, also, if you're going to install an APK in `Downloads` app, that will not function too. As an alternative, you can try `actionViewIntent` API, which will send an ACTION_VIEW intent for you which uses the given `MIME` type.
|
543
|
543
|
|
544
|
544
|
Download and install an APK programmatically
|
545
|
545
|
|
|
@@ -573,7 +573,7 @@ Or show an image in image viewer
|
573
|
573
|
|
574
|
574
|
### File Access
|
575
|
575
|
|
576
|
|
-File access APIs were made when developing `v0.5.0`, which helping us write tests, and was not planned to be a part of this module. However, we realized that it's hard to find a great solution to manage cached files, everyone who uses this module may need these APIs for there cases.
|
|
576
|
+File access APIs were made when developing `v0.5.0`, which helping us write tests, and was not planned to be a part of this module. However, we realized that it's hard to find a great solution to manage cached files, everyone who uses this module may need these APIs for their cases.
|
577
|
577
|
|
578
|
578
|
Before start using file APIs, we recommend read [Differences between File Source](https://github.com/wkh237/react-native-fetch-blob/wiki/File-System-Access-API#differences-between-file-source) first.
|
579
|
579
|
|
|
@@ -601,7 +601,7 @@ See [File API](https://github.com/wkh237/react-native-fetch-blob/wiki/File-Syste
|
601
|
601
|
|
602
|
602
|
### File Stream
|
603
|
603
|
|
604
|
|
-In `v0.5.0` we've added `writeStream` and `readStream`, which allows your app read/write data from the file path. This API creates a file stream, rather than convert whole data into BASE64 encoded string, it's handy when processing **large files**.
|
|
604
|
+In `v0.5.0` we've added `writeStream` and `readStream`, which allows your app read/write data from the file path. This API creates a file stream, rather than convert entire data into BASE64 encoded string. It's handy when processing **large files**.
|
605
|
605
|
|
606
|
606
|
When calling `readStream` method, you have to `open` the stream, and start to read data. When the file is large, consider using an appropriate `bufferSize` and `interval` to reduce the native event dispatching overhead (see [Performance Tips](#user-content-performance-tips))
|
607
|
607
|
|
|
@@ -631,7 +631,7 @@ RNFetchBlob.fs.readStream(
|
631
|
631
|
})
|
632
|
632
|
```
|
633
|
633
|
|
634
|
|
-When using `writeStream`, the stream is also opened immediately, but you have to `write`, and `close` by yourself.
|
|
634
|
+When using `writeStream`, the stream object becomes writable, and you can then perform operations like `write` and `close`.
|
635
|
635
|
|
636
|
636
|
```js
|
637
|
637
|
RNFetchBlob.fs.writeStream(
|
|
@@ -715,7 +715,7 @@ RNFetchBlob.fetch('POST', 'http://example.com/upload', { 'Transfer-Encoding' : '
|
715
|
715
|
|
716
|
716
|
### Self-Signed SSL Server
|
717
|
717
|
|
718
|
|
-By default, react-native-fetch-blob does NOT allow connection to unknown certification provider since it's dangerous. If you're going to connect a server with self-signed certification, add `trusty` to `config`. This function is available for version >= `0.5.3`
|
|
718
|
+By default, react-native-fetch-blob does NOT allow connection to unknown certification provider since it's dangerous. To connect a server with self-signed certification, you need to add `trusty` to `config` explicitly. This function is available for version >= `0.5.3`
|
719
|
719
|
|
720
|
720
|
```js
|
721
|
721
|
RNFetchBlob.config({
|
|
@@ -740,11 +740,11 @@ Here's a [sample app](https://github.com/wkh237/rn-firebase-storage-upload-sampl
|
740
|
740
|
|
741
|
741
|
**Read Stream and Progress Event Overhead**
|
742
|
742
|
|
743
|
|
-When reading data via `fs.readStream` the process seems to block JS thread when file is large, it's because the default buffer size is quite small (4kb) which result in large amount of events triggered in JS thread, try to increase the buffer size (for example 100kb = 102400) and set a larger interval (which is introduced in 0.9.4 default value is 10ms) to limit the frequency.
|
|
743
|
+If the process seems to block JS thread when file is large when reading data via `fs.readStream`. It might because the default buffer size is quite small (4kb) which result in a lot of events triggered from JS thread. Try to increase the buffer size (for example 100kb = 102400) and set a larger interval (available for 0.9.4+, the default value is 10ms) to limit the frequency.
|
744
|
744
|
|
745
|
745
|
**Reduce RCT Bridge and BASE64 Overhead**
|
746
|
746
|
|
747
|
|
-React Native connects JS and Native context by passing JSON around React Native bridge, and there will be an overhead to convert data before they sent to each side. When data is large, this will be quite a performance impact to your app, it's recommended to use file storage instead of BASE64 if possible.The following chart shows how much faster when loading data from storage than BASE64 encoded string on iPhone 6.
|
|
747
|
+React Native connects JS and Native context by passing JSON around React Native bridge, and there will be an overhead to convert data before they sent to each side. When data is large, this will be quite a performance impact to your app. It's recommended to use file storage instead of BASE64 if possible.The following chart shows how much faster when loading data from storage than BASE64 encoded string on iPhone 6.
|
748
|
748
|
|
749
|
749
|
<img src="img/performance_1.png" style="width : 100%"/>
|
750
|
750
|
|
|
@@ -754,9 +754,9 @@ Due to the [lack of typed array implementation in JavascriptCore, and limitation
|
754
|
754
|
|
755
|
755
|
<img src="img/performance_encoding.png" style="width : 100%"/>
|
756
|
756
|
|
757
|
|
-**Concate and Replacing Files**
|
|
757
|
+**Concat and Replacing Files**
|
758
|
758
|
|
759
|
|
-If you're going to concatenate files, you don't have to read the data to JS context anymore! In `0.8.0` we introduced new encoding `uri` for writeFile and appendFile API. Which make it possible to done the whole process in native.
|
|
759
|
+If you're going to concatenate files, you don't have to read the data to JS context anymore! In `0.8.0` we introduced new encoding `uri` for writeFile and appendFile API, which make it possible to handle the whole process in native.
|
760
|
760
|
|
761
|
761
|
<img src="img/performance_f2f.png" style="width : 100%"/>
|
762
|
762
|
|
|
@@ -768,7 +768,7 @@ If you're going to concatenate files, you don't have to read the data to JS cont
|
768
|
768
|
* When file stream and upload/download progress event slow down your app, consider an upgrade to `0.9.6+`, use [additional arguments](https://github.com/wkh237/react-native-fetch-blob/wiki/Fetch-API#fetchprogressconfig-eventlistenerpromisernfetchblobresponse) to limit its frequency.
|
769
|
769
|
* When passing a file path to the library, remove `file://` prefix.
|
770
|
770
|
|
771
|
|
-when you got problem, have a look at [Trouble Shooting](https://github.com/wkh237/react-native-fetch-blob/wiki/Trouble-Shooting) or [issues labeled Trouble Shooting](https://github.com/wkh237/react-native-fetch-blob/issues?utf8=✓&q=label:%22trouble%20shooting%22%20), there'd be some helpful information.
|
|
771
|
+when you got a problem, have a look at [Trouble Shooting](https://github.com/wkh237/react-native-fetch-blob/wiki/Trouble-Shooting) or [issues labeled Trouble Shooting](https://github.com/wkh237/react-native-fetch-blob/issues?utf8=✓&q=label:%22trouble%20shooting%22%20), there'd be some helpful information.
|
772
|
772
|
|
773
|
773
|
## Changes
|
774
|
774
|
|