react-native-fast-image 9.3.7 → 10.0.0

package/ios/FastImage/FFFastImageView.m

@@ -9,7 +9,6 @@
 
 @interface FFFastImageView ()
 
-@property(nonatomic, assign) BOOL hasSentOnLoadStart;
 @property(nonatomic, assign) BOOL hasCompleted;
 @property(nonatomic, assign) BOOL hasErrored;
 // Whether the latest change of props requires the image to be reloaded
@@ -24,8 +23,6 @@
 @property(nonatomic, assign) NSUInteger imageCount;
 // The view's size when the image showing was blurred.
 @property(nonatomic, assign) CGSize blurredForSize;
-// The view's size when the image showing was tiled (resizeMode repeat).
-@property(nonatomic, assign) CGSize tiledForSize;
 // The blurred image showing (untinted), so a tint change can re-show it.
 @property(nonatomic, strong) UIImage* blurredImage;
 // The image being blurred fades in once it's blurred (transition).
@@ -58,6 +55,13 @@
 @property(nonatomic, assign) BOOL decodedCover;
 // Counts loads, so a quiet reload's completion can tell if it's still current.
 @property(nonatomic, assign) NSUInteger loadCount;
+// The frame the view was laid out at (the box the image fits in), and how far
+// objectPosition moves the view from it (see updatePosition).
+@property(nonatomic, assign) CGRect box;
+@property(nonatomic, assign) CGPoint positionOffset;
+// The view's own mask, which clips it to the box while it's moved, when React
+// Native gives it none (the view doesn't clip: overflow visible).
+@property(nonatomic, strong) CALayer* ownMask;
 
 @end
 
@@ -72,6 +76,7 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     if (self != [FFFastImageView class]) {
         return;
     }
+    FFFApplyCacheLimits();
     [[NSNotificationCenter defaultCenter] addObserverForName: UIApplicationDidEnterBackgroundNotification
                                                       object: nil
                                                        queue: [NSOperationQueue mainQueue]
@@ -82,8 +87,11 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 
 - (id) init {
     self = [super init];
-    self.resizeMode = RCTResizeModeCover;
+    // objectFit cover (FFFObjectFitCover, 0).
+    self.contentMode = UIViewContentModeScaleAspectFill;
     self.clipsToBounds = YES;
+    _objectPositionX = 0.5;
+    _objectPositionY = 0.5;
     // The tint (tintColor) stays as it is while an alert or sheet is shown,
     // rather than dimming like the system's controls.
     self.tintAdjustmentMode = UIViewTintAdjustmentModeNormal;
@@ -201,10 +209,18 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
         [self.layer addAnimation: fadeIn forKey: @"FFFFadeIn"];
         return;
     }
-    [UIView transitionWithView: self
+    // On the view it's in, which doesn't move, with the change itself not
+    // animated: objectPosition moves this view for the new image
+    // (updatePosition), which in a transition of this view was animated while
+    // its mask moved at once. The old image stays where it was while the new
+    // one fades in where it goes.
+    UIView* container = self.superview ?: self;
+    [UIView transitionWithView: container
                       duration: self.transitionDuration / 1000
                        options: UIViewAnimationOptionTransitionCrossDissolve | UIViewAnimationOptionAllowUserInteraction
-                    animations: change
+                    animations: ^{
+                        [UIView performWithoutAnimation: change];
+                    }
                     completion: nil];
 }
 
@@ -224,50 +240,157 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     }
 }
 
-- (void) setResizeMode: (FFFResizeMode)resizeMode {
-    if (_resizeMode != resizeMode) {
-        BOOL repeated = _resizeMode == RCTResizeModeRepeat;
-        _resizeMode = resizeMode;
+- (void) setObjectFit: (FFFObjectFit)objectFit {
+    if (_objectFit != objectFit) {
+        _objectFit = objectFit;
         [self updateContentMode];
-        // The blur is made for the size the image is shown at, and repeat
-        // shows the image tiled: show it again.
-        UIImage* image = self.originalImage ?: super.image;
-        if ([self blurs: self.originalImage] || ((repeated || resizeMode == RCTResizeModeRepeat) && image)) {
-            [self setImage: image];
+        // The blur is made for the size the image is shown at: show it again.
+        if ([self blurs: self.originalImage]) {
+            [self setImage: self.originalImage];
         }
     }
 }
 
-// The content mode for resizeMode. `center` scales an image larger than the
-// view down to fit, as React Native's Image and Android do (#866); only a
-// smaller one is shown at its own size. UIViewContentModeCenter alone showed
-// large images at full size, cropped. So it depends on the image and the
-// view's size. `none` is the image at its own size, centered, whatever its
-// size (cropped by the view).
+// The content mode for objectFit. `scale-down` scales an image larger than
+// the view down to fit, and shows a smaller one at its own size
+// (UIViewContentModeCenter alone would show large images at full size,
+// cropped), so it depends on the image and the view's size. `none` is the
+// image at its own size, centered, whatever its size (cropped by the view).
 - (void) updateContentMode {
-    UIViewContentMode contentMode = (UIViewContentMode) _resizeMode;
-    if (_resizeMode == FFFResizeModeNone) {
-        contentMode = UIViewContentModeCenter;
-    } else if (_resizeMode == RCTResizeModeRepeat) {
-        // The tiled image (see tiledImage:) fills the view.
-        contentMode = UIViewContentModeScaleToFill;
-    } else if (_resizeMode == RCTResizeModeCenter) {
-        CGSize imageSize = super.image.size;
-        CGSize viewSize = self.bounds.size;
-        if (imageSize.width > viewSize.width || imageSize.height > viewSize.height) {
+    UIViewContentMode contentMode;
+    switch (_objectFit) {
+        case FFFObjectFitContain:
             contentMode = UIViewContentModeScaleAspectFit;
+            break;
+        case FFFObjectFitFill:
+            contentMode = UIViewContentModeScaleToFill;
+            break;
+        case FFFObjectFitNone:
+            contentMode = UIViewContentModeCenter;
+            break;
+        case FFFObjectFitScaleDown: {
+            CGSize imageSize = super.image.size;
+            CGSize viewSize = self.bounds.size;
+            contentMode = imageSize.width > viewSize.width || imageSize.height > viewSize.height
+                ? UIViewContentModeScaleAspectFit
+                : UIViewContentModeCenter;
+            break;
         }
+        case FFFObjectFitCover:
+        default:
+            contentMode = UIViewContentModeScaleAspectFill;
+            break;
     }
     if (self.contentMode != contentMode) {
         self.contentMode = contentMode;
     }
+    [self updatePosition];
+}
+
+- (void) setObjectPositionX: (CGFloat)objectPositionX {
+    _objectPositionX = objectPositionX;
+    [self updatePosition];
+}
+
+- (void) setObjectPositionXOffset: (CGFloat)objectPositionXOffset {
+    _objectPositionXOffset = objectPositionXOffset;
+    [self updatePosition];
+}
+
+- (void) setObjectPositionY: (CGFloat)objectPositionY {
+    _objectPositionY = objectPositionY;
+    [self updatePosition];
+}
+
+- (void) setObjectPositionYOffset: (CGFloat)objectPositionYOffset {
+    _objectPositionYOffset = objectPositionYOffset;
+    [self updatePosition];
+}
+
+// The frame React Native lays the view out at: the box the image fits in. The
+// view itself is moved from it by objectPosition (see updatePosition).
+- (void) setFrame: (CGRect)frame {
+    self.box = frame;
+    [super setFrame: CGRectOffset(frame, self.positionOffset.x, self.positionOffset.y)];
+}
+
+// objectPosition: where the image is in the view, as CSS places it. The
+// content mode centers the image, so the view moves by the difference,
+// keeping its size: React Native's mask for its rounded corners (made for its
+// bounds) only has to move back (see updateMask). Not moved, as most images
+// are, the view clips to its bounds as before.
+- (void) updatePosition {
+    CGPoint offset = [self imageOffset];
+    if (!CGPointEqualToPoint(offset, self.positionOffset)) {
+        self.positionOffset = offset;
+        [super setFrame: CGRectOffset(self.box, offset.x, offset.y)];
+    }
+    [self updateMask];
+}
+
+// How far objectPosition moves the image from the center: on each axis its
+// left or top edge is at (view - image) * fraction + offset, where the
+// content mode centers it at (view - image) / 2. Nothing for fill, which
+// fills the view.
+- (CGPoint) imageOffset {
+    CGSize view = self.box.size;
+    CGSize size = super.image.size;
+    if (size.width <= 0 || size.height <= 0 || view.width <= 0 || view.height <= 0) {
+        return CGPointZero;
+    }
+    CGFloat scale;
+    switch (self.contentMode) {
+        case UIViewContentModeScaleAspectFill:
+            scale = MAX(view.width / size.width, view.height / size.height);
+            break;
+        case UIViewContentModeScaleAspectFit:
+            scale = MIN(view.width / size.width, view.height / size.height);
+            break;
+        case UIViewContentModeCenter:
+            scale = 1;
+            break;
+        default:
+            return CGPointZero;
+    }
+    CGFloat x = (view.width - size.width * scale) * (_objectPositionX - 0.5) + _objectPositionXOffset;
+    CGFloat y = (view.height - size.height * scale) * (_objectPositionY - 0.5) + _objectPositionYOffset;
+    return CGPointMake(isfinite(x) ? x : 0, isfinite(y) ? y : 0);
+}
+
+- (void) updateMask {
+    CGPoint offset = self.positionOffset;
+    BOOL moved = offset.x != 0 || offset.y != 0;
+    // Moved, the view's bounds aren't the box: the mask clips it.
+    self.clipsToBounds = !moved;
+    CALayer* mask = self.layer.mask;
+    if (!moved && (!mask || CGPointEqualToPoint(mask.frame.origin, CGPointZero)) && mask != self.ownMask) {
+        return;
+    }
+    [CATransaction begin];
+    [CATransaction setDisableActions: YES];
+    if (mask && mask != self.ownMask) {
+        // React Native's (the box with its rounded corners, in the view's
+        // bounds): back on the box.
+        CGRect frame = mask.frame;
+        frame.origin = CGPointMake(-offset.x, -offset.y);
+        mask.frame = frame;
+    } else if (moved) {
+        if (!self.ownMask) {
+            self.ownMask = [CALayer layer];
+            self.ownMask.backgroundColor = [UIColor blackColor].CGColor;
+        }
+        self.ownMask.frame = CGRectMake(-offset.x, -offset.y, self.box.size.width, self.box.size.height);
+        self.layer.mask = self.ownMask;
+    } else if (mask) {
+        self.layer.mask = nil;
+    }
+    [CATransaction commit];
 }
 
 - (void) layoutSubviews {
     [super layoutSubviews];
     [self updateContentMode];
     [self blurAgainIfResized];
-    [self tileAgainIfResized];
     if (self.waitsForSize) {
         // An image in the memory cache shows in this frame. Others start
         // loading from didSetProps's block, after layout, in the order the
@@ -282,40 +405,6 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     }
 }
 
-- (void) setOnFastImageLoadEnd: (RCTDirectEventBlock)onFastImageLoadEnd {
-    _onFastImageLoadEnd = onFastImageLoadEnd;
-    if (self.hasCompleted && _onFastImageLoadEnd) {
-        _onFastImageLoadEnd([self loadEndEvent: YES]);
-    }
-}
-
-- (void) setOnFastImageLoad: (RCTDirectEventBlock)onFastImageLoad {
-    _onFastImageLoad = onFastImageLoad;
-    if (self.hasCompleted && _onFastImageLoad) {
-        _onFastImageLoad(self.onLoadEvent);
-    }
-}
-
-- (void) setOnFastImageError: (RCTDirectEventBlock)onFastImageError {
-    _onFastImageError = onFastImageError;
-    if (self.hasErrored && _onFastImageError) {
-        _onFastImageError(self.onErrorEvent);
-    }
-}
-
-- (void) setOnFastImageLoadStart: (RCTDirectEventBlock)onFastImageLoadStart {
-    // Send it for a load that has already started. When a reload is pending
-    // (e.g. source set in the same update), reloadImage sends it.
-    if (_source && !_needsReload && !self.hasSentOnLoadStart && onFastImageLoadStart) {
-        _onFastImageLoadStart = onFastImageLoadStart;
-        onFastImageLoadStart(@{});
-        self.hasSentOnLoadStart = YES;
-    } else {
-        _onFastImageLoadStart = onFastImageLoadStart;
-        self.hasSentOnLoadStart = NO;
-    }
-}
-
 - (void) setImageColor: (UIColor*)imageColor {
     _imageColor = imageColor;
     // A blurred image is a still image: show it with the new tint, without
@@ -336,12 +425,6 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     }
 }
 
-// Whether SDAnimatedImageView can tint the frames of an animated image as
-// they're decoded (animationTransformer, SDWebImage 5.20+).
-- (BOOL) tintsFrames {
-    return [self respondsToSelector: @selector(setAnimationTransformer:)];
-}
-
 - (void) setImage: (UIImage*)image {
     self.imageCount++;
     if ([self blurs: image]) {
@@ -350,8 +433,8 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
         [self blurImage: image];
         return;
     }
-    // Kept to tint, or tile (resizeMode repeat), it again.
-    self.originalImage = image && (self.imageColor || _resizeMode == RCTResizeModeRepeat) ? image : nil;
+    // Kept to tint it again.
+    self.originalImage = image && self.imageColor ? image : nil;
     self.blurredImage = nil;
     self.blursOverNothing = NO;
     // The blur was removed before it was ready: the fade it was waiting for
@@ -389,17 +472,13 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 // template image in the view's tintColor, so no tinted copy of the image is
 // made. SDAnimatedImageView draws the frames of an animated image itself,
 // without the tint, so each frame is tinted as it's decoded (source-in, as the
-// template is), or, before SDWebImage 5.20, the first frame shows.
+// template is).
 - (void) showImage: (UIImage*)image {
     UIColor* tint = image ? self.imageColor : nil;
-    // resizeMode repeat tiles an animated image's first frame (tiledImage:).
-    BOOL repeats = image && _resizeMode == RCTResizeModeRepeat;
-    BOOL animated = !repeats && [image conformsToProtocol: @protocol(SDAnimatedImage)] && [(id<SDAnimatedImage>)image animatedImageFrameCount] > 1;
+    BOOL animated = [image conformsToProtocol: @protocol(SDAnimatedImage)] && [(id<SDAnimatedImage>)image animatedImageFrameCount] > 1;
     self.tintColor = tint;
-    if ([self tintsFrames]) {
-        [self setValue: tint && animated ? [SDImageTintTransformer transformerWithColor: tint] : nil forKey: @"animationTransformer"];
-    }
-    if (tint && animated && [self tintsFrames]) {
+    self.animationTransformer = tint && animated ? [SDImageTintTransformer transformerWithColor: tint] : nil;
+    if (tint && animated) {
         BOOL changed = super.image != image;
         super.image = image;
         // Shows the first frame tinted now, also while paused (the player
@@ -410,69 +489,18 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
         }
     } else {
         if (tint) {
-            if (animated) {
-                image = [UIImage imageWithCGImage: image.CGImage scale: image.scale orientation: image.imageOrientation];
-            } else if (!image.CGImage && !repeats) {
+            if (!image.CGImage) {
                 // A vector image (an SVG), which UIKit doesn't draw as a
-                // template: drawn into a bitmap at the size it's shown at
-                // (tiledImage: draws one for repeat).
+                // template: drawn into a bitmap at the size it's shown at.
                 image = [self rasterizedImage: image];
             }
             image = [image imageWithRenderingMode: UIImageRenderingModeAlwaysTemplate];
         }
-        if (repeats) {
-            image = [self tiledImage: image];
-            self.tiledForSize = self.bounds.size;
-        }
         super.image = image;
     }
     [self updateContentMode];
 }
 
-// resizeMode repeat: the image repeated from the top-left at its own size in
-// pixels (a scaled image, e.g. a bundled @3x one, at its size in points), an
-// animated image's first frame, scaled down to fit the view if it's larger,
-// as React Native's Image does (and Android here).
-- (UIImage*) tiledImage: (UIImage*)image {
-    if (!image.CGImage && image.size.width > 0 && image.size.height > 0) {
-        // A vector image (an SVG): drawn at its own size in pixels (its width
-        // and height), as Android tiles it and as any other image's size is.
-        UIImage* vector = image;
-        UIGraphicsImageRendererFormat* format = [UIGraphicsImageRendererFormat preferredFormat];
-        format.scale = 1;
-        format.opaque = NO;
-        UIGraphicsImageRenderer* renderer = [[UIGraphicsImageRenderer alloc] initWithSize: vector.size format: format];
-        image = [[renderer imageWithActions: ^(UIGraphicsImageRendererContext* context) {
-            [vector drawInRect: CGRectMake(0, 0, vector.size.width, vector.size.height)];
-        }] imageWithRenderingMode: vector.renderingMode];
-    }
-    CGImageRef cgImage = image.CGImage;
-    if (!cgImage) {
-        return image;
-    }
-    CGFloat scale = image.scale > 1 ? image.scale : (self.window.screen.scale ?: [UIScreen mainScreen].scale);
-    CGSize size = CGSizeMake(image.size.width * image.scale / scale, image.size.height * image.scale / scale);
-    CGSize view = self.bounds.size;
-    if (view.width > 0 && view.height > 0 && (size.width > view.width || size.height > view.height)) {
-        scale *= MAX(size.width / view.width, size.height / view.height);
-    }
-    UIImage* still = [[UIImage imageWithCGImage: cgImage scale: scale orientation: image.imageOrientation]
-                      imageWithRenderingMode: image.renderingMode];
-    return [still resizableImageWithCapInsets: UIEdgeInsetsZero resizingMode: UIImageResizingModeTile];
-}
-
-// The view's size changed since the image was tiled, which scales an image
-// larger than the view down to fit it: tile it again.
-- (void) tileAgainIfResized {
-    if (_resizeMode != RCTResizeModeRepeat || CGSizeEqualToSize(self.bounds.size, self.tiledForSize)) {
-        return;
-    }
-    UIImage* image = [self blurs: self.originalImage] ? self.blurredImage : self.originalImage;
-    if (image) {
-        [self showImage: image];
-    }
-}
-
 - (void) setBlurRadius: (CGFloat)blurRadius {
     if (_blurRadius == blurRadius) {
         return;
@@ -541,7 +569,7 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 }
 
 // Points on screen per point of the image, for the view's size and
-// resizeMode, or 1 before the view has a size.
+// objectFit, or 1 before the view has a size.
 - (CGFloat) shownScale: (UIImage*)image {
     CGSize size = image.size;
     CGSize view = self.bounds.size;
@@ -550,14 +578,14 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     }
     CGFloat x = view.width / size.width;
     CGFloat y = view.height / size.height;
-    switch (_resizeMode) {
-        case RCTResizeModeCover:
+    switch (_objectFit) {
+        case FFFObjectFitCover:
             return MAX(x, y);
-        case RCTResizeModeContain:
+        case FFFObjectFitContain:
             return MIN(x, y);
-        case RCTResizeModeStretch:
+        case FFFObjectFitFill:
             return sqrt(x * y);
-        case RCTResizeModeCenter:
+        case FFFObjectFitScaleDown:
             return MIN(MIN(x, y), 1);
         default:
             return 1;
@@ -607,7 +635,7 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     uint32_t boxSize = factor == 1 ? (uint32_t) box | 1 : (uint32_t) round((box / factor - 1) / 2) * 2 + 1;
     CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
     CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace,
-                                                 kCGImageAlphaPremultipliedFirst | kCGBitmapByteOrder32Host);
+                                                 (CGBitmapInfo)kCGImageAlphaPremultipliedFirst | kCGBitmapByteOrder32Host);
     CGColorSpaceRelease(colorSpace);
     if (!context) {
         return image;
@@ -765,6 +793,7 @@ NSString *FFFErrorMessage(NSError *error)
         // source is the same, nor a fade from it.
         self.showsLoadedImage = NO;
         [self.layer removeAllAnimations];
+        [self.superview.layer removeAnimationForKey: kCATransition];
         _needsReload = YES;
     }
 }
@@ -776,7 +805,7 @@ NSString *FFFErrorMessage(NSError *error)
     }
 }
 
-- (void) didSetProps: (NSArray<NSString*>*)changedProps {
+- (void) didSetProps {
     if (_needsReload) {
         // With downsample on, the image is decoded for the view's size, and
         // with several sources one is picked for it, so a view that hasn't
@@ -803,16 +832,15 @@ NSString *FFFErrorMessage(NSError *error)
     }
 }
 
-// Whether images are decoded at about the view's size (downsample, from
-// SDWebImage 5.19, and always for photo library images, which are large and
-// usually shown small: Photos makes them at the size asked for, on any
-// version). Not for `repeat`, which tiles the image at its own size, or
-// `none`, which shows it at its own size.
+// Whether images are decoded at about the view's size (downsample, and always
+// for photo library images, which are large and usually shown small: Photos
+// makes them at the size asked for). Not for `none`, which shows it at its own
+// size.
 - (BOOL) downsamples {
-    if (_resizeMode == RCTResizeModeRepeat || _resizeMode == FFFResizeModeNone) {
+    if (_objectFit == FFFObjectFitNone) {
         return NO;
     }
-    return [_source isPhotoLibrary] || (_downsample && [FFFDownsampledImage isSupported]);
+    return [_source isPhotoLibrary] || _downsample;
 }
 
 // Whether the view has been laid out with an area. One that's 0 wide or tall
@@ -833,7 +861,7 @@ NSString *FFFErrorMessage(NSError *error)
 
 // Whether the image has to cover the box, rather than fit in it.
 - (BOOL) decodeCovers {
-    return _resizeMode == RCTResizeModeCover || _resizeMode == RCTResizeModeStretch;
+    return _objectFit == FFFObjectFitCover || _objectFit == FFFObjectFitFill;
 }
 
 // The view grew (by more than a fifth, as React Native's Image reloads), or
@@ -884,7 +912,7 @@ NSString *FFFErrorMessage(NSError *error)
     // source doesn't start one), and ignore what it still sends (SDWebImage
     // completes a cancelled load with an error; see downloadImage:).
     self.loadCount++;
-    [self sd_cancelCurrentImageLoad];
+    [self sd_cancelLatestImageLoad];
 
     if (_source) {
         // Load base64 images.
@@ -892,9 +920,6 @@ NSString *FFFErrorMessage(NSError *error)
         if (url && [url hasPrefix: @"data:image"]) {
             if (self.onFastImageLoadStart) {
                 self.onFastImageLoadStart(@{});
-                self.hasSentOnLoadStart = YES;
-            } else {
-                self.hasSentOnLoadStart = NO;
             }
             // Use SDWebImage API to support external format like WebP images
             UIImage* image = [UIImage sd_imageWithData: [NSData dataWithContentsOfURL: _source.url]];
@@ -912,7 +937,8 @@ NSString *FFFErrorMessage(NSError *error)
             if (self.onFastImageProgress) {
                 self.onFastImageProgress(@{
                         @"loaded": @(1),
-                        @"total": @(1)
+                        @"total": @(1),
+                        @"progress": @(1)
                 });
             }
             self.hasCompleted = YES;
@@ -937,9 +963,6 @@ NSString *FFFErrorMessage(NSError *error)
 
         if (self.onFastImageLoadStart) {
             self.onFastImageLoadStart(@{});
-            self.hasSentOnLoadStart = YES;
-        } else {
-            self.hasSentOnLoadStart = NO;
         }
         self.hasCompleted = NO;
         self.hasErrored = NO;
@@ -982,8 +1005,7 @@ NSString *FFFErrorMessage(NSError *error)
 // Whether the view loads as it's laid out, so its image shows in this frame:
 // one in the memory cache, where SDWebImage finds it as the load starts, or
 // one that isn't downloaded (no source, which shows defaultSource, or a data
-// uri). Also when that can't be told (an app's own image cache, or an
-// SDWebImage without cacheKeyForURL:context:), as before.
+// uri). Also when that can't be told (an app's own image cache), as before.
 - (BOOL) loadsDuringLayout {
     FFFastImageSource* source = [self picksSource] ? [self sourceForSize] : _source;
     if (!source.url || [source.url.scheme isEqualToString: @"data"]) {
@@ -993,7 +1015,7 @@ NSString *FFFErrorMessage(NSError *error)
         return NO;
     }
     SDWebImageManager* manager = [SDWebImageManager sharedManager];
-    if (![manager.imageCache isKindOfClass: [SDImageCache class]] || ![manager respondsToSelector: @selector(cacheKeyForURL:context:)]) {
+    if (![manager.imageCache isKindOfClass: [SDImageCache class]]) {
         return YES;
     }
     CGSize box = [self decodeBox];
@@ -1062,7 +1084,8 @@ NSString *FFFErrorMessage(NSError *error)
                 if (onProgress) {
                     onProgress(@{
                             @"loaded": @(receivedSize),
-                            @"total": @(expectedSize)
+                            @"total": @(expectedSize),
+                            @"progress": @(MAX(0.0, MIN(1.0, (double)receivedSize / expectedSize)))
                     });
                 }
             });
@@ -1190,9 +1213,23 @@ NSString *FFFErrorMessage(NSError *error)
     }
 }
 
+- (void) stop {
+    self.onFastImageLoadStart = nil;
+    self.onFastImageProgress = nil;
+    self.onFastImageLoad = nil;
+    self.onFastImageError = nil;
+    self.onFastImageLoadEnd = nil;
+    // As a new load does (see reloadImage): a completion still on its way is
+    // ignored, and a load waiting for the view's size doesn't start.
+    self.loadCount++;
+    self.waitsForSize = NO;
+    [self stopWaitingForActive];
+    [self sd_cancelLatestImageLoad];
+}
+
 - (void) dealloc {
     [self stopWaitingForActive];
-    [self sd_cancelCurrentImageLoad];
+    [self sd_cancelLatestImageLoad];
 }
 
 @end

package/ios/FastImage/FFFastImageViewComponentView.h

@@ -0,0 +1,11 @@
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+// The FastImageView component (src/specs) on the New Architecture: shows an
+// FFFastImageView, and passes it the component's props and its events back.
+@interface FFFastImageViewComponentView : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END