Handle URI Prop Changes

Author: billmalarky

lib/imageCacheHoc.js

@@ -145,51 +145,73 @@ export default function imageCacheHoc(Image, options = {}) {
       // Track component mount status to avoid calling setState() on unmounted component.
       this._isMounted = true;
 
+      // Set url from source prop
+      const url = traverse(this.props).get(['source', 'uri']);
+
       // Add a cache lock to file with this name (prevents concurrent <CacheableImage> components from pruning a file with this name from cache).
-      const fileName = await this.fileSystem.getFileNameFromUrl(traverse(this.props).get(['source', 'uri']));
+      const fileName = await this.fileSystem.getFileNameFromUrl(url);
       FileSystem.lockCacheFile(fileName, this.componentId);
 
-      // Check local fs for file, fallback to network and write file to disk if local file not found.
-      const permanent = this.props.permanent ? true : false;
-      let localFilePath = null;
-      try {
-        localFilePath = await this.fileSystem.getLocalFilePathFromUrl(traverse(this.props).get(['source', 'uri']), permanent);
-      } catch (error) {
-        console.warn(error); // eslint-disable-line no-console
-      }
-
-      // Check component is still mounted to avoid calling setState() on components that were quickly
-      // mounted then unmounted before componentDidMount() finishes.
-      // See: https://github.com/billmalarky/react-native-image-cache-hoc/issues/6#issuecomment-354490597
-      if (this._isMounted && localFilePath) {
-        this.setState({ localFilePath });
-      }
+      // Init the image cache logic
+      await this._loadImage(url);
 
     }
 
+    /**
+     *
+     * Enables caching logic to work if component source prop is updated (that is, the image url changes without mounting a new component).
+     * See: https://github.com/billmalarky/react-native-image-cache-hoc/pull/15
+     *
+     * @param nextProps {Object} - Props that will be passed to component.
+     */
     async componentWillReceiveProps(nextProps) {
-      const uri = traverse(this.props).get(['source', 'uri']);
-      const nextUri = traverse(nextProps).get(['source', 'uri']);
-      if (uri === nextUri) return;
 
-      const fileName = await this.fileSystem.getFileNameFromUrl(uri);
-      const nextFileName = await this.fileSystem.getFileNameFromUrl(nextUri);
+      // Set urls from source prop data
+      const url = traverse(this.props).get(['source', 'uri']);
+      const nextUrl = traverse(nextProps).get(['source', 'uri']);
+
+      // Do nothing if url has not changed.
+      if (url === nextUrl) return;
+
+      // Remove component cache lock on old image file, and add cache lock to new image file.
+      const fileName = await this.fileSystem.getFileNameFromUrl(url);
+      const nextFileName = await this.fileSystem.getFileNameFromUrl(nextUrl);
 
       FileSystem.unlockCacheFile(fileName, this.componentId);
       FileSystem.lockCacheFile(nextFileName, this.componentId);
 
-      const { permanent } = this.props;
+      // Init the image cache logic
+      await this._loadImage(nextUrl);
+
+    }
+
+    /**
+     *
+     * Executes the image download/cache logic and calls setState() with to re-render
+     * component using local file path on completion.
+     *
+     * @param url {String} - The remote image url.
+     * @private
+     */
+    async _loadImage(url) {
+
+      // Check local fs for file, fallback to network and write file to disk if local file not found.
+      const permanent = this.props.permanent ? true : false;
       let localFilePath = null;
       try {
-        localFilePath = await this.fileSystem.getLocalFilePathFromUrl(nextUri, !!permanent);
+        localFilePath = await this.fileSystem.getLocalFilePathFromUrl(url, permanent);
       } catch (error) {
         console.warn(error); // eslint-disable-line no-console
       }
 
+      // Check component is still mounted to avoid calling setState() on components that were quickly
+      // mounted then unmounted before componentDidMount() finishes.
+      // See: https://github.com/billmalarky/react-native-image-cache-hoc/issues/6#issuecomment-354490597
       if (this._isMounted && localFilePath) {
         this.setState({ localFilePath });
       }
-    }    
+
+    }
 
     async componentWillUnmount() {