[Exp] Support prefetch image.

facebook#4420
expo · Mar 12, 2016 · e32131c · e32131c
1 parent c348def
commit e32131c
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 4 deletions.
diff --git a/Examples/UIExplorer/ImageExample.js b/Examples/UIExplorer/ImageExample.js
@@ -27,11 +27,14 @@ var {
 var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
 
 var ImageCapInsetsExample = require('./ImageCapInsetsExample');
+const IMAGE_PREFETCH_URL = 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now();
+Image.prefetch(IMAGE_PREFETCH_URL);
 
 var NetworkImageCallbackExample = React.createClass({
   getInitialState: function() {
     return {
       events: [],
+      startLoadPrefetched: false,
       mountTime: new Date(),
     };
   },
@@ -50,9 +53,20 @@ var NetworkImageCallbackExample = React.createClass({
           style={[styles.base, {overflow: 'visible'}]}
           onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
           onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)}
-          onLoadEnd={() => this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`)}
+          onLoadEnd={() => {
+            this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
+            this.setState({startLoadPrefetched: true});
+          }}
         />
-
+        {this.state.startLoadPrefetched ?
+          <Image
+            source={this.props.prefetchedSource}
+            style={[styles.base, {overflow: 'visible'}]}
+            onLoadStart={() => this._loadEventFired(`✔ (prefetched)onLoadStart (+${new Date() - mountTime}ms)`)}
+            onLoad={() => this._loadEventFired(`✔ (prefetched)onLoad (+${new Date() - mountTime}ms)`)}
+            onLoadEnd={() => this._loadEventFired(`✔ (prefetched)onLoadEnd (+${new Date() - mountTime}ms)`)}
+          />
+          : null}
         <Text style={{marginTop: 20}}>
           {this.state.events.join('\n')}
         </Text>
@@ -165,7 +179,8 @@ exports.examples = [
     title: 'Image Loading Events',
     render: function() {
       return (
-        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
+        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now()}}
+          prefetchedSource={{uri: IMAGE_PREFETCH_URL}}/>
       );
     },
   },

diff --git a/Libraries/Image/Image.android.js b/Libraries/Image/Image.android.js
@@ -27,6 +27,7 @@ var invariant = require('fbjs/lib/invariant');
 var merge = require('merge');
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
+var Networking = NativeModules.Networking;
 
 /**
  * <Image> - A react component for displaying different types of images,
@@ -110,6 +111,10 @@ var Image = React.createClass({
 
   statics: {
     resizeMode: ImageResizeMode,
+    /**
+     * Prefetch image for later use. Download remote image to the disk cache.
+     */
+    prefetch: (url) => { Networking .prefetchImage(url); },
   },
 
   mixins: [NativeMethodsMixin],

diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js
@@ -15,6 +15,7 @@ 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');
@@ -31,6 +32,7 @@ var warning = require('fbjs/lib/warning');
 var {
   ImageViewManager,
   NetworkImageViewManager,
+  Networking,
 } = require('NativeModules');
 
 /**
@@ -176,7 +178,11 @@ var Image = React.createClass({
       ImageViewManager.getSize(uri, success, failure || function() {
         console.warn('Failed to get size for image: ' + uri);
       });
-    }
+    },
+    /**
+     * Prefetch image for later use. Download remote image to the disk cache.
+     */
+    prefetch: (url) => { Networking.prefetchImage(url); },
   },
 
   mixins: [NativeMethodsMixin],

diff --git a/Libraries/Network/RCTNetworking.m b/Libraries/Network/RCTNetworking.m
@@ -17,6 +17,7 @@
 #import "RCTHTTPRequestHandler.h"
 #import "RCTLog.h"
 #import "RCTUtils.h"
+#import "RCTImageLoader.h"
 
 typedef RCTURLRequestCancellationBlock (^RCTHTTPQueryResult)(NSError *error, NSDictionary<NSString *, id> *result);
 
@@ -449,6 +450,11 @@ - (RCTNetworkTask *)networkTaskWithRequest:(NSURLRequest *)request
   [_tasksByRequestID removeObjectForKey:requestID];
 }
 
+RCT_EXPORT_METHOD(prefetchImage:(NSString *)url)
+{
+  [_bridge.imageLoader loadImageWithTag:url callback:^(NSError *error, UIImage *image) {}];
+}
+
 @end
 
 @implementation RCTBridge (RCTNetworking)

diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java b/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java
@@ -11,12 +11,19 @@
 
 import javax.annotation.Nullable;
 
+import java.io.File;
 import java.io.IOException;
 import java.io.InputStream;
 import java.io.Reader;
 
 import java.util.concurrent.TimeUnit;
 
+import android.net.Uri;
+import com.facebook.common.logging.FLog;
+import com.facebook.drawee.backends.pipeline.Fresco;
+import com.facebook.imagepipeline.core.ImagePipeline;
+import com.facebook.imagepipeline.request.ImageRequest;
+import com.facebook.imagepipeline.request.ImageRequestBuilder;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ExecutorToken;
 import com.facebook.react.bridge.GuardedAsyncTask;
@@ -27,6 +34,7 @@
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableArray;
 import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.common.ReactConstants;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
 import com.facebook.stetho.okhttp.StethoInterceptor;
 
@@ -39,6 +47,8 @@
 import com.squareup.okhttp.RequestBody;
 import com.squareup.okhttp.Response;
 import com.squareup.okhttp.ResponseBody;
+import okio.BufferedSink;
+import okio.Okio;
 
 import static java.lang.Math.min;
 
@@ -463,4 +473,25 @@ private DeviceEventManagerModule.RCTDeviceEventEmitter getEventEmitter(ExecutorT
     return getReactApplicationContext()
         .getJSModule(ExecutorToken, DeviceEventManagerModule.RCTDeviceEventEmitter.class);
   }
+
+  /**
+   * Prefetch image to the fresco image disk cache
+   */
+  @ReactMethod
+  public void prefetchImage(String url) {
+    Uri uri = null;
+    try {
+      if (url != null && !url.isEmpty()) {
+        uri = Uri.parse(url);
+      }
+    } catch (Exception e){
+      //ignore malformed url
+    }
+    if (uri == null) {
+      FLog.w(ReactConstants.TAG,"Invalid prefetch image url.");
+      return;
+    }
+    ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri).build();
+    Fresco.getImagePipeline().prefetchToDiskCache(request, this);
+  }
 }