react-native-cached-image - npm Package Compare versions

Comparing version 1.4.0-rc to 1.4.0

CachedImage.js

@@ -55,3 +55,3 @@ 'use strict';
     static defaultProps = {
-            renderImage: props => (<ImageBackground imageStyle={props.style} ref={'cachedImage'} {...props} />),
+            renderImage: props => (<ImageBackground imageStyle={props.style} ref={CACHED_IMAGE_REF} {...props} />),
             activityIndicatorProps: {},
@@ -58,0 +58,0 @@ };

ImageCacheManager.js

@@ -7,14 +7,13 @@ 'use strict';
 const pathUtils = require('./utils/pathUtils');
-
 const MemoryCache = require('react-native-clcasher/MemoryCache').default;
 
-const defaultDefaultOptions = {
-    headers: {},
-    ttl: 60 * 60 * 24 * 14, // 2 weeks
-    useQueryParamsInCacheKey: false,
-    cacheLocation: fsUtils.getCacheDir(),
-    allowSelfSignedSSL: false,
-};
+module.exports = (defaultOptions = {}, urlCache = MemoryCache, fs = fsUtils, path = pathUtils) => {
 
-module.exports = (defaultOptions = defaultDefaultOptions, urlCache = MemoryCache) => {
+    const defaultDefaultOptions = {
+        headers: {},
+        ttl: 60 * 60 * 24 * 14, // 2 weeks
+        useQueryParamsInCacheKey: false,
+        cacheLocation: fs.getCacheDir(),
+        allowSelfSignedSSL: false,
+    };
 
@@ -25,3 +24,3 @@ // apply default options
     function isCacheable(url) {
-        return _.isString(url) && (_.startsWith(url, 'http://') || _.startsWith(url, 'https://'));
+        return _.isString(url) && (_.startsWith(url.toLowerCase(), 'http://') || _.startsWith(url.toLowerCase(), 'https://'));
     }
@@ -36,3 +35,3 @@
         // cacheableUrl contains only the needed query params
-        const cacheableUrl = pathUtils.getCacheableUrl(url, options.useQueryParamsInCacheKey);
+        const cacheableUrl = path.getCacheableUrl(url, options.useQueryParamsInCacheKey);
         // note: urlCache may remove the entry if it expired so we need to remove the leftover file manually
@@ -50,5 +49,5 @@ return urlCache.get(cacheableUrl)
             .catch(() => {
-                const filePath = pathUtils.getImageFilePath(cacheableUrl, options.cacheLocation);
+                const filePath = path.getImageFilePath(cacheableUrl, options.cacheLocation);
                 // remove expired file if exists
-                return fsUtils.deleteFile(filePath)
+                return fs.deleteFile(filePath)
                     // get the image to cache (download / copy / etc)
@@ -75,3 +74,3 @@ .then(() => getCachedFile(filePath))
                 options,
-                filePath => fsUtils.downloadFile(url, filePath, options.headers)
+                filePath => fs.downloadFile(url, filePath, options.headers)
             );
@@ -91,3 +90,3 @@ },
                 options,
-                filePath => fsUtils.copyFile(seedPath, filePath)
+                filePath => fs.copyFile(seedPath, filePath)
             );
@@ -107,8 +106,8 @@ },
             _.defaults(options, defaultOptions);
-            const cacheableUrl = pathUtils.getCacheableUrl(url, options.useQueryParamsInCacheKey);
-            const filePath = pathUtils.getImageFilePath(cacheableUrl, options.cacheLocation);
+            const cacheableUrl = path.getCacheableUrl(url, options.useQueryParamsInCacheKey);
+            const filePath = path.getImageFilePath(cacheableUrl, options.cacheLocation);
             // remove file from cache
             return urlCache.remove(cacheableUrl)
                 // remove file from disc
-                .then(() => fsUtils.deleteFile(filePath));
+                .then(() => fs.deleteFile(filePath));
         },
@@ -124,3 +123,3 @@
             return urlCache.flush()
-                .then(() => fsUtils.cleanDir(options.cacheLocation));
+                .then(() => fs.cleanDir(options.cacheLocation));
         },
@@ -131,7 +130,7 @@
          * @param options
-         * @returns {*|Promise.<{file: Array, size: Number}>}
+         * @returns {Promise.<{file: Array, size: Number}>}
          */
         getCacheInfo(options = {}) {
             _.defaults(options, defaultOptions);
-            return fsUtils.getDirInfo(options.cacheLocation);
+            return fs.getDirInfo(options.cacheLocation);
         },
@@ -138,0 +137,0 @@

ImageCacheProvider.js

@@ -16,4 +16,4 @@ 'use strict';
     static propTypes = {
-        // only a single child so we can render it
-        children: PropTypes.element.isRequired,
+        // only a single child so we can render it without adding a View
+        children: PropTypes.element,
 
@@ -20,0 +20,0 @@ // ImageCacheManager options

package.json

 {
   "name": "react-native-cached-image",
-  "version": "1.4.0-rc",
+  "version": "1.4.0",
   "description": "CachedImage component for react-native",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "./node_modules/.bin/jest"
   },
+  "jest": {
+    "preset": "react-native",
+    "globals": {
+      "NODE_ENV": "test"
+    },
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/CachedImageExample/"
+    ],
+    "modulePathIgnorePatterns": [
+      "/CachedImageExample/"
+    ],
+    "verbose": true
+  },
   "repository": {
@@ -41,3 +55,14 @@ "type": "git",
     "url-parse": "1.1.9"
+  },
+  "devDependencies": {
+    "babel-jest": "^21.0.2",
+    "babel-preset-env": "*",
+    "babel-preset-react-native": "^3.0.2",
+    "jest": "^21.0.2",
+    "jest-react-native": "^18.0.0",
+    "react": "16.0.0-alpha.12",
+    "react-native": "^0.48.3",
+    "react-test-renderer": "^15.6.1",
+    "regenerator-runtime": "^0.11.0"
   }
 }

README.md

@@ -10,5 +10,3 @@ # react-native-cached-image
     npm install react-native-cached-image --save
-
-or
-
+    - or -
     yarn add react-native-cached-image
@@ -35,2 +33,35 @@
 
+```jsx
+import React from 'react';
+import {
+    CachedImage,
+    ImageCacheProvider
+} from 'react-native-cached-image';
+
+const images = [
+    'https://example.com/images/1.jpg',
+    'https://example.com/images/2.jpg',
+    'https://example.com/images/3.jpg',
+    // ...
+];
+
+export default class Example extends React.Component {
+    render() {
+        return (
+            <ImageCacheProvider
+                urlsToPreload={images}
+                onPreloadComplete={() => console.log('hey there')}>
+
+                <CachedImage source={{uri: images[0]}}/>
+
+                <CachedImage source={{uri: images[1]}}/>
+
+                <CachedImage source={{uri: images[2]}}/>
+
+            </ImageCacheProvider>
+        );
+    }
+}
+```
+
 ## API
@@ -47,13 +78,82 @@
 
+### ImageCacheManager
+This is where all the cache magic takes place.
+The API usually takes a *URL* and a set of [`ImageCacheManagerOptions`](#imagecachemanageroptions).
+
+#### `ImageCacheManager.downloadAndCacheUrl(url: String, options: ImageCacheManagerOptions): Promise<String>`
+Check the cache for the the URL (after removing fixing the query string according to `ImageCacheManagerOptions.useQueryParamsInCacheKey`).
+If the URL exists in cache and is not expired, resolve with the local cached file path.
+Otherwise, download the file to the cache folder, add it to the cache and then return the cached file path.
+
+#### `ImageCacheManager.seedAndCacheUrl(url: String, seedPath: String, options: ImageCacheManagerOptions): Promise<String>`
+Check the cache for the the URL (after removing fixing the query string according to `ImageCacheManagerOptions.useQueryParamsInCacheKey`).
+If the URL exists in cache and is not expired, resolve with the local cached file path.
+Otherwise, copy the seed file into the cache folder, add it to the cache and then return the cached file path.
+
+#### `ImageCacheManager.deleteUrl(url: String, options: ImageCacheManagerOptions): Promise`
+Removes the cache entry for the URL and the local file corresponding to it, if it exists.
+
+#### `ImageCacheManager.clearCache(options: ImageCacheManagerOptions): Promise`
+Clear the URL cache and remove files in the cache folder (as stated in the `ImageCacheManagerOptions.cacheLocation`)
+
+#### `ImageCacheManager.getCacheInfo(options: ImageCacheManagerOptions): Promise.<{file: Array, size: Number}>`
+Returns info about the cache, list of files and the total size of the cache.
+
+
 ### CachedImage
-TODO - CachedImage props
+`CachedImage` is a drop in replacement for the `Image` component that will attempt to cache remote URLs for better performance.  
+It's main use is to hide the cache layer from the user and provide a simple way to cache images.  
+`CachedImage` uses an instance of `ImageCacheManager` to interact with the cache, if there is an instance provided by `ImageCacheProvider` via the context it will be used, otherwise a new instance will be created with the options from the component's props. 
 
+```jsx
+<CachedImage
+    source={{
+        uri: 'https://example.com/path/to/your/image.jpg'
+    }}
+    style={styles.image}
+/>
+```
+
+##### Props
+* `renderImage` - a function that returns a component, used to override the underlying `Image` component.
+* `activityIndicatorProps` - props for the `ActivityIndicator` that is shown while the image is downloaded.
+* `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
+* `loadingIndicator` - _component_ prop to set custom `ActivityIndicator`.
+* `fallbackSource` - prop to set placeholder image. when `source.uri` is null or cached failed, the `fallbackSource` will be display.
+* any of the `ImageCacheManagerOptionsPropTypes` props - customize the `ImageCacheManager` for this specific `CachedImage` instance.
+
 ### ImageCacheProvider
-TODO - ImageCacheProvider props
+This is a top-level component with 2 major functions:
+1. Provide the customized `ImageCacheManager` to nested `CachedImage`.
+2. Preload a set of URLs.
 
-### ImageCacheManager
-TODO - ImageCacheManager api
+##### Props
+* `urlsToPreload` - an array of URLs to preload when the component mounts. default []
+* `numberOfConcurrentPreloads` - control the number of concurrent downloads, usually used when the `urlsToPreload` array is very big. default `urlsToPreload.length`
+* `onPreloadComplete` - callback for when the preload is complete and all images are cached.
 
+### ImageCacheManagerOptions
+A set of options that are provided to the `ImageCacheManager` and provide ways to customize it to your needs.
+
+```jsx
+type ImageCacheManagerOptions = {
+    headers: PropTypes.object,                      // an object to be used as the headers when sending the request for the url. default {}
+    
+    ttl: PropTypes.number,                          // the number of seconds each url will stay in the cache. default 2 weeks
+    
+    useQueryParamsInCacheKey: PropTypes.oneOfType([ // when handling a URL with query params, this indicates how it should be treated:
+        PropTypes.bool,                             // if a bool value is given the whole query string will be used / ignored
+        PropTypes.arrayOf(PropTypes.string)         // if an array of strings is given, only these keys will be taken from the query string.
+    ]),                                             // default false
+    
+    cacheLocation: PropTypes.string,                // the path to the root of the cache folder. default the device cache dir 
+    
+    allowSelfSignedSSL: PropTypes.bool,             // true to allow self signed SSL URLs to be downloaded. default false
+};
+
+```
+
+
 ## Contributing
 
 Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34615

increased by20.98%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

157

increased by175.44%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

9

increased byInfinity%

No dependency changes