[Image] Add examples to UIExplorer, fix some bugs

Examples/UIExplorer/ImageExample.js

@@ -21,10 +21,41 @@ var {
   StyleSheet,
   Text,
   View,
+  ActivityIndicatorIOS
 } = React;
 
 var ImageCapInsetsExample = require('./ImageCapInsetsExample');
 
+var NetworkImage = React.createClass({
+  watchID: (null: ?number),
+
+  getInitialState: function() {
+    return {
+      error: false,
+      loading: true,
+      progress: 0
+    };
+  },
+  render: function() {
+    var loader = this.state.loading ?
+      <View style={styles.progress}>
+        <Text>{this.state.progress}%</Text>
+        <ActivityIndicatorIOS style={{marginLeft:5}}/>
+      </View> : null;
+    return this.state.error ?
+      <Text>{this.state.error}</Text> :
+      <Image
+          source={this.props.source}
+          style={styles.base}
+          onLoadError={(e) => 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}
+      </Image>
+  }
+});
+
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<Image>';
@@ -59,6 +90,20 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Error Handler',
+    render: function() {
+      return <NetworkImage source={{uri: 'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} />
+    },
+  },
+  {
+    title: 'Image Download Progress',
+    render: function() {
+      return (
+        <NetworkImage source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
+      );
+    },
+  },
   {
     title: 'Border Color',
     render: function() {
@@ -300,6 +345,12 @@ var styles = StyleSheet.create({
     width: 38,
     height: 38,
   },
+  progress: {
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    width: 100
+  },
   leftMargin: {
     marginLeft: 10,
   },

Libraries/Image/RCTDownloadTaskWrapper.m

@@ -66,7 +66,6 @@ - (NSURLSessionDownloadTask *)downloadData:(NSURL *)url progressBlock:(RCTDataPr
   task.rct_completionBlock = completionBlock;
   task.rct_progressBlock = progressBlock;
 
-  [task resume];
   return task;
 }
 

Libraries/Image/RCTImageDownloader.m

@@ -96,7 +96,7 @@ - (RCTImageDownloadCancellationBlock)_downloadDataForURL:(NSURL *)url progressBl
           runBlocks(NO, 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];

Libraries/Image/RCTNetworkImageView.m

@@ -86,6 +86,8 @@ - (void)setImageURL:(NSURL *)imageURL resetToDefaultImageWhileLoading:(BOOL)rese
 {
   if (![_imageURL isEqual:imageURL] && _downloadToken) {
     [_imageDownloader cancelDownload:_downloadToken];
+    NSDictionary *event = @{ @"target": self.reactTag };
+    [_eventDispatcher sendInputEventWithName:@"loadAbort" body:event];
     _downloadToken = nil;
   }
 
@@ -146,8 +148,8 @@ - (void)setImageURL:(NSURL *)imageURL resetToDefaultImageWhileLoading:(BOOL)rese
             loadEndHandler();
           });
         } else if (error) {
-          errorHandler([error description]);
-        }
+          errorHandler([error localizedDescription]);
+        } 
       }];
     } else {
       _downloadToken = [_imageDownloader downloadImageForURL:imageURL
@@ -170,8 +172,8 @@ - (void)setImageURL:(NSURL *)imageURL resetToDefaultImageWhileLoading:(BOOL)rese
             loadEndHandler();
           });
         } else if (error) {
-          errorHandler([error description]);
-        }
+          errorHandler([error localizedDescription]);
+        } 
       }];
     }
   }

Libraries/Image/RCTNetworkImageViewManager.m

@@ -47,7 +47,7 @@ - (NSDictionary *)customDirectEventTypes
   return @{
     @"loadStart":    @{ @"registrationName": @"onLoadStart" },
     @"loadProgress": @{ @"registrationName": @"onLoadProgress" },
-    @"loaded":       @{ @"registrationName": @"onLoaded" },
+    @"loaded":       @{ @"registrationName": @"onLoadEnd" },
     @"loadError":    @{ @"registrationName": @"onLoadError" },
     @"loadAbort":    @{ @"registrationName": @"onLoadAbort" },
   };