react-native-fast-image 8.25.0 → 8.27.0

package/ios/FastImage/FFFastImageView.m

@@ -41,8 +41,17 @@
 // Whether the view shows an image that loaded (not defaultSource or nothing).
 // A new source then keeps it until the new image has loaded (see reloadImage).
 @property(nonatomic, assign) BOOL showsLoadedImage;
-// downsample: a load waits for the view's size (see didSetProps).
+// downsample, or several sources: a load waits for the view's size (see
+// didSetProps).
 @property(nonatomic, assign) BOOL waitsForSize;
+// The `source` prop. With several `sources`, _source is the one picked for
+// the view's size instead.
+@property(nonatomic, strong) FFFastImageSource* propSource;
+// Several sources: the next load switches to another one for a new view
+// size, and the one after it is loading. It's the same picture at another
+// size, so it doesn't fade in.
+@property(nonatomic, assign) BOOL switchesSource;
+@property(nonatomic, assign) BOOL loadsSwitchedSource;
 // The size (in pixels) the image showing or loading was decoded for, and
 // whether it covers it; zero for a full-size image.
 @property(nonatomic, assign) CGSize decodedBox;
@@ -132,7 +141,8 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 // 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)) {
+    if (self.transitionDuration <= 0 || self.loadsSwitchedSource ||
+        ([self displaysLoadedImage] && !self.transitionBetweenImages)) {
         return NO;
     }
     NSString* skip = self.transitionSkipOnCacheHit;
@@ -256,7 +266,7 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
         if ([self hasSize]) {
             [self reloadImage];
         }
-    } else {
+    } else if (![self switchSourceIfResized]) {
         [self reloadIfResized];
     }
 }
@@ -345,6 +355,25 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     }
 }
 
+// A vector image drawn into a bitmap, with its size in points, at a scale
+// that's sharp at the size the view shows it (or its own size before the view
+// has one).
+- (UIImage*) rasterizedImage: (UIImage*)image {
+    CGSize size = image.size;
+    if (size.width <= 0 || size.height <= 0) {
+        return image;
+    }
+    CGSize view = self.bounds.size;
+    CGFloat shown = MAX(1, MAX(view.width / size.width, view.height / size.height));
+    UIGraphicsImageRendererFormat* format = [UIGraphicsImageRendererFormat preferredFormat];
+    format.scale = (self.window.screen.scale ?: [UIScreen mainScreen].scale) * shown;
+    format.opaque = NO;
+    UIGraphicsImageRenderer* renderer = [[UIGraphicsImageRenderer alloc] initWithSize: size format: format];
+    return [renderer imageWithActions: ^(UIGraphicsImageRendererContext* context) {
+        [image drawInRect: CGRectMake(0, 0, size.width, size.height)];
+    }];
+}
+
 // 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,
@@ -372,6 +401,11 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
         if (tint) {
             if (animated) {
                 image = [UIImage imageWithCGImage: image.CGImage scale: image.scale orientation: image.imageOrientation];
+            } else if (!image.CGImage && !repeats) {
+                // 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).
+                image = [self rasterizedImage: image];
             }
             image = [image imageWithRenderingMode: UIImageRenderingModeAlwaysTemplate];
         }
@@ -389,6 +423,18 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 // 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;
@@ -643,12 +689,59 @@ NSString *FFFErrorMessage(NSError *error)
 }
 
 - (void) setSource: (FFFastImageSource*)source {
-    if (_source != source) {
-        _source = source;
+    if (self.propSource != source) {
+        self.propSource = source;
+        if (![self picksSource]) {
+            _source = source;
+        }
         _needsReload = YES;
     }
 }
 
+- (void) setSources: (NSArray<FFFastImageSource*>*)sources {
+    if (_sources != sources) {
+        _sources = [sources copy];
+        if (![self picksSource]) {
+            _source = self.propSource;
+        }
+        _needsReload = YES;
+    }
+}
+
+// Whether the view picks one of several sources for its size.
+- (BOOL) picksSource {
+    return _sources.count > 1;
+}
+
+// Of several sources, the one whose size in pixels is closest to the view's
+// (by pixel count), or the largest while the view has no size (e.g. one sized
+// from onLoad).
+- (FFFastImageSource*) sourceForSize {
+    CGFloat scale = self.window.screen.scale ?: [UIScreen mainScreen].scale;
+    CGFloat viewPixels = self.bounds.size.width * self.bounds.size.height * scale * scale;
+    FFFastImageSource* best = nil;
+    CGFloat bestFit = CGFLOAT_MAX;
+    for (FFFastImageSource* source in _sources) {
+        CGFloat fit = viewPixels > 0 ? ABS(1 - source.pixelCount / viewPixels) : -source.pixelCount;
+        if (!best || fit < bestFit) {
+            best = source;
+            bestFit = fit;
+        }
+    }
+    return best;
+}
+
+// Several sources: another one fits the view's new size better. Loads it,
+// keeping the image showing until then, without a fade (see switchesSource).
+- (BOOL) switchSourceIfResized {
+    if (![self picksSource] || _needsReload || ![self hasSize] || [self sourceForSize] == _source) {
+        return NO;
+    }
+    self.switchesSource = YES;
+    [self reloadImage];
+    return YES;
+}
+
 - (void) setRecyclingKey: (NSString*)recyclingKey {
     if (_recyclingKey == recyclingKey || [_recyclingKey isEqualToString: recyclingKey]) {
         return;
@@ -674,12 +767,13 @@ NSString *FFFErrorMessage(NSError *error)
 
 - (void) didSetProps: (NSArray<NSString*>*)changedProps {
     if (_needsReload) {
-        // With downsample on, the image is decoded for the view's size, so
-        // a view that hasn't been laid out yet loads once it has. Props and
-        // layout are applied in the same update, so that's before the next
-        // frame (in layoutSubviews). A view that still has no size then
-        // (e.g. one sized from onLoad) loads at full size.
-        if ([self downsamples] && ![self hasSize]) {
+        // 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
+        // been laid out yet loads once it has. Props and layout are applied
+        // in the same update, so that's before the next frame (in
+        // layoutSubviews). A view that still has no size then (e.g. one sized
+        // from onLoad) loads at full size, or the largest source.
+        if (([self downsamples] || [self picksSource]) && ![self hasSize]) {
             if (!self.waitsForSize) {
                 self.waitsForSize = YES;
                 __weak typeof(self) weakSelf = self;
@@ -766,6 +860,11 @@ NSString *FFFErrorMessage(NSError *error)
 - (void) reloadImage {
     _needsReload = NO;
     self.waitsForSize = NO;
+    self.loadsSwitchedSource = self.switchesSource;
+    self.switchesSource = NO;
+    if ([self picksSource]) {
+        _source = [self sourceForSize];
+    }
     self.decodedBox = CGSizeZero;
     // The previous load, if it's still running, is for a source the view no
     // longer shows: cancel it (a new download would, but a data uri or no
@@ -1002,7 +1101,7 @@ NSString *FFFErrorMessage(NSError *error)
                 if (error) {
                     // SDWebImage shows the placeholder (defaultSource or nothing).
                     weakSelf.showsLoadedImage = NO;
-                    [weakSelf sendOnError: FFFErrorMessage(error)];
+                    [weakSelf sendOnError: [source errorMessage: error]];
                     if (weakSelf.onFastImageLoadEnd) {
                         weakSelf.onFastImageLoadEnd([weakSelf loadEndEvent: NO]);
                     }

package/ios/FastImage/FFFastImageViewManager.m

@@ -101,6 +101,7 @@ RCT_EXPORT_MODULE(FastImageView)
 }
 
 RCT_EXPORT_VIEW_PROPERTY(source, FFFastImageSource)
+RCT_EXPORT_VIEW_PROPERTY(sources, FFFastImageSourceArray)
 RCT_EXPORT_VIEW_PROPERTY(defaultSource, UIImage)
 RCT_EXPORT_VIEW_PROPERTY(resizeMode, RCTResizeMode)
 RCT_EXPORT_VIEW_PROPERTY(recyclingKey, NSString)
@@ -292,7 +293,7 @@ RCT_EXPORT_METHOD(preload:(nonnull NSArray<FFFastImageSource *> *)sources
             FFFQueueLoad(source, options, [context copy], ^(UIImage *image, NSError *error) {
                 results[idx] = image
                     ? @{@"ok": @YES, @"width": @(image.size.width), @"height": @(image.size.height)}
-                    : FFFFailure(FFFErrorMessage(error));
+                    : FFFFailure([source errorMessage:error]);
                 finishOne();
             });
         }];
@@ -350,7 +351,7 @@ RCT_EXPORT_METHOD(getCachePath:(FFFastImageSource *)source
         context[SDWebImageContextStoreCacheType] = @(SDImageCacheTypeDisk);
         FFFQueueLoad(source, options, [context copy], ^(UIImage *image, NSError *error) {
             if (!image) {
-                resolve(FFFFailure(FFFErrorMessage(error)));
+                resolve(FFFFailure([source errorMessage:error]));
                 return;
             }
             FFFFindCachedFile(key, resolveFile, ^{

package/ios/FastImage/RCTConvert+FFFastImage.h

@@ -5,5 +5,6 @@
 @interface RCTConvert (FFFastImage)
 
 + (FFFastImageSource *)FFFastImageSource:(id)json;
++ (NSArray<FFFastImageSource *> *)FFFastImageSourceArray:(id)json;
 
 @end

package/ios/FastImage/RCTConvert+FFFastImage.m

@@ -51,6 +51,8 @@ RCT_ENUM_CONVERTER(FFFCacheControl, (@{
     imageSource.cacheKey = cacheKey.length > 0 ? cacheKey : nil;
     id memoryCache = json[@"memoryCache"];
     imageSource.memoryCache = memoryCache && memoryCache != (id)kCFNull ? [self BOOL:memoryCache] : YES;
+    CGFloat scale = json[@"scale"] && json[@"scale"] != (id)kCFNull ? [self CGFloat:json[@"scale"]] : 1;
+    imageSource.pixelCount = [self CGFloat:json[@"width"]] * [self CGFloat:json[@"height"]] * scale * scale;
     
     return imageSource;
 }

package/package.json

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