diff --git a/Examples/UIExplorer/ImageExample.js b/Examples/UIExplorer/ImageExample.js
index faa3267a1..b886bf861 100644
--- a/Examples/UIExplorer/ImageExample.js
+++ b/Examples/UIExplorer/ImageExample.js
@@ -21,10 +21,41 @@ var {
StyleSheet,
Text,
View,
+ ActivityIndicatorIOS
} = React;
var ImageCapInsetsExample = require('./ImageCapInsetsExample');
+var NetworkImageExample = React.createClass({
+ watchID: (null: ?number),
+
+ getInitialState: function() {
+ return {
+ error: false,
+ loading: true,
+ progress: 0
+ };
+ },
+ render: function() {
+ var loader = this.state.loading ?
+
+ {this.state.progress}%
+
+ : null;
+ return this.state.error ?
+ {this.state.error} :
+ this.setState({error: e.nativeEvent.error})}
+ onLoadProgress={(e) => this.setState({progress: Math.max(0, Math.round(100 * e.nativeEvent.written / e.nativeEvent.total))}) }
+ onLoadEnd={() => this.setState({loading: false, error: false})}
+ onLoadAbort={() => this.setState({error: 'Loading has aborted'})} >
+ {loader}
+ ;
+ }
+});
+
exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = '';
@@ -59,6 +90,22 @@ exports.examples = [
);
},
},
+ {
+ title: 'Error Handler',
+ render: function() {
+ return (
+
+ );
+ },
+ },
+ {
+ title: 'Image Download Progress',
+ render: function() {
+ return (
+
+ );
+ },
+ },
{
title: 'Border Color',
render: function() {
@@ -300,6 +347,12 @@ var styles = StyleSheet.create({
width: 38,
height: 38,
},
+ progress: {
+ flex: 1,
+ alignItems: 'center',
+ flexDirection: 'row',
+ width: 100
+ },
leftMargin: {
marginLeft: 10,
},
diff --git a/Libraries/Image/RCTDownloadTaskWrapper.m b/Libraries/Image/RCTDownloadTaskWrapper.m
index b910cb476..e9a64369b 100644
--- a/Libraries/Image/RCTDownloadTaskWrapper.m
+++ b/Libraries/Image/RCTDownloadTaskWrapper.m
@@ -66,7 +66,6 @@ static void *const RCTDownloadTaskWrapperProgressBlockKey = (void *)&RCTDownload
task.rct_completionBlock = completionBlock;
task.rct_progressBlock = progressBlock;
- [task resume];
return task;
}
diff --git a/Libraries/Image/RCTImageDownloader.m b/Libraries/Image/RCTImageDownloader.m
index bf6a33e4d..f32d895cb 100644
--- a/Libraries/Image/RCTImageDownloader.m
+++ b/Libraries/Image/RCTImageDownloader.m
@@ -110,7 +110,7 @@ CGRect RCTClipRect(CGSize, CGFloat, CGSize, CGFloat, UIViewContentMode);
runBlocks(NO, response, data, error);
}
- if (response) {
+ if (response && !error) {
RCTImageDownloader *strongSelf = weakSelf;
NSCachedURLResponse *cachedResponse = [[NSCachedURLResponse alloc] initWithResponse:response data:data userInfo:nil storagePolicy:NSURLCacheStorageAllowed];
[strongSelf->_cache storeCachedResponse:cachedResponse forRequest:request];
diff --git a/Libraries/Image/RCTNetworkImageView.m b/Libraries/Image/RCTNetworkImageView.m
index f8dc28157..20d297b46 100644
--- a/Libraries/Image/RCTNetworkImageView.m
+++ b/Libraries/Image/RCTNetworkImageView.m
@@ -86,6 +86,8 @@ RCT_NOT_IMPLEMENTED(-initWithCoder:(NSCoder *)aDecoder)
{
if (![_imageURL isEqual:imageURL] && _downloadToken) {
[_imageDownloader cancelDownload:_downloadToken];
+ NSDictionary *event = @{ @"target": self.reactTag };
+ [_eventDispatcher sendInputEventWithName:@"loadAbort" body:event];
_downloadToken = nil;
}
@@ -146,7 +148,7 @@ RCT_NOT_IMPLEMENTED(-initWithCoder:(NSCoder *)aDecoder)
loadEndHandler();
});
} else if (error) {
- errorHandler([error description]);
+ errorHandler([error localizedDescription]);
}
}];
} else {
@@ -170,7 +172,7 @@ RCT_NOT_IMPLEMENTED(-initWithCoder:(NSCoder *)aDecoder)
loadEndHandler();
});
} else if (error) {
- errorHandler([error description]);
+ errorHandler([error localizedDescription]);
}
}];
}
diff --git a/Libraries/Image/RCTNetworkImageViewManager.m b/Libraries/Image/RCTNetworkImageViewManager.m
index 29d990b27..f42ef48f1 100644
--- a/Libraries/Image/RCTNetworkImageViewManager.m
+++ b/Libraries/Image/RCTNetworkImageViewManager.m
@@ -47,7 +47,7 @@ RCT_CUSTOM_VIEW_PROPERTY(tintColor, UIColor, RCTNetworkImageView)
return @{
@"loadStart": @{ @"registrationName": @"onLoadStart" },
@"loadProgress": @{ @"registrationName": @"onLoadProgress" },
- @"loaded": @{ @"registrationName": @"onLoaded" },
+ @"loaded": @{ @"registrationName": @"onLoadEnd" },
@"loadError": @{ @"registrationName": @"onLoadError" },
@"loadAbort": @{ @"registrationName": @"onLoadAbort" },
};