Add a way to prefetch remote images to cache with Image.prefetch

Summary:Adds `Image.prefetch` to prefetch remote images before they are used in an actual `Image` component. This is based off of #4420 by sospartan and skevy's work.
Closes https://github.com/facebook/react-native/pull/6774

Differential Revision: D3153729

Pulled By: bestander

fb-gh-sync-id: ef61412e051a49b42ae885edce7905a8ca0da23f
fbshipit-source-id: ef61412e051a49b42ae885edce7905a8ca0da23f

Libraries/Image/Image.android.js

@@ -23,11 +23,14 @@ var StyleSheetPropType = require('StyleSheetPropType');
 var View = require('View');
 
 var flattenStyle = require('flattenStyle');
-var invariant = require('fbjs/lib/invariant');
 var merge = require('merge');
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
 
+var {
+  ImageLoader,
+} = NativeModules;
+
 /**
  * <Image> - A react component for displaying different types of images,
  * including network images, static resources, temporary local images, and
@@ -110,6 +113,13 @@ var Image = React.createClass({
 
   statics: {
     resizeMode: ImageResizeMode,
+    /**
+     * Prefetches a remote image for later use by downloading it to the disk
+     * cache
+     */
+    prefetch(url: string) {
+      return ImageLoader.prefetchImage(url);
+    },
   },
 
   mixins: [NativeMethodsMixin],

Libraries/Image/Image.ios.js

@@ -15,23 +15,22 @@ var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var ImageResizeMode = require('ImageResizeMode');
 var ImageStylePropTypes = require('ImageStylePropTypes');
 var NativeMethodsMixin = require('NativeMethodsMixin');
+var NativeModules = require('NativeModules');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
-var View = require('View');
 var StyleSheet = require('StyleSheet');
 var StyleSheetPropType = require('StyleSheetPropType');
 
 var flattenStyle = require('flattenStyle');
-var invariant = require('fbjs/lib/invariant');
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
-var warning = require('fbjs/lib/warning');
 
 var {
+  ImageLoader,
   ImageViewManager,
   NetworkImageViewManager,
-} = require('NativeModules');
+} = NativeModules;
 
 /**
  * A React component for displaying different types of images,
@@ -181,7 +180,14 @@ var Image = React.createClass({
       ImageViewManager.getSize(uri, success, failure || function() {
         console.warn('Failed to get size for image: ' + uri);
       });
-    }
+    },
+    /**
+     * Prefetches a remote image for later use by downloading it to the disk
+     * cache
+     */
+    prefetch(url: string) {
+      return ImageLoader.prefetchImage(url);
+    },
   },
 
   mixins: [NativeMethodsMixin],

Libraries/Image/RCTImageLoader.m

@@ -20,6 +20,9 @@
 #import "RCTNetworking.h"
 #import "RCTUtils.h"
 
+static NSString *const RCTErrorInvalidURI = @"E_INVALID_URI";
+static NSString *const RCTErrorPrefetchFailure = @"E_PREFETCH_FAILURE";
+
 @implementation UIImage (React)
 
 - (CAKeyframeAnimation *)reactKeyframeAnimation
@@ -634,6 +637,27 @@ static UIImage *RCTResizeImageIfNeeded(UIImage *image,
                       }];
 }
 
+#pragma mark - Bridged methods
+
+RCT_EXPORT_METHOD(prefetchImage:(NSString *)uri
+                        resolve:(RCTPromiseResolveBlock)resolve
+                         reject:(RCTPromiseRejectBlock)reject)
+{
+  if (!uri.length) {
+    reject(RCTErrorInvalidURI, @"Cannot prefetch an image for an empty URI", nil);
+    return;
+  }
+
+  [_bridge.imageLoader loadImageWithTag:uri callback:^(NSError *error, UIImage *image) {
+    if (error) {
+      reject(RCTErrorPrefetchFailure, nil, error);
+      return;
+    }
+
+    resolve(@YES);
+  }];
+}
+
 #pragma mark - RCTURLRequestHandler
 
 - (BOOL)canHandleRequest:(NSURLRequest *)request