Make property names consistent and add example.

example/fastImage/Button.js

@@ -1,21 +1,27 @@
 import React from 'react'
-import { StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 
 const Button = ({ text, onPress }) => (
   <TouchableOpacity onPress={onPress}>
-    <Text style={styles.button}>{text}</Text>
+    <View style={styles.button}>
+      <Text style={styles.text}>{text}</Text>
+    </View>
   </TouchableOpacity>
 )
 
 const styles = StyleSheet.create({
   button: {
     backgroundColor: 'black',
-    color: 'white',
     margin: 5,
-    padding: 5,
+    height: 44,
     paddingLeft: 10,
     paddingRight: 10,
-    borderRadius: 2,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: 'white',
   },
 })
 

example/fastImage/PreloadExample.js

@@ -6,23 +6,32 @@ import Section from './Section'
 import FeatureText from './FeatureText'
 import uuid from 'uuid/v4'
 import Button from './Button'
+import { createImageProgress } from 'react-native-image-progress'
 
 const IMAGE_URL =
   'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif'
 
+const Image = createImageProgress(FastImage)
+
 class PreloadExample extends Component {
   state = {
     show: false,
     url: IMAGE_URL,
   }
 
-  bustAndPreload = () => {
+  bustCache = () => {
     const key = uuid()
     const bust = `?bust=${key}`
     // Preload images. This can be called anywhere.
     const url = IMAGE_URL + bust
-    FastImage.preload([{ uri: url }])
+    this.setState({
-    this.setState({ url, show: false })
+      url,
+      show: false,
+    })
+  }
+
+  preload = () => {
+    FastImage.preload([{ uri: this.state.url }])
   }
 
   showImage = () => {
@@ -34,18 +43,25 @@ class PreloadExample extends Component {
       <View>
         <Section>
           <FeatureText text="• Preloading." />
+          <FeatureText text="• Progress indication using react-native-image-progress." />
         </Section>
         <SectionFlex style={styles.section} onPress={this.props.onPressReload}>
           {this.state.show ? (
-            <FastImage style={styles.image} source={{ uri: this.state.url }} />
+            <Image style={styles.image} source={{ uri: this.state.url }} />
           ) : (
             <View style={styles.image} />
           )}
-          <Button
+          <View style={{ flexDirection: 'row', marginHorizontal: 10 }}>
-            text="Bust cache and preload."
+            <View style={{ flex: 1 }}>
-            onPress={this.bustAndPreload}
+              <Button text="Bust" onPress={this.bustCache} />
-          />
+            </View>
-          <Button text="Render image." onPress={this.showImage} />
+            <View style={{ flex: 1 }}>
+              <Button text="Preload" onPress={this.preload} />
+            </View>
+            <View style={{ flex: 1 }}>
+              <Button text="Render" onPress={this.showImage} />
+            </View>
+          </View>
         </SectionFlex>
       </View>
     )

example/package.json

@@ -9,7 +9,8 @@
 	"dependencies": {
 		"react": "16.0.0",
 		"react-native": "0.50.4",
-		"react-native-fast-image": "file:../react-native-fast-image-2.0.0.tgz",
+		"react-native-fast-image": "file:../react-native-fast-image-2.2.5.tgz",
+		"react-native-image-progress": "^1.1.0",
 		"react-native-vector-icons": "^4.4.2",
 		"react-navigation": "^1.0.0-beta.21",
 		"react-timeout": "^1.0.1",

ios/FastImage/FFFastImageView.m

@@ -2,8 +2,8 @@
 
 @implementation FFFastImageView {
     BOOL hasSentOnLoadStart;
-    BOOL isComplete;
+    BOOL hasCompleted;
-    BOOL hasError;
+    BOOL hasErrored;
 }
 
 - (void)setResizeMode:(RCTResizeMode)resizeMode
@@ -16,18 +16,25 @@
 
 - (void)setOnFastImageLoadEnd:(RCTBubblingEventBlock)onFastImageLoadEnd {
     _onFastImageLoadEnd = onFastImageLoadEnd;
-    if (isComplete) {
+    if (hasCompleted) {
         _onFastImageLoadEnd(@{});
     }
 }
 
 - (void)setOnFastImageLoad:(RCTBubblingEventBlock)onFastImageLoad {
     _onFastImageLoad = onFastImageLoad;
-    if (isComplete && hasError == NO) {
+    if (hasCompleted) {
         _onFastImageLoad(@{});
     }
 }
 
+- (void)setOnFastImageError:(RCTDirectEventBlock)onFastImageError {
+    _onFastImageError = onFastImageError;
+    if (hasErrored) {
+        _onFastImageError(@{});
+    }
+}
+
 - (void)setOnFastImageLoadStart:(RCTBubblingEventBlock)onFastImageLoadStart {
     if (_source && !hasSentOnLoadStart) {
         _onFastImageLoadStart = onFastImageLoadStart;
@@ -41,16 +48,13 @@
 
 - (void)setSource:(FFFastImageSource *)source {
     if (_source != source) {
-        isComplete = NO;
-        hasError = NO;
-
         _source = source;
-
+        
         // Set headers.
         [_source.headers enumerateKeysAndObjectsUsingBlock:^(NSString *key, NSString* header, BOOL *stop) {
             [[SDWebImageDownloader sharedDownloader] setValue:header forHTTPHeaderField:key];
         }];
-
+        
         // Set priority.
         SDWebImageOptions options = 0;
         options |= SDWebImageRetryFailed;
@@ -65,33 +69,33 @@
                 options |= SDWebImageHighPriority;
                 break;
         }
-
+        
         if (_onFastImageLoadStart) {
             _onFastImageLoadStart(@{});
             hasSentOnLoadStart = YES;
         } {
             hasSentOnLoadStart = NO;
         }
-
+        hasCompleted = NO;
+        hasErrored = NO;
+        
         // Load the new source.
         [self sd_setImageWithURL:_source.uri
                 placeholderImage:nil
                          options:options
                         progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) {
-                            double progress = MIN(1, MAX(0, (double) receivedSize / (double) expectedSize));
                             if (_onFastImageProgress) {
                                 _onFastImageProgress(@{
-                                    @"loaded": @(receivedSize),
+                                                       @"loaded": @(receivedSize),
-                                    @"total": @(expectedSize)
+                                                       @"total": @(expectedSize)
-                                });
+                                                       });
                             }
                         } completed:^(UIImage * _Nullable image,
                                       NSError * _Nullable error,
                                       SDImageCacheType cacheType,
                                       NSURL * _Nullable imageURL) {
-                            isComplete = YES;
                             if (error) {
-                                hasError = YES;
+                                hasErrored = YES;
                                 if (_onFastImageError) {
                                     _onFastImageError(@{});
                                     if (_onFastImageLoadEnd) {
@@ -99,6 +103,7 @@
                                     }
                                 }
                             } else {
+                                hasCompleted = YES;
                                 if (_onFastImageLoad) {
                                     _onFastImageLoad(@{});
                                     if (_onFastImageLoadEnd) {