From 2e66b59a77f56f8450ce0bc6363edae19c30103f Mon Sep 17 00:00:00 2001 From: kfiroo Date: Mon, 24 Jul 2017 12:17:11 +0300 Subject: [PATCH 01/30] yarn.lock --- CachedImageExample/yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/CachedImageExample/yarn.lock b/CachedImageExample/yarn.lock index 9f949c2..e92c732 100644 --- a/CachedImageExample/yarn.lock +++ b/CachedImageExample/yarn.lock @@ -3005,9 +3005,9 @@ react-deep-force-update@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7" -react-native-cached-image@*: - version "1.3.1" - resolved "https://registry.yarnpkg.com/react-native-cached-image/-/react-native-cached-image-1.3.1.tgz#853ea85d1b3102198e4f7ba0044e5cf8c16b1378" +react-native-cached-image@^1.3.5: + version "1.3.5" + resolved "https://registry.yarnpkg.com/react-native-cached-image/-/react-native-cached-image-1.3.5.tgz#c41ba97a9223b0c3d58970f2e3f0fb79a22e739e" dependencies: crypto-js "3.1.9-1" lodash "4.17.4" From b8068a42c905ba473a5e3ce9757c62d4900e2e71 Mon Sep 17 00:00:00 2001 From: kfiroo Date: Mon, 24 Jul 2017 12:17:54 +0300 Subject: [PATCH 02/30] Use ImageBackground when possible so allow nesting components inside an Image --- CachedImage.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CachedImage.js b/CachedImage.js index d5b815d..734faa5 100644 --- a/CachedImage.js +++ b/CachedImage.js @@ -9,6 +9,7 @@ const ImageCacheProvider = require('./ImageCacheProvider'); const { View, Image, + ImageBackground, ActivityIndicator, NetInfo, Platform @@ -53,7 +54,9 @@ const CachedImage = React.createClass({ getDefaultProps() { return { - renderImage: props => (), + renderImage: props => ImageBackground ? + () : + (), activityIndicatorProps: {}, useQueryParamsInCacheKey: false, resolveHeaders: () => Promise.resolve({}), From cd6014eb0dee70732ecc154263a3f51d50e9b3d6 Mon Sep 17 00:00:00 2001 From: kfiroo Date: Mon, 24 Jul 2017 12:51:49 +0300 Subject: [PATCH 03/30] properly check for cache response when downloading an image --- ImageCacheProvider.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/ImageCacheProvider.js b/ImageCacheProvider.js index 6ed5b24..7d3b757 100644 --- a/ImageCacheProvider.js +++ b/ImageCacheProvider.js @@ -138,10 +138,13 @@ function downloadImage(fromUrl, toFile, headers = {}) { .config({path: tmpFile}) .fetch('GET', fromUrl, headers) .then(res => { - if (Math.floor(res.respInfo.status / 100) !== 2) { + const successfulResponse = Math.floor(res.respInfo.status / 100) === 2; + const cachedResponse = res.respInfo.status === 304; + // check for error responses (not 2** or 304) + if (!(successfulResponse || cachedResponse)) { throw new Error('Failed to successfully download image'); } - //The download is complete and rename the temporary file + // The download is complete and rename the temporary file return fs.mv(tmpFile, toFile); }) .then(() => resolve(toFile)) From 902d2a1b0cb66270ef28612b0aa4dfbb472c11f4 Mon Sep 17 00:00:00 2001 From: kfiroo Date: Mon, 24 Jul 2017 12:52:40 +0300 Subject: [PATCH 04/30] Added a monkey and a button to reset the list data source to trigger the download again --- CachedImageExample/index.js | 17 +++++++++++++++++ CachedImageExample/yarn.lock | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/CachedImageExample/index.js b/CachedImageExample/index.js index f1f2650..0bfbec0 100644 --- a/CachedImageExample/index.js +++ b/CachedImageExample/index.js @@ -56,6 +56,7 @@ const loading = require('./loading.jpg'); const images = [ 'https://wallpaperbrowse.com/media/images/bcf39e88-5731-43bb-9d4b-e5b3b2b1fdf2.jpg', + 'https://i.ytimg.com/vi/b6m-XlOxjbk/hqdefault.jpg', 'https://d22cb02g3nv58u.cloudfront.net/0.671.0/assets/images/icons/fun-types/full/wrong-image.jpg', 'https://d22cb02g3nv58u.cloudfront.net/0.671.0/assets/images/icons/fun-types/full/bar-crawl-full.jpg', 'https://d22cb02g3nv58u.cloudfront.net/0.671.0/assets/images/icons/fun-types/full/cheeseburger-full.jpg', @@ -106,6 +107,16 @@ const CachedImageExample = React.createClass({ }); }, + cacheImages() { + this.setState({ + dataSource: this.state.dataSource.cloneWithRows([]) + }, () => { + this.setState({ + dataSource: this.state.dataSource.cloneWithRows(images) + }); + }); + }, + renderRow(uri) { return ( +