react-native-fast-image 10.4.0 → 10.6.0

package/ios/FastImage/FFFastImageView.m

@@ -44,9 +44,9 @@
 // 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;
+// The source that loads: the `source` prop's, or with several the one
+// picked for the view's size.
+@property(nonatomic, strong) FFFastImageSource* source;
 // 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.
@@ -70,8 +70,18 @@
 // shownPlaceholder).
 @property(nonatomic, strong) UIImage* hashImage;
 @property(nonatomic, copy) NSString* hashImageKey;
-// Whether the view shows its placeholder (the placeholder prop or the
-// source's), and whether that's the source's (hashImage).
+// placeholderSource's image once it has loaded, or nil: it shows instead of
+// the other placeholders (see shownPlaceholder). Its load, and which it is.
+@property(nonatomic, strong) UIImage* urlPlaceholderImage;
+@property(nonatomic, strong) id<SDWebImageOperation> urlPlaceholderOperation;
+@property(nonatomic, assign) NSUInteger urlPlaceholderLoad;
+// placeholderSource changed: its load starts with the image's, or after the
+// props if the image is still loading (see startUrlPlaceholderLoad).
+@property(nonatomic, assign) BOOL needsUrlPlaceholderLoad;
+// Whether the view shows a placeholder (the placeholder prop, the source's,
+// or placeholderSource's), and whether it stands for the image (the source's
+// or placeholderSource's): drawn as with contain for scale-down and none, as
+// the image's size isn't known yet, scaled smoothly and not blurred.
 @property(nonatomic, assign) BOOL showsPlaceholder;
 @property(nonatomic, assign) BOOL showsHash;
 // dynamicRangeLimit switched between HDR and SDR: the image is decoded again,
@@ -444,7 +454,7 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 
 - (void) setImage: (UIImage*)image {
     self.imageCount++;
-    self.showsHash = image != nil && image == self.hashImage;
+    self.showsHash = image != nil && (image == self.hashImage || image == self.urlPlaceholderImage);
     self.showsPlaceholder = self.showsHash || (image != nil && image == _placeholder);
     if ([_imageRendering isEqualToString: @"pixelated"]) {
         // A source's placeholder is a blurred preview, scaled up smoothly
@@ -540,7 +550,7 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 // Whether the image is blurred: a loaded image, not the placeholder prop (as
 // with React Native's Image, and on Android).
 - (BOOL) blurs: (UIImage*)image {
-    return _blurRadius > 0 && image && image != _placeholder && image != self.hashImage;
+    return _blurRadius > 0 && image && image != _placeholder && image != self.hashImage && image != self.urlPlaceholderImage;
 }
 
 // Blurs the image off the main thread, and shows it (tinted as any image) unless
@@ -739,21 +749,11 @@ NSString *FFFErrorMessage(NSError *error)
     return event;
 }
 
-- (void) setSource: (FFFastImageSource*)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;
+            _source = _sources.firstObject;
         }
         _needsReload = YES;
     }
@@ -837,11 +837,16 @@ NSString *FFFErrorMessage(NSError *error)
     return [_dynamicRangeLimit isEqualToString: @"constrained"] || [_dynamicRangeLimit isEqualToString: @"no-limit"];
 }
 
+// Shows at once, as a new source placeholder does (see updateHashImage),
+// without loading the image again.
 - (void) setPlaceholder: (UIImage*)placeholder {
-    if (_placeholder != placeholder) {
-        _placeholder = placeholder;
-        _needsReload = YES;
+    if (_placeholder == placeholder) {
+        return;
     }
+    UIImage* previous = [self shownPlaceholder];
+    BOOL showing = self.showsPlaceholder;
+    _placeholder = placeholder;
+    [self showChangedPlaceholder: previous showing: showing];
 }
 
 - (void) setSourcePlaceholders: (NSArray<NSString*>*)sourcePlaceholders {
@@ -849,20 +854,146 @@ NSString *FFFErrorMessage(NSError *error)
     [self updateHashImage];
 }
 
-// What shows while the image loads and if it fails: the picked source's
-// placeholder (its ThumbHash or blurDataUri), or the placeholder prop.
+- (void) setPlaceholderHash: (NSString*)placeholderHash {
+    _placeholderHash = [placeholderHash copy];
+    [self updateHashImage];
+}
+
+// What shows while the image loads and if it fails: placeholderSource's
+// image once it has loaded, the picked source's placeholder (its ThumbHash or
+// blurDataUri), or the placeholder prop.
 - (UIImage*) shownPlaceholder {
-    return self.hashImage ?: _placeholder;
+    return self.urlPlaceholderImage ?: self.hashImage ?: _placeholder;
+}
+
+// Shows the placeholder that shows now (shownPlaceholder) in place of
+// `previous` if the view showed it, or if it showed nothing (one that arrived
+// while nothing showed): never over a loaded image, or the image kept while
+// a new source loads.
+- (void) showChangedPlaceholder: (UIImage*)previous showing: (BOOL)showing {
+    UIImage* placeholder = [self shownPlaceholder];
+    if (placeholder == previous) {
+        return;
+    }
+    BOOL showsNothing = super.image == nil && !self.showsLoadedImage && !self.blursOverNothing;
+    if (showing || (placeholder && showsNothing)) {
+        [self setImage: placeholder];
+    }
+}
+
+// Images that views showed, by their source's cacheKey or url, while they're
+// still in memory (held by a view or SDWebImage's memory cache), so
+// placeholderSource finds one at once whatever size it was decoded at (the
+// memory cache's key includes the size).
++ (NSMapTable<NSString*, UIImage*>*) shownImages {
+    static NSMapTable* images;
+    static dispatch_once_t once;
+    dispatch_once(&once, ^{
+        images = [NSMapTable strongToWeakObjectsMapTable];
+    });
+    return images;
+}
+
+// The key a remote image (http or https) is recorded under: its cacheKey or
+// url. nil for others (data uris, files), which aren't recorded.
++ (NSString*) shownImageKey: (FFFastImageSource*)source {
+    NSString* scheme = source.url.scheme.lowercaseString;
+    if (![scheme isEqualToString: @"http"] && ![scheme isEqualToString: @"https"]) {
+        return nil;
+    }
+    return source.cacheKey.length > 0 ? source.cacheKey : source.url.absoluteString;
+}
+
++ (void) rememberShownImage: (UIImage*)image source: (FFFastImageSource*)source {
+    NSString* key = [self shownImageKey: source];
+    if (image && key) {
+        [[self shownImages] setObject: image forKey: key];
+    }
+}
+
+- (void) setPlaceholderSource: (FFFastImageSource*)placeholderSource {
+    if (!placeholderSource && !_placeholderSource) {
+        return;
+    }
+    _placeholderSource = placeholderSource;
+    [self cancelUrlPlaceholderLoad];
+    [self showUrlPlaceholderImage: nil];
+    self.needsUrlPlaceholderLoad = YES;
 }
 
-// The picked source's ThumbHash or blurDataUri, or nil.
+- (void) cancelUrlPlaceholderLoad {
+    self.urlPlaceholderLoad++;
+    [self.urlPlaceholderOperation cancel];
+    self.urlPlaceholderOperation = nil;
+}
+
+// Loads placeholderSource's image with the image's load (after layout, so at
+// the view's size, with the props applied), or after the image failed: not
+// if the image shows at once (from the memory cache, or a data uri), or the
+// placeholder is already loaded or loading.
+- (void) startUrlPlaceholderLoad {
+    self.needsUrlPlaceholderLoad = NO;
+    if (!_placeholderSource.url || self.urlPlaceholderImage || self.urlPlaceholderOperation) {
+        return;
+    }
+    if (_source && !self.hasErrored && [self loadsDuringLayout]) {
+        return;
+    }
+    [self loadUrlPlaceholder];
+}
+
+// Loads placeholderSource's image, as a source would load (its cache,
+// headers and cacheKey), at a high priority, as it only helps if it comes
+// before the image. One a view still shows (or that's still in memory) shows
+// at once. A failure shows nothing more.
+- (void) loadUrlPlaceholder {
+    [self cancelUrlPlaceholderLoad];
+    NSUInteger load = self.urlPlaceholderLoad;
+    FFFastImageSource* source = _placeholderSource;
+    NSString* key = [FFFastImageView shownImageKey: source];
+    UIImage* shown = key ? [[FFFastImageView shownImages] objectForKey: key] : nil;
+    if (shown) {
+        [self showUrlPlaceholderImage: shown];
+        return;
+    }
+    SDWebImageOptions options = [source cacheOptions] | SDWebImageHighPriority | SDWebImageRetryFailed | SDWebImageHandleCookies;
+    SDWebImageContext* context = [self contextForSource: source box: [self decodeBox] cover: NO];
+    __weak typeof(self) weakSelf = self;
+    self.urlPlaceholderOperation = [[SDWebImageManager sharedManager] loadImageWithURL: source.url options: options context: context progress: nil completed: ^(UIImage* _Nullable image, NSData* _Nullable data, NSError* _Nullable error, SDImageCacheType cacheType, BOOL finished, NSURL* _Nullable imageURL) {
+        if (!finished || weakSelf.urlPlaceholderLoad != load) {
+            return;
+        }
+        weakSelf.urlPlaceholderOperation = nil;
+        if (!image) {
+            return;
+        }
+        [FFFastImageView rememberShownImage: image source: source];
+        [weakSelf showUrlPlaceholderImage: image];
+    }];
+}
+
+- (void) showUrlPlaceholderImage: (UIImage*)image {
+    if (self.urlPlaceholderImage == image) {
+        return;
+    }
+    UIImage* previous = [self shownPlaceholder];
+    BOOL showing = self.showsPlaceholder;
+    self.urlPlaceholderImage = image;
+    [self showChangedPlaceholder: previous showing: showing];
+}
+
+// The picked source's ThumbHash or blurDataUri, or placeholderHash, or nil.
 - (NSString*) pickedSourcePlaceholder {
     NSUInteger index = 0;
     if ([self picksSource]) {
         index = _source ? [_sources indexOfObjectIdenticalTo: _source] : NSNotFound;
+        // None until one is picked.
+        if (index == NSNotFound) {
+            return nil;
+        }
     }
     NSString* hash = index < _sourcePlaceholders.count ? _sourcePlaceholders[index] : nil;
-    return hash.length > 0 ? hash : nil;
+    return hash.length > 0 ? hash : _placeholderHash.length > 0 ? _placeholderHash : nil;
 }
 
 // Decodes the picked source's placeholder. A view showing the previous
@@ -876,10 +1007,7 @@ NSString *FFFErrorMessage(NSError *error)
     BOOL showing = self.showsPlaceholder;
     self.hashImageKey = hash;
     self.hashImage = [FFFThumbHash imageForPlaceholder: hash];
-    UIImage* placeholder = [self shownPlaceholder];
-    if (showing && placeholder != previous) {
-        [self setImage: placeholder];
-    }
+    [self showChangedPlaceholder: previous showing: showing];
 }
 
 - (void) didSetProps {
@@ -909,6 +1037,14 @@ NSString *FFFErrorMessage(NSError *error)
     } else {
         [self reloadIfResized];
     }
+    // A new placeholderSource while the image loads, or after it failed (a
+    // load waiting for the view's size starts it with the image's).
+    if (self.needsUrlPlaceholderLoad && !_needsReload && !self.waitsForSize) {
+        if (!self.hasCompleted || self.hasErrored) {
+            [self startUrlPlaceholderLoad];
+        }
+        self.needsUrlPlaceholderLoad = NO;
+    }
 }
 
 // The same image decoded again for a dynamicRangeLimit between HDR and SDR,
@@ -1003,6 +1139,7 @@ NSString *FFFErrorMessage(NSError *error)
 - (void) reloadImage {
     _needsReload = NO;
     self.needsDynamicRangeReload = NO;
+    self.needsUrlPlaceholderLoad = NO;
     self.waitsForSize = NO;
     self.loadsSwitchedSource = self.switchesSource;
     self.switchesSource = NO;
@@ -1038,6 +1175,7 @@ NSString *FFFErrorMessage(NSError *error)
                 [self setImage: [self shownPlaceholder]];
                 self.showsLoadedImage = NO;
                 [self sendOnError: @"Failed to decode the image"];
+                [self startUrlPlaceholderLoad];
                 if (self.onFastImageLoadEnd) {
                     self.onFastImageLoadEnd([self loadEndEvent: NO]);
                 }
@@ -1080,10 +1218,15 @@ NSString *FFFErrorMessage(NSError *error)
         self.retriedAfterBackground = NO;
         [self stopWaitingForActive];
 
+        [self startUrlPlaceholderLoad];
         [self downloadImage: _source options: options context: [self loadContext] events: YES];
-    } else if ([self shownPlaceholder]) {
-        [self setImage: [self shownPlaceholder]];
-        self.showsLoadedImage = NO;
+    } else {
+        if ([self shownPlaceholder]) {
+            [self setImage: [self shownPlaceholder]];
+            self.showsLoadedImage = NO;
+        }
+        // No image: only placeholders show.
+        [self startUrlPlaceholderLoad];
     }
 }
 
@@ -1319,6 +1462,8 @@ NSString *FFFErrorMessage(NSError *error)
                         [weakSelf setImage: current];
                     }
                     weakSelf.showsLoadedImage = NO;
+                    // Shows instead of the other placeholders once it loads.
+                    [weakSelf startUrlPlaceholderLoad];
                     [weakSelf sendOnError: [source errorMessage: error]];
                     if (weakSelf.onFastImageLoadEnd) {
                         weakSelf.onFastImageLoadEnd([weakSelf loadEndEvent: NO]);
@@ -1326,6 +1471,12 @@ NSString *FFFErrorMessage(NSError *error)
                 } else {
                     weakSelf.hasCompleted = YES;
                     weakSelf.showsLoadedImage = YES;
+                    // For other views' placeholderSource.
+                    [FFFastImageView rememberShownImage: image source: source];
+                    // The image came first: its placeholder isn't needed.
+                    if (!weakSelf.urlPlaceholderImage) {
+                        [weakSelf cancelUrlPlaceholderLoad];
+                    }
                     [weakSelf sendOnLoad: image];
                     if (weakSelf.onFastImageLoadEnd) {
                         weakSelf.onFastImageLoadEnd([weakSelf loadEndEvent: YES]);
@@ -1375,11 +1526,14 @@ NSString *FFFErrorMessage(NSError *error)
     self.waitsForSize = NO;
     [self stopWaitingForActive];
     [self sd_cancelLatestImageLoad];
+    [self cancelUrlPlaceholderLoad];
 }
 
 - (void) dealloc {
     [self stopWaitingForActive];
     [self sd_cancelLatestImageLoad];
+    // Fabric frees views it doesn't recycle without stop.
+    [_urlPlaceholderOperation cancel];
 }
 
 @end

package/ios/FastImage/FFFastImageViewComponentView.mm

@@ -8,6 +8,7 @@
 #import <react/renderer/components/RNFastImageSpec/RCTComponentViewHelpers.h>
 
 #import "FFFastImageView.h"
+#import "FFFThumbHash.h"
 #import "RCTConvert+FFFastImage.h"
 
 using namespace facebook::react;
@@ -102,6 +103,57 @@ static id _Nullable FFFJSON(const folly::dynamic &value)
     return value.isNull() ? nil : FFFObjectFromDynamic(value);
 }
 
+// A source (or `placeholder`) without its thumbhash and blurDataUri, to
+// compare: one source, or each of several.
+static folly::dynamic FFFWithoutPlaceholders(const folly::dynamic &value)
+{
+    if (value.isArray()) {
+        folly::dynamic result = folly::dynamic::array;
+        for (const auto &entry : value) {
+            result.push_back(FFFWithoutPlaceholders(entry));
+        }
+        return result;
+    }
+    if (!value.isObject()) {
+        return value;
+    }
+    folly::dynamic result = value;
+    result.erase("thumbhash");
+    result.erase("blurDataUri");
+    return result;
+}
+
+// A source's (or `placeholder`'s) ThumbHash, or its blurDataUri if it's a data
+// uri (JS warns about another), or nil.
+static NSString *_Nullable FFFSourcePlaceholder(NSDictionary *source)
+{
+    id thumbhash = source[@"thumbhash"];
+    if ([thumbhash isKindOfClass:[NSString class]] && [thumbhash length] > 0) {
+        return thumbhash;
+    }
+    id blurDataUri = source[@"blurDataUri"];
+    if ([blurDataUri isKindOfClass:[NSString class]] && [FFFThumbHash isDataUri:blurDataUri]) {
+        return blurDataUri;
+    }
+    return nil;
+}
+
+// Whether the placeholder prop is a url to load apart from the image (a
+// source with an http or https uri), rather than an image to show at once: a
+// bundled image (served by the packager in development), a file or a data uri.
+static BOOL FFFIsUrlPlaceholder(id _Nullable placeholder)
+{
+    if (![placeholder isKindOfClass:[NSDictionary class]] || placeholder[@"__packager_asset"]) {
+        return NO;
+    }
+    id uri = placeholder[@"uri"];
+    if (![uri isKindOfClass:[NSString class]]) {
+        return NO;
+    }
+    NSString *scheme = [NSURL URLWithString:uri].scheme.lowercaseString;
+    return [scheme isEqualToString:@"http"] || [scheme isEqualToString:@"https"];
+}
+
 // The events JS has a handler for: the handledEvents prop's bits (see
 // src/specs/FastImageViewNativeComponent.ts).
 typedef NS_OPTIONS(int32_t, FFFEvent) {
@@ -226,22 +278,35 @@ typedef NS_OPTIONS(int32_t, FFFEvent) {
     FFFastImageView *view = _imageView;
 
     if (all || oldViewProps.source != newViewProps.source) {
-        view.source = [RCTConvert FFFastImageSource:FFFJSON(newViewProps.source)];
-    }
-    if (all || oldViewProps.sources != newViewProps.sources) {
-        id sources = FFFJSON(newViewProps.sources);
-        view.sources = sources ? [RCTConvert FFFastImageSourceArray:sources] : nil;
+        // One source, or several (an array). Only a change besides their
+        // thumbhashes and blurDataUris loads again: a new one for the same
+        // image (e.g. one that arrives later) shows at once.
+        BOOL loads = all || FFFWithoutPlaceholders(oldViewProps.source) != FFFWithoutPlaceholders(newViewProps.source);
+        id json = FFFJSON(newViewProps.source);
+        NSArray *entries = [json isKindOfClass:[NSArray class]] ? json : json ? @[ json ] : @[];
+        NSMutableArray<FFFastImageSource *> *sources = [NSMutableArray arrayWithCapacity:entries.count];
+        NSMutableArray<NSString *> *placeholders = [NSMutableArray arrayWithCapacity:entries.count];
+        for (id entry in entries) {
+            if ([entry isKindOfClass:[NSDictionary class]]) {
+                if (loads) {
+                    [sources addObject:[RCTConvert FFFastImageSource:entry]];
+                }
+                [placeholders addObject:FFFSourcePlaceholder(entry) ?: @""];
+            }
+        }
+        if (loads) {
+            view.sources = sources.count > 0 ? sources : nil;
+        }
+        view.sourcePlaceholders = placeholders;
     }
     if (all || oldViewProps.placeholder != newViewProps.placeholder) {
+        // A thumbhash or blurDataUri, a url to load, or an image to show.
         id placeholder = FFFJSON(newViewProps.placeholder);
-        view.placeholder = placeholder ? [RCTConvert UIImage:placeholder] : nil;
-    }
-    if (all || oldViewProps.sourcePlaceholders != newViewProps.sourcePlaceholders) {
-        NSMutableArray<NSString *> *placeholders = [NSMutableArray arrayWithCapacity:newViewProps.sourcePlaceholders.size()];
-        for (const auto &placeholder : newViewProps.sourcePlaceholders) {
-            [placeholders addObject:[NSString stringWithUTF8String:placeholder.c_str()]];
-        }
-        view.sourcePlaceholders = placeholders.count > 0 ? placeholders : nil;
+        BOOL hash = [placeholder isKindOfClass:[NSDictionary class]] && (placeholder[@"thumbhash"] || placeholder[@"blurDataUri"]);
+        BOOL loads = !hash && FFFIsUrlPlaceholder(placeholder);
+        view.placeholderHash = hash ? FFFSourcePlaceholder(placeholder) : nil;
+        view.placeholder = placeholder && !hash && !loads ? [RCTConvert UIImage:placeholder] : nil;
+        view.placeholderSource = loads ? [RCTConvert FFFastImageSource:placeholder] : nil;
     }
     if (all || oldViewProps.objectFit != newViewProps.objectFit) {
         view.objectFit = [RCTConvert FFFObjectFit:FFFString(newViewProps.objectFit)];

package/package.json

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

package/src/index.js.flow

@@ -110,6 +110,13 @@ export type PreloadResult = PreloadSuccess | PreloadFailure
 export type PreloadFn = (
     sources: Array<FastImageSource>,
 ) => Promise<Array<PreloadResult>>
+export type PlaceholderSource = {
+    uri?: string,
+    headers?: Object,
+    cacheKey?: string,
+    cache?: CacheControls,
+}
+
 export type SourcePlaceholder = {
     thumbhash?: string,
     blurDataUri?: string,
@@ -138,8 +145,8 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource> | number),
-    placeholder?: ?(number | string | SourcePlaceholder),
+    source?: ?(FastImageSource | Array<FastImageSource | number> | number),
+    placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,