react-native-fast-image 8.20.0 → 8.22.0

package/ios/FastImage/FFFastImageView.m

@@ -5,6 +5,7 @@
 #import <SDWebImage/SDWebImageError.h>
 #import <SDWebImage/SDImageTransformer.h>
 #import "FFFDownsampledImage.h"
+#import <Accelerate/Accelerate.h>
 
 @interface FFFastImageView ()
 
@@ -16,9 +17,20 @@
 
 @property(nonatomic, strong) NSDictionary* onLoadEvent;
 @property(nonatomic, strong) NSDictionary* onErrorEvent;
-// The image before tinting, kept while a tint is applied so the tint can be
-// changed or removed. nil when there's no tint (super.image is untinted).
-@property(nonatomic, strong) UIImage* untintedImage;
+// The image before tinting and blurring, kept while either is applied so they
+// can be changed or removed. nil when neither is (super.image is the image).
+@property(nonatomic, strong) UIImage* originalImage;
+// Counts images set, so a blur that finishes can tell if it's still current.
+@property(nonatomic, assign) NSUInteger imageCount;
+// The view's size when the image showing was blurred.
+@property(nonatomic, assign) CGSize blurredForSize;
+// 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).
+@property(nonatomic, assign) BOOL fadesBlurredImage;
+// The image being blurred is the first loaded one the view shows: until it's
+// blurred, the view shows no loaded image (nothing, or defaultSource).
+@property(nonatomic, assign) BOOL blursOverNothing;
 // Whether the current load was already restarted after the app came back
 // from the background (see downloadImage:).
 @property(nonatomic, assign) BOOL retriedAfterBackground;
@@ -41,6 +53,8 @@
 // When the app last went to the background (CACurrentMediaTime), or 0.
 static CFTimeInterval FFFEnteredBackgroundAt = 0;
 
+static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, BOOL downscale);
+
 @implementation FFFastImageView
 
 + (void) initialize {
@@ -108,6 +122,77 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
     }
 }
 
+// Whether a loaded image fades in (the `transition` prop). Over a loaded
+// image (a new source) only with betweenImages: otherwise it replaces it at
+// once, as Android's image libraries fade an image in from nothing and never
+// between images. Then as SDWebImage's transitions and those libraries
+// decide: from the memory cache it shows at once (skipOnCacheHit 'memory',
+// the default), and from the disk cache too with 'all'. Downloads, local
+// files and bundled images fade.
+- (BOOL) fadesImageFromCache: (SDImageCacheType)cacheType {
+    if (self.transitionDuration <= 0 || ([self displaysLoadedImage] && !self.transitionBetweenImages)) {
+        return NO;
+    }
+    NSString* skip = self.transitionSkipOnCacheHit;
+    if ([skip isEqualToString: @"none"]) {
+        return YES;
+    }
+    if (cacheType == SDImageCacheTypeMemory) {
+        return NO;
+    }
+    // SDWebImage also keeps local files and bundled images in its disk cache,
+    // so with 'all' they usually only fade the first time.
+    return !(cacheType == SDImageCacheTypeDisk && [skip isEqualToString: @"all"]);
+}
+
+// Whether the view shows a loaded image now: a loaded image that's still
+// being blurred isn't showing yet.
+- (BOOL) displaysLoadedImage {
+    return self.showsLoadedImage && !self.blursOverNothing;
+}
+
+// Shows a loaded image, fading it in over what the view shows if `fade`. A
+// blurred image shows, and fades in, once it's blurred.
+- (void) showLoadedImage: (UIImage*)image fade: (BOOL)fade {
+    if ([self blurs: image]) {
+        self.blursOverNothing = ![self displaysLoadedImage];
+        self.fadesBlurredImage = fade;
+        self.image = image;
+        return;
+    }
+    self.blursOverNothing = NO;
+    self.fadesBlurredImage = NO;
+    if (fade) {
+        [self fadeIn: ^{
+            self.image = image;
+        }];
+    } else {
+        self.image = image;
+    }
+}
+
+// Makes the change (showing another image), fading it in over what the view
+// showed.
+- (void) fadeIn: (void (^)(void))change {
+    if (!super.image || !self.layer.presentationLayer) {
+        // Nothing to cross-dissolve from: the view shows no image, or isn't
+        // on screen yet (e.g. a new view whose image loads as it mounts),
+        // where a cross-dissolve has nothing drawn to start from and shows
+        // the image at once. Fade the view in instead.
+        change();
+        CABasicAnimation* fadeIn = [CABasicAnimation animationWithKeyPath: @"opacity"];
+        fadeIn.fromValue = @0;
+        fadeIn.duration = self.transitionDuration / 1000;
+        [self.layer addAnimation: fadeIn forKey: @"FFFFadeIn"];
+        return;
+    }
+    [UIView transitionWithView: self
+                      duration: self.transitionDuration / 1000
+                       options: UIViewAnimationOptionTransitionCrossDissolve | UIViewAnimationOptionAllowUserInteraction
+                    animations: change
+                    completion: nil];
+}
+
 - (void) setPaused: (BOOL)paused {
     if (_paused == paused) {
         return;
@@ -128,6 +213,10 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
     if (_resizeMode != resizeMode) {
         _resizeMode = resizeMode;
         [self updateContentMode];
+        // The blur is made for the size the image is shown at.
+        if ([self blurs: self.originalImage]) {
+            [self setImage: self.originalImage];
+        }
     }
 }
 
@@ -153,6 +242,7 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
 - (void) layoutSubviews {
     [super layoutSubviews];
     [self updateContentMode];
+    [self blurAgainIfResized];
     if (self.waitsForSize) {
         if ([self hasSize]) {
             [self reloadImage];
@@ -198,8 +288,16 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
 
 - (void) setImageColor: (UIColor*)imageColor {
     _imageColor = imageColor;
-    // Re-apply to the untinted image, so the tint can change or be removed.
-    UIImage* image = self.untintedImage ?: super.image;
+    // A blurred image is a still image: show it with the new tint, without
+    // blurring it again.
+    if ([self blurs: self.originalImage]) {
+        if (self.blurredImage) {
+            [self showImage: self.blurredImage];
+        }
+        return;
+    }
+    // Re-apply to the original image, so the tint can change or be removed.
+    UIImage* image = self.originalImage ?: super.image;
     if (image) {
         // SDAnimatedImageView ignores the image it already shows, which would
         // keep an animated image's frames as they were tinted.
@@ -215,14 +313,36 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
 }
 
 - (void) setImage: (UIImage*)image {
-    // Tinted as React Native's Image does it: UIKit draws a 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.
+    self.imageCount++;
+    if ([self blurs: image]) {
+        self.originalImage = image;
+        self.blurredImage = nil;
+        [self blurImage: image];
+        return;
+    }
+    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
+    // happens now.
+    if (self.fadesBlurredImage) {
+        self.fadesBlurredImage = NO;
+        [self fadeIn: ^{
+            [self showImage: image];
+        }];
+    } else {
+        [self showImage: image];
+    }
+}
+
+// Shows the image, tinted as React Native's Image does it: UIKit draws a
+// 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.
+- (void) showImage: (UIImage*)image {
     UIColor* tint = image ? self.imageColor : nil;
     BOOL animated = [image conformsToProtocol: @protocol(SDAnimatedImage)] && [(id<SDAnimatedImage>)image animatedImageFrameCount] > 1;
-    self.untintedImage = tint ? image : nil;
     self.tintColor = tint;
     if ([self tintsFrames]) {
         [self setValue: tint && animated ? [SDImageTintTransformer transformerWithColor: tint] : nil forKey: @"animationTransformer"];
@@ -247,6 +367,187 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
     [self updateContentMode];
 }
 
+- (void) setBlurRadius: (CGFloat)blurRadius {
+    if (_blurRadius == blurRadius) {
+        return;
+    }
+    _blurRadius = blurRadius;
+    // Re-apply to the original image, so the blur can change or be removed.
+    UIImage* image = self.originalImage ?: super.image;
+    if (image) {
+        [self setImage: image];
+    }
+}
+
+// Whether the image is blurred: a loaded image, not defaultSource (as with
+// React Native's Image, and on Android).
+- (BOOL) blurs: (UIImage*)image {
+    return _blurRadius > 0 && image && image != _defaultSource;
+}
+
+// Blurs the image off the main thread, and shows it (tinted as any image) unless
+// another image was set meanwhile. Until then the view keeps showing what it
+// showed: never the image without the blur. An animated image shows its first
+// frame.
+- (void) blurImage: (UIImage*)image {
+    // Not laid out yet (an image from the memory cache is set before the
+    // view's first layout): it's blurred for its size once it has one
+    // (blurAgainIfResized), instead of twice.
+    if (![self hasSize]) {
+        self.blurredForSize = CGSizeZero;
+        return;
+    }
+    CGFloat screenScale = self.window.screen.scale ?: [UIScreen mainScreen].scale;
+    // How many pixels on screen a pixel of the image takes.
+    CGFloat shownScale = [self shownScale: image] * screenScale / image.scale;
+    // Blurred at the size it's shown at (a blurred image needs no more
+    // detail), or at its own size if it's shown larger.
+    CGFloat scale = MIN(shownScale, 1);
+    // The radius in pixels of the image that's blurred.
+    CGFloat radius = _blurRadius * screenScale * scale / shownScale;
+    // Pixelated images are drawn larger without smoothing, so a smaller copy
+    // would show its pixels.
+    BOOL downscale = ![_imageRendering isEqualToString: @"pixelated"];
+    NSUInteger count = self.imageCount;
+    self.blurredForSize = self.bounds.size;
+    __weak typeof(self) weakSelf = self;
+    dispatch_async(dispatch_get_global_queue(QOS_CLASS_USER_INITIATED, 0), ^{
+        UIImage* blurred = FFFBlurredImage(image, scale, radius, downscale);
+        dispatch_async(dispatch_get_main_queue(), ^{
+            [weakSelf showBlurredImage: blurred count: count];
+        });
+    });
+}
+
+- (void) showBlurredImage: (UIImage*)image count: (NSUInteger)count {
+    if (self.imageCount == count) {
+        self.blurredImage = image;
+        self.blursOverNothing = NO;
+        if (self.fadesBlurredImage) {
+            self.fadesBlurredImage = NO;
+            [self fadeIn: ^{
+                [self showImage: image];
+            }];
+        } else {
+            [self showImage: image];
+        }
+    }
+}
+
+// Points on screen per point of the image, for the view's size and
+// resizeMode, or 1 before the view has a size.
+- (CGFloat) shownScale: (UIImage*)image {
+    CGSize size = image.size;
+    CGSize view = self.bounds.size;
+    if (size.width <= 0 || size.height <= 0 || view.width <= 0 || view.height <= 0) {
+        return 1;
+    }
+    CGFloat x = view.width / size.width;
+    CGFloat y = view.height / size.height;
+    switch (_resizeMode) {
+        case RCTResizeModeCover:
+            return MAX(x, y);
+        case RCTResizeModeContain:
+            return MIN(x, y);
+        case RCTResizeModeStretch:
+            return sqrt(x * y);
+        case RCTResizeModeCenter:
+            return MIN(MIN(x, y), 1);
+        default:
+            return 1;
+    }
+}
+
+// The view's size changed a lot (by more than a fifth either way) since the
+// image was blurred, which was for the size it was shown at then: blur it
+// again for the new size.
+- (void) blurAgainIfResized {
+    if (![self blurs: self.originalImage] || ![self hasSize]) {
+        return;
+    }
+    CGSize view = self.bounds.size;
+    CGSize blurred = self.blurredForSize;
+    if (blurred.width > 0 && blurred.height > 0 &&
+        view.width <= blurred.width * 1.2 && blurred.width <= view.width * 1.2 &&
+        view.height <= blurred.height * 1.2 && blurred.height <= view.height * 1.2) {
+        return;
+    }
+    [self setImage: self.originalImage];
+}
+
+// The image (its first frame, for an animated image) drawn at scale times its
+// size in pixels, and blurred as React Native's Image blurs on iOS: three box
+// blurs, close to a Gaussian blur, with the box size worked out from the
+// radius (in pixels) as the SVG spec describes and halved, as React Native
+// does. A large box blurs a copy 2, 4 or 8 times smaller instead, with a box
+// that much smaller, of at least 11 pixels: away from the edges that matches
+// blurring at full size within a few levels of 255 (about as much as a
+// slightly different radius changes it), for a quarter to a sixty-fourth of
+// the work. It keeps the image's size in points.
+static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, BOOL downscale)
+{
+    if (image.size.width <= 0 || image.size.height <= 0) {
+        return image;
+    }
+    double fullWidth = MAX(1, round(image.size.width * image.scale * scale));
+    double fullHeight = MAX(1, round(image.size.height * image.scale * scale));
+    // At most the image's larger side (a larger box looks the same, and an
+    // absurd radius would overflow).
+    double box = MIN(floor((radius * 3 * sqrt(2 * M_PI) / 4 + 0.5) / 2), MAX(fullWidth, fullHeight));
+    double factor = !downscale ? 1 : box >= 88 ? 8 : box >= 44 ? 4 : box >= 22 ? 2 : 1;
+    size_t width = MAX(1, (size_t) round(fullWidth / factor));
+    size_t height = MAX(1, (size_t) round(fullHeight / factor));
+    // Odd, so it's centered.
+    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);
+    CGColorSpaceRelease(colorSpace);
+    if (!context) {
+        return image;
+    }
+    // Drawn as UIKit draws (top-left origin), so it follows the image's
+    // orientation.
+    CGContextTranslateCTM(context, 0, height);
+    CGContextScaleCTM(context, 1, -1);
+    CGContextSetInterpolationQuality(context, kCGInterpolationHigh);
+    UIGraphicsPushContext(context);
+    [image drawInRect: CGRectMake(0, 0, width, height)];
+    UIGraphicsPopContext();
+
+    if (boxSize > 1) {
+        vImage_Buffer buffer = {
+            .data = CGBitmapContextGetData(context),
+            .height = height,
+            .width = width,
+            .rowBytes = CGBitmapContextGetBytesPerRow(context),
+        };
+        vImage_Buffer other = buffer;
+        other.data = malloc(buffer.rowBytes * height);
+        vImage_Error tempSize = vImageBoxConvolve_ARGB8888(&buffer, &other, NULL, 0, 0, boxSize, boxSize, NULL,
+                                                           kvImageGetTempBufferSize | kvImageEdgeExtend);
+        void* temp = tempSize > 0 ? malloc(tempSize) : NULL;
+        if (other.data && temp) {
+            vImageBoxConvolve_ARGB8888(&buffer, &other, temp, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);
+            vImageBoxConvolve_ARGB8888(&other, &buffer, temp, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);
+            vImageBoxConvolve_ARGB8888(&buffer, &other, temp, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);
+            memcpy(buffer.data, other.data, buffer.rowBytes * height);
+        }
+        free(other.data);
+        free(temp);
+    }
+
+    CGImageRef cgImage = CGBitmapContextCreateImage(context);
+    CGContextRelease(context);
+    if (!cgImage) {
+        return image;
+    }
+    // The same size in points, also when it's smaller.
+    UIImage* blurred = [UIImage imageWithCGImage: cgImage scale: width / image.size.width orientation: UIImageOrientationUp];
+    CGImageRelease(cgImage);
+    return blurred;
+}
+
 // The error's description, with the HTTP status code when there is one (as on
 // Android): SDWebImage keeps the code out of the description. Also for preload
 // results.
@@ -306,8 +607,9 @@ NSString *FFFErrorMessage(NSError *error)
     if (changed) {
         // The view shows other content now: don't keep the current image
         // while the next one loads (reloadImage clears it), even if the
-        // source is the same.
+        // source is the same, nor a fade from it.
         self.showsLoadedImage = NO;
+        [self.layer removeAllAnimations];
         _needsReload = YES;
     }
 }
@@ -381,7 +683,7 @@ NSString *FFFErrorMessage(NSError *error)
         return;
     }
     // Already at full size (it's no larger than the view it was decoded for).
-    UIImage* image = self.untintedImage ?: super.image;
+    UIImage* image = self.originalImage ?: super.image;
     if (self.hasCompleted && CGSizeEqualToSize(image.size, [FFFDownsampledImage sourceSizeOfImage: image])) {
         return;
     }
@@ -439,7 +741,7 @@ NSString *FFFErrorMessage(NSError *error)
                 }
                 return;
             }
-            [self setImage: image];
+            [self showLoadedImage: image fade: [self fadesImageFromCache: SDImageCacheTypeNone]];
             if (self.onFastImageProgress) {
                 self.onFastImageProgress(@{
                         @"loaded": @(1),
@@ -592,13 +894,18 @@ NSString *FFFErrorMessage(NSError *error)
     // class to SDAnimatedImage (loadContext sets it). Only while this is the
     // current load: SDWebImage sets the placeholder when a load it cancelled
     // completes, which could replace a newer image.
+    UIImage* placeholder = _defaultSource;
     SDSetImageBlock setImage = ^(UIImage* _Nullable image, NSData* _Nullable data, SDImageCacheType cacheType, NSURL* _Nullable imageURL) {
-        if (weakSelf.loadCount == load) {
-            weakSelf.image = image;
+        if (weakSelf.loadCount != load) {
+            return;
         }
+        // The loaded image, not defaultSource (shown while it loads, or if it
+        // fails).
+        BOOL loaded = image && image != placeholder;
+        [weakSelf showLoadedImage: image fade: loaded && [weakSelf fadesImageFromCache: cacheType]];
     };
     [self sd_internalSetImageWithURL: url
-                    placeholderImage: _defaultSource
+                    placeholderImage: placeholder
                              options: options
                              context: context
                        setImageBlock: setImage

package/ios/FastImage/FFFastImageViewManager.m

@@ -107,7 +107,11 @@ RCT_EXPORT_VIEW_PROPERTY(recyclingKey, NSString)
 RCT_EXPORT_VIEW_PROPERTY(loopCount, NSInteger)
 RCT_EXPORT_VIEW_PROPERTY(imageRendering, NSString)
 RCT_EXPORT_VIEW_PROPERTY(paused, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(transitionDuration, double)
+RCT_EXPORT_VIEW_PROPERTY(transitionBetweenImages, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(transitionSkipOnCacheHit, NSString)
 RCT_EXPORT_VIEW_PROPERTY(downsample, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(blurRadius, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageLoadStart, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageProgress, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageError, RCTDirectEventBlock)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-fast-image",
-    "version": "8.20.0",
+    "version": "8.22.0",
     "description": "🚩 FastImage, performant React Native image component.",
     "keywords": [
         "cache",