Send down image source to RCTImageView onLoad callback on iOS

Summary: This allows the onLoad callback to know which image has actually loaded. This is only for iOS at the moment - implementing this for Android will require quite a bit more work. Reviewed By: majak Differential Revision: D3738759 fbshipit-source-id: b1fc2bd0dc5de90096debeab02b8f795739a4547
facebook · Aug 22, 2016 · 84f68c3 · 84f68c3
1 parent 0af640b
commit 84f68c3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/Examples/UIExplorer/js/ImageExample.js b/Examples/UIExplorer/js/ImageExample.js
@@ -61,7 +61,15 @@ var NetworkImageCallbackExample = React.createClass({
           source={this.props.source}
           style={[styles.base, {overflow: 'visible'}]}
           onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
-          onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)}
+          onLoad={(event) => {
+            // Currently this image source feature is only available on iOS.
+            if (event.nativeEvent.source) {
+              const url = event.nativeEvent.source.url;
+              this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms) for URL ${url}`);
+            } else {
+              this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`);
+            }
+          }}
           onLoadEnd={() => {
             this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
             this.setState({startLoadPrefetched: true}, () => {
@@ -78,7 +86,15 @@ var NetworkImageCallbackExample = React.createClass({
             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)`)}
+            onLoad={(event) => {
+              // Currently this image source feature is only available on iOS.
+              if (event.nativeEvent.source) {
+                const url = event.nativeEvent.source.url;
+                this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms) for URL ${url}`);
+              } else {
+                this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`);
+              }
+            }}
             onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
           />
           : null}

diff --git a/Libraries/Image/RCTImageView.m b/Libraries/Image/RCTImageView.m
@@ -36,6 +36,20 @@ static BOOL RCTShouldReloadImageForSizeChange(CGSize currentSize, CGSize idealSi
     heightMultiplier > upscaleThreshold || heightMultiplier < downscaleThreshold;
 }
 
+/**
+ * See RCTConvert (ImageSource). We want to send down the source as a similar
+ * JSON parameter.
+ */
+static NSDictionary *onLoadParamsForSource(RCTImageSource *source)
+{
+  NSDictionary *dict = @{
+    @"width": @(source.size.width),
+    @"height": @(source.size.height),
+    @"url": source.request.URL.absoluteString,
+  };
+  return @{ @"source": dict };
+}
+
 @interface RCTImageView ()
 
 @property (nonatomic, strong) RCTImageSource *imageSource;
@@ -317,7 +331,7 @@ - (void)imageLoaderLoadedImage:(UIImage *)loadedImage error:(NSError *)error for
     }
 
     if (self->_onLoad) {
-      self->_onLoad(nil);
+      self->_onLoad(onLoadParamsForSource(source));
     }
     if (self->_onLoadEnd) {
       self->_onLoadEnd(nil);