Replace rn-fetch-blob with react-native-fs based on CompanyCam#1 rn-fetch-blob does odd things like writing 404 responses to file which if for some reason aren't caught and deleted will cause the next request to return the cached 404 response, react-native-fs still returns a success response with 404 status but doesn't write the response to the destination.

Author: mnightingale

README.md

@@ -25,15 +25,15 @@ Or
 $ yarn add react-native-image-cache-hoc
 ```
 
-Then, because this package has a depedency on [rn-fetch-blob](https://github.com/joltup/rn-fetch-blob) you will need to link this native package by running:
+Then, because this package has a depedency on [react-native-fs](https://github.com/itinance/react-native-fs) you will need to link this native package by running:
 
 ```bash
-$ react-native link rn-fetch-blob
+$ react-native link react-native-fs
 ```
 
-Linking rn-fetch-blob **should only be done once**, reinstalling node_modules with npm or yarn does not require running the above command again.
+Linking react-native-fs **should only be done once**, reinstalling node_modules with npm or yarn does not require running the above command again.
 
-To troubleshoot linking, refer to [the rn-fetch-blob installation instructions](https://github.com/joltup/rn-fetch-blob#user-content-installation).
+To troubleshoot linking, refer to [the react-native-fs installation instructions](https://github.com/itinance/react-native-fs#usage-ios).
 
 ## Usage
 

package.json

@@ -70,6 +70,6 @@
     "validator": "^9.0.0"
   },
   "peerDependencies": {
-    "rn-fetch-blob": "^0.12.0"
+    "react-native-fs": "^2.14.1"
   }
 }

src/FileSystem.js

@@ -9,10 +9,23 @@
 
 import { Platform } from 'react-native';
 import pathLib from 'path';
-import RNFetchBlob from 'rn-fetch-blob';
+import RNFS from 'react-native-fs';
 import sha1 from 'crypto-js/sha1';
 import URL from 'url-parse';
 
+/**
+ * Resolves if 'unlink' resolves or if the file doesn't exist.
+ *
+ * @param {string} filename
+ */
+const RNFSUnlinkIfExists = (filename) =>
+  RNFS.exists(filename).then((exists) => {
+    if (exists) {
+      return RNFS.unlink(filename);
+    }
+    return Promise.resolve();
+  });
+
 export class FileSystem {
   /**
    * All FileSystem instances will reference the cacheLock singleton "dictionary" to provide cache file locking in order to prevent concurrency race condition bugs.
@@ -85,8 +98,7 @@ export class FileSystem {
    * @private
    */
   _setBaseFilePath(fileDirName = null) {
-    let baseFilePath =
-      this.os == 'ios' ? RNFetchBlob.fs.dirs.CacheDir : RNFetchBlob.fs.dirs.DocumentDir;
+    let baseFilePath = this.os == 'ios' ? RNFS.CachesDirectoryPath : RNFS.DocumentDirectoryPath;
     baseFilePath += '/' + fileDirName + '/';
     return baseFilePath;
   }
@@ -124,7 +136,7 @@ export class FileSystem {
    */
   exists(path) {
     this._validatePath(path);
-    return RNFetchBlob.fs.exists(pathLib.resolve(this.baseFilePath + path));
+    return RNFS.exists(pathLib.resolve(this.baseFilePath + path));
   }
 
   /**
@@ -192,7 +204,7 @@ export class FileSystem {
    */
   async fetchFile(url, permanent = false, fileName = null, clobber = false) {
     fileName = fileName || (await this.getFileNameFromUrl(url));
-    let path = this.baseFilePath + (permanent ? 'permanent' : 'cache') + '/' + fileName;
+    let path = this.baseFilePath + (permanent ? 'permanent/' : 'cache/') + fileName;
     this._validatePath(path, true);
 
     // Clobber logic
@@ -207,22 +219,30 @@ export class FileSystem {
     }
 
     // Hit network and download file to local disk.
-    let result = null;
     try {
-      result = await RNFetchBlob.config({
-        path: path,
-      }).fetch('GET', url);
+      const cacheDirExists = await this.exists(permanent ? 'permanent' : 'cache');
+      if (!cacheDirExists) {
+        await RNFS.mkdir(`${this.baseFilePath}${permanent ? 'permanent' : 'cache'}`);
+      }
+
+      const { promise } = RNFS.downloadFile({
+        fromUrl: url,
+        toFile: path,
+      });
+      const response = await promise;
+      if (response.statusCode !== 200) {
+        throw response;
+      }
     } catch (error) {
-      // File must be manually removed on download error https://github.com/wkh237/react-native-fetch-blob/issues/331
-      await RNFetchBlob.fs.unlink(path);
+      await RNFSUnlinkIfExists(path);
       return {
         path: null,
         fileName: pathLib.basename(path),
       };
     }
 
     return {
-      path: result.path(),
+      path,
       fileName: pathLib.basename(path),
     };
   }
@@ -240,15 +260,15 @@ export class FileSystem {
       return;
     }
 
-    // Get blobStatObjects.
-    let lstat = await RNFetchBlob.fs.lstat(this.baseFilePath + 'cache');
+    // Get directory contents
+    let dirContents = await RNFS.readDir(this.baseFilePath + 'cache');
 
-    // Sort blobStatObjects in order of oldest to newest file.
-    lstat.sort((a, b) => {
-      return a.lastModified - b.lastModified;
+    // Sort dirContents in order of oldest to newest file.
+    dirContents.sort((a, b) => {
+      return a.mtime - b.mtime;
     });
 
-    let currentCacheSize = lstat.reduce((cacheSize, blobStatObject) => {
+    let currentCacheSize = dirContents.reduce((cacheSize, blobStatObject) => {
       return cacheSize + parseInt(blobStatObject.size);
     }, 0);
 
@@ -258,16 +278,16 @@ export class FileSystem {
 
       // Keep deleting cached files so long as the current cache size is larger than the size required to trigger cache pruning, or until
       // all cache files have been evaluated.
-      while (overflowSize > 0 && lstat.length) {
-        let blobStatObject = lstat.shift();
+      while (overflowSize > 0 && dirContents.length) {
+        let contentFile = dirContents.shift();
 
         // Only prune unlocked files from cache
         if (
-          !FileSystem.cacheLock[blobStatObject.filename] &&
-          this._validatePath('cache/' + blobStatObject.filename)
+          !FileSystem.cacheLock[contentFile.name] &&
+          this._validatePath('cache/' + contentFile.name)
         ) {
-          overflowSize = overflowSize - parseInt(blobStatObject.size);
-          RNFetchBlob.fs.unlink(this.baseFilePath + 'cache/' + blobStatObject.filename);
+          overflowSize -= parseInt(contentFile.size);
+          RNFSUnlinkIfExists(this.baseFilePath + 'cache/' + contentFile.name);
         }
       }
     }
@@ -283,7 +303,7 @@ export class FileSystem {
     this._validatePath(path);
 
     try {
-      await RNFetchBlob.fs.unlink(pathLib.resolve(this.baseFilePath + path));
+      await RNFSUnlinkIfExists(pathLib.resolve(this.baseFilePath + path));
       return true;
     } catch (error) {
       return false;

tests/CacheableImage.test.js

@@ -8,7 +8,7 @@ import imageCacheHoc from '../src/imageCacheHoc';
 import { Image } from 'react-native';
 import sinon from 'sinon';
 import 'should-sinon';
-import RNFetchBlob from 'rn-fetch-blob';
+import RNFS from 'react-native-fs';
 import { shallow } from 'enzyme';
 import React from 'react';
 
@@ -98,13 +98,12 @@ describe('CacheableImage', function () {
 
   it('#cacheFile static method should work as expected for cache dir files.', () => {
     // Mock that file does not exist on local fs.
-    RNFetchBlob.fs.exists.mockResolvedValue(false);
+    RNFS.exists.mockResolvedValue(false);
 
     // Mock fetch result
-    RNFetchBlob.fetch.mockResolvedValue({
-      path: () => {
-        return '/this/is/path/to/file.jpg';
-      },
+
+    RNFS.downloadFile.mockReturnValue({
+      promise: Promise.resolve({ statusCode: 200 }),
     });
 
     const CacheableImage = imageCacheHoc(Image);
@@ -113,20 +112,19 @@ describe('CacheableImage', function () {
       result.should.deepEqual({
         url: 'https://i.redd.it/rc29s4bz61uz.png',
         cacheType: 'cache',
-        localFilePath: '/this/is/path/to/file.jpg',
+        localFilePath:
+          '/base/file/path/react-native-image-cache-hoc/cache/d3b74e9fa8248a5805e2dcf17a8577acd28c089b.png',
       });
     });
   });
 
   it('#cacheFile static method should work as expected for permanent dir files.', () => {
     // Mock that file does not exist on local fs.
-    RNFetchBlob.fs.exists.mockResolvedValue(false);
+    RNFS.exists.mockResolvedValue(false);
 
     // Mock fetch result
-    RNFetchBlob.fetch.mockResolvedValue({
-      path: () => {
-        return '/this/is/path/to/file.jpg';
-      },
+    RNFS.downloadFile.mockReturnValue({
+      promise: Promise.resolve({ statusCode: 200 }),
     });
 
     const CacheableImage = imageCacheHoc(Image);
@@ -135,14 +133,15 @@ describe('CacheableImage', function () {
       result.should.deepEqual({
         url: 'https://i.redd.it/rc29s4bz61uz.png',
         cacheType: 'permanent',
-        localFilePath: '/this/is/path/to/file.jpg',
+        localFilePath:
+          '/base/file/path/react-native-image-cache-hoc/permanent/d3b74e9fa8248a5805e2dcf17a8577acd28c089b.png',
       });
     });
   });
 
   it('#flush static method should work as expected.', () => {
     // Mock unlink to always be true.
-    RNFetchBlob.fs.unlink.mockResolvedValue(true);
+    RNFS.unlink.mockResolvedValue(true);
 
     const CacheableImage = imageCacheHoc(Image);
 
@@ -319,16 +318,12 @@ describe('CacheableImage', function () {
   });
 
   it('componentDidUpdate should not throw any uncaught errors.', (done) => {
-    RNFetchBlob.fetch
-      .mockResolvedValueOnce({
-        path: () => {
-          return 'A.jpg';
-        },
+    RNFS.downloadFile
+      .mockReturnValueOnce({
+        promise: Promise.resolve({ statusCode: 200 }),
       })
-      .mockResolvedValueOnce({
-        path: () => {
-          return 'B.jpg';
-        },
+      .mockReturnValueOnce({
+        promise: Promise.resolve({ statusCode: 200 }),
       });
 
     const CacheableImage = imageCacheHoc(Image);
@@ -337,14 +332,16 @@ describe('CacheableImage', function () {
 
     setImmediate(() => {
       expect(wrapper.prop('source')).toStrictEqual({
-        uri: 'A.jpg',
+        uri:
+          '/base/file/path/react-native-image-cache-hoc/cache/d3b74e9fa8248a5805e2dcf17a8577acd28c089b.png',
       });
 
       wrapper.setProps({ source: { uri: 'https://example.com/B.jpg' } });
 
       setImmediate(() => {
         expect(wrapper.prop('source')).toStrictEqual({
-          uri: 'B.jpg',
+          uri:
+            '/base/file/path/react-native-image-cache-hoc/cache/a940ee9ea388fcea7628d9a64dfac6a698aa0228.jpg',
         });
 
         done();
@@ -359,7 +356,8 @@ describe('CacheableImage', function () {
 
     setImmediate(() => {
       expect(wrapper.prop('source')).toStrictEqual({
-        uri: '/this/is/path/to/file.jpg',
+        uri:
+          '/base/file/path/react-native-image-cache-hoc/cache/d3b74e9fa8248a5805e2dcf17a8577acd28c089b.png',
       });
 
       wrapper.setState({ localFilePath: './test.jpg' });