Allow changing the cache root directory

CachedImage.js

@@ -46,15 +46,17 @@ const CachedImage = React.createClass({
             React.PropTypes.bool,
             React.PropTypes.array
         ]).isRequired,
-        resolveHeaders: React.PropTypes.func
+        resolveHeaders: React.PropTypes.func,
+        cacheLocation: React.PropTypes.oneOf(Object.values(ImageCacheProvider.LOCATION)).isRequired
     },
 
     getDefaultProps() {
         return {
             renderImage: props => (<Image ref={CACHED_IMAGE_REF} {...props}/>),
             activityIndicatorProps: {},
             useQueryParamsInCacheKey: false,
-            resolveHeaders: () => Promise.resolve({})
+            resolveHeaders: () => Promise.resolve({}),
+            cacheLocation: ImageCacheProvider.LOCATION.CACHE
         };
     },
 
@@ -116,7 +118,9 @@ const CachedImage = React.createClass({
     processSource(source) {
         const url = _.get(source, ['uri'], null);
         if (ImageCacheProvider.isCacheable(url)) {
-            const options = _.pick(this.props, ['useQueryParamsInCacheKey', 'cacheGroup']);
+            let options = _.pick(this.props, ['useQueryParamsInCacheKey', 'cacheGroup']);
+            options.cacheLocation = this.props.cacheLocation;
+
             // try to get the image path from cache
             ImageCacheProvider.getCachedImagePath(url, options)
                 // try to put the image in cache if

ImageCacheProvider.js

@@ -9,6 +9,12 @@ const {
 } = RNFetchBlob;
 
 const baseCacheDir = fs.dirs.CacheDir + '/imagesCacheDir';
+const baseBundleDir = fs.dirs.MainBundleDir + '/imagesCacheDir';
+
+const LOCATION = {
+    CACHE: 'cache',
+    BUNDLE: 'bundle'
+};
 
 const SHA1 = require("crypto-js/sha1");
 const URL = require('url-parse');
@@ -18,7 +24,8 @@ const defaultImageTypes = ['png', 'jpeg', 'jpg', 'gif', 'bmp', 'tiff', 'tif'];
 const defaultResolveHeaders = _.constant(defaultHeaders);
 
 const defaultOptions = {
-    useQueryParamsInCacheKey: false
+    useQueryParamsInCacheKey: false,
+    cacheLocation: LOCATION.CACHE
 };
 
 const activeDownloads = {};
@@ -58,6 +65,14 @@ function generateCacheKey(url, options) {
     return SHA1(cacheable) + '.' + type;
 }
 
+function getBaseDir(cacheLocation) {
+    switch (cacheLocation) {
+        case LOCATION.CACHE: return baseCacheDir;
+        case LOCATION.BUNDLE: return baseBundleDir;
+        default: return baseCacheDir;
+    }
+}
+
 function getCachePath(url, options) {
     if (options.cacheGroup) {
         return options.cacheGroup;
@@ -72,7 +87,7 @@ function getCachedImageFilePath(url, options) {
     const cachePath = getCachePath(url, options);
     const cacheKey = generateCacheKey(url, options);
 
-    return `${baseCacheDir}/${cachePath}/${cacheKey}`;
+    return `${getBaseDir(options.cacheLocation)}/${cachePath}/${cacheKey}`;
 }
 
 function deleteFile(filePath) {
@@ -300,23 +315,25 @@ function seedCache(local, url, options = defaultOptions) {
 
 /**
  * Clear the entire cache.
+ * @param cacheLocation
  * @returns {Promise}
  */
-function clearCache() {
-    return fs.unlink(baseCacheDir)
+function clearCache(cacheLocation) {
+    return fs.unlink(getBaseDir(cacheLocation))
         .catch(() => {
             // swallow exceptions if path doesn't exist
         })
-        .then(() => ensurePath(baseCacheDir));
+        .then(() => ensurePath(getBaseDir(cacheLocation)));
 }
 
 /**
  * Return info about the cache, list of files and the total size of the cache.
+ * @param cacheLocation
  * @returns {Promise.<{size}>}
  */
-function getCacheInfo() {
-    return ensurePath(baseCacheDir)
-        .then(() => collectFilesInfo(baseCacheDir))
+function getCacheInfo(cacheLocation) {
+    return ensurePath(getBaseDir(cacheLocation))
+        .then(() => collectFilesInfo(getBaseDir(cacheLocation)))
         .then(cache => {
             const files = _.flattenDeep(cache);
             const size = _.sumBy(files, 'size');
@@ -336,5 +353,6 @@ module.exports = {
     deleteMultipleCachedImages,
     clearCache,
     seedCache,
-    getCacheInfo
+    getCacheInfo,
+    LOCATION
 };

README.md

@@ -50,6 +50,7 @@ When providing `source={{uri: 'https://example.com/path/to/remote/image.jpg'}}`
 * `useQueryParamsInCacheKey` - _array|bool_ an array of keys to use from the `source.uri` query string or a bool value stating whether to use the entire query string or not. **(default: false)**
 * `defaultSource` - prop to display a background image while the source image is downloaded. This will work even in android, but will not display background image if there you set borderRadius on this component style prop
 * `resolveHeaders` - _function_ when provided, the returned object will be used as the headers object when sending the request to download the image. **(default: () => Promise.resolve({}))**
+* `cacheLocation` - _'cache'|'bundle'_ allows changing the root directory to use for caching. The default `'cache'` dir is sufficient for most use-cases. Images in this directory may be purged by Android automatically to free up space. Use `'bundle'` if the cached images are critical (you will have to manage cleanup manually). **(default: 'cache')**
 
 ### ImageCacheProvider
 `ImageCacheProvider` exposes interaction with the cache layer that is used by `CachedImage` so you can use it to prefetch some urls in the background while you app is starting,
@@ -78,9 +79,10 @@ ImageCacheProvider.deleteMultipleCachedImages([
 
 #### `type: CacheOptions`
 ```
-type ReadDirItem = {
+type CacheOptions = {
   useQueryParamsInCacheKey: string[]|bool; // same as the CachedImage props
   cacheGroup: string; // the directory to save cached images in, defaults to the url hostname
+  cacheLocation: 'cache'|'bundle'; // the root directory to use for caching, corresponds to CachedImage prop of same name, defaults to 'cache'
 };
 ```