Add progress events for iOS.

FastImage.js

@@ -1,4 +1,6 @@
-import React, { PropTypes, Component } from 'react'
+import React, {
+  Component,
+} from 'react'
 import {
   requireNativeComponent,
   Image,
@@ -16,7 +18,13 @@ class FastImage extends Component {
   }
 
   render() {
-    const { source, onError, onLoad, ...props } = this.props
+    const {
+      source,
+      onError,
+      onLoad,
+      onProgress,
+      ...props
+    } = this.props
 
     // If there's no source or source uri just fallback to Image.
     if (!source || !source.uri) {
@@ -25,6 +33,7 @@ class FastImage extends Component {
           ref={e => (this._root = e)}
           {...props}
           source={source}
+          onProgress={onProgress}
           onError={onError}
           onLoad={onLoad}
         />
@@ -37,6 +46,7 @@ class FastImage extends Component {
         ref={e => (this._root = e)}
         {...props}
         source={resolvedSource}
+        onFastImageProgress={onProgress}
         onFastImageError={onError}
         onFastImageLoad={onLoad}
       />
@@ -70,18 +80,24 @@ const FastImageSourcePropType = PropTypes.shape({
 FastImage.propTypes = {
   ...View.propTypes,
   source: FastImageSourcePropType,
+  onFastImageProgress: PropTypes.func,
   onFastImageError: PropTypes.func,
   onFastImageLoad: PropTypes.func,
 }
 
 FastImage.defaultProps = {
   resizeMode: FastImage.resizeMode.cover,
+  onProgress: Function.prototype,
   onLoad: Function.prototype,
   onError: Function.prototype,
 }
 
 const FastImageView = requireNativeComponent('FastImageView', FastImage, {
-  nativeOnly: { onFastImageError: true, onFastImageLoad: true },
+  nativeOnly: {
+    onFastImageProgress: true,
+    onFastImageError: true,
+    onFastImageLoad: true
+  },
 })
 
 export default FastImage

example/FastImageExample.js

@@ -1,6 +1,13 @@
 // @flow
 import React, { Component } from 'react'
-import { View, Text, StyleSheet, ScrollView, StatusBar } from 'react-native'
+import {
+  PixelRatio,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
 import Icon from 'react-native-vector-icons/Ionicons'
 import FastImage from 'react-native-fast-image'
 import timeout from 'react-timeout'
@@ -10,6 +17,8 @@ const getImageUrl = (id, width, height) =>
   `https://source.unsplash.com/${id}/${width}x${height}`
 
 const IMAGE_SIZE = 150
+const IMAGE_SIZE_PX = PixelRatio.getPixelSizeForLayoutSize(IMAGE_SIZE)
+
 // The server is used to test that sending headers is working correctly.
 const USE_SERVER = false
 const TOKEN = 'someToken'
@@ -24,8 +33,8 @@ const getImages = () => {
     ]
   }
   return [
-    getImageUrl('x58soEovG_M', IMAGE_SIZE, IMAGE_SIZE),
+    getImageUrl('x58soEovG_M', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
-    getImageUrl('yPI7myL5eWY', IMAGE_SIZE, IMAGE_SIZE),
+    getImageUrl('yPI7myL5eWY', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
     'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif',
   ]
 }
@@ -81,6 +90,7 @@ class FastImageExample extends Component {
               },
               priority: FastImage.priority.low,
             }}
+            onProgress={e => console.log('progress', e.nativeEvent.progress)}
           />
           <FastImage
             style={styles.image}

ios/FastImage/FFFastImageView.h

@@ -11,9 +11,11 @@
 
 @interface FFFastImageView : FLAnimatedImageView
 
-@property(nonatomic, copy) RCTDirectEventBlock onFastImageError;
+@property (nonatomic, copy) RCTBubblingEventBlock onFastImageProgress;
-@property(nonatomic, copy) RCTDirectEventBlock onFastImageLoad;
+@property (nonatomic, copy) RCTDirectEventBlock onFastImageError;
-@property(nonatomic, assign) RCTResizeMode resizeMode;
+@property (nonatomic, copy) RCTDirectEventBlock onFastImageLoad;
-@property(nonatomic, strong) FFFastImageSource *source;
+@property (nonatomic, assign) RCTResizeMode resizeMode;
+@property (nonatomic, strong) FFFastImageSource *source;
 
 @end
+

ios/FastImage/FFFastImageView.m

@@ -37,21 +37,28 @@
         [self sd_setImageWithURL:source.uri
                 placeholderImage:nil
                          options:options
-                       completed:^(UIImage *image,
+                        progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) {
-                                   NSError *error,
+                            double progress = MIN(1, MAX(0, (double) receivedSize / (double) expectedSize));
-                                   SDImageCacheType cacheType,
+                            if (_onFastImageProgress) {
-                                   NSURL *imageURL) {
+                                _onFastImageProgress(@{ @"progress": @(progress) });
-                           if (error) {
+                            }
-                             if (_onFastImageError) {
+
-                               _onFastImageError(@{});
+                        } completed:^(UIImage * _Nullable image,
-                             }
+                                      NSError * _Nullable error,
-                           } else {
+                                      SDImageCacheType cacheType,
-                             if (_onFastImageLoad) {
+                                      NSURL * _Nullable imageURL) {
-                               _onFastImageLoad(@{});
+                            if (error) {
-                             }
+                                if (_onFastImageError) {
-                           }
+                                    _onFastImageError(@{});
-                       }];
+                                }
+                            } else {
+                                if (_onFastImageLoad) {
+                                    _onFastImageLoad(@{});
+                                }
+                            }
+                        }];
     }
 }
 
 @end
+

ios/FastImage/FFFastImageViewManager.m

@@ -14,10 +14,11 @@ RCT_EXPORT_MODULE(FastImageView)
   return view;
 }
 
-RCT_EXPORT_VIEW_PROPERTY(source, FFFastImageSource);
+RCT_EXPORT_VIEW_PROPERTY(source, FFFastImageSource)
-RCT_EXPORT_VIEW_PROPERTY(resizeMode, RCTResizeMode);
+RCT_EXPORT_VIEW_PROPERTY(resizeMode, RCTResizeMode)
-RCT_EXPORT_VIEW_PROPERTY(onFastImageError, RCTDirectEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onFastImageProgress, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onFastImageLoad, RCTDirectEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onFastImageError, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onFastImageLoad, RCTDirectEventBlock)
 
 RCT_EXPORT_METHOD(preload:(nonnull NSArray<FFFastImageSource *> *)sources)
 {