react-native-fast-image 10.1.0 → 10.2.0

package/ios/FastImage/FFFastImageView.m

@@ -5,7 +5,8 @@
 #import <SDWebImage/SDWebImageError.h>
 #import <SDWebImage/SDImageTransformer.h>
 #import "FFFDownsampledImage.h"
-#import <Accelerate/Accelerate.h>
+#import "FFFThumbHash.h"
+#import "FFFBoxBlur.h"
 
 @interface FFFastImageView ()
 
@@ -28,15 +29,16 @@
 // 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).
+// blurred, the view shows no loaded image (nothing, or the placeholder prop).
 @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;
 // Waits for the app to be active again, to restart a load.
 @property(nonatomic, strong) id activeObserver;
-// 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).
+// Whether the view shows an image that loaded (not the placeholder prop or
+// nothing). A new source then keeps it until the new image has loaded (see
+// reloadImage).
 @property(nonatomic, assign) BOOL showsLoadedImage;
 // downsample, or several sources: a load waits for the view's size (see
 // didSetProps).
@@ -62,6 +64,15 @@
 // 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;
+// The picked source's placeholder (its ThumbHash or blurDataUri) decoded, and
+// the string, or nil: it shows instead of the placeholder prop (see
+// 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).
+@property(nonatomic, assign) BOOL showsPlaceholder;
+@property(nonatomic, assign) BOOL showsHash;
 
 @end
 
@@ -266,12 +277,14 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
             contentMode = UIViewContentModeScaleToFill;
             break;
         case FFFObjectFitNone:
-            contentMode = UIViewContentModeCenter;
+            // A source's placeholder stands for an image whose size isn't
+            // known yet: as with contain, here and for scale-down.
+            contentMode = self.showsHash ? UIViewContentModeScaleAspectFit : UIViewContentModeCenter;
             break;
         case FFFObjectFitScaleDown: {
             CGSize imageSize = super.image.size;
             CGSize viewSize = self.bounds.size;
-            contentMode = imageSize.width > viewSize.width || imageSize.height > viewSize.height
+            contentMode = self.showsHash || imageSize.width > viewSize.width || imageSize.height > viewSize.height
                 ? UIViewContentModeScaleAspectFit
                 : UIViewContentModeCenter;
             break;
@@ -427,6 +440,13 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 
 - (void) setImage: (UIImage*)image {
     self.imageCount++;
+    self.showsHash = image != nil && image == self.hashImage;
+    self.showsPlaceholder = self.showsHash || (image != nil && image == _placeholder);
+    if ([_imageRendering isEqualToString: @"pixelated"]) {
+        // A source's placeholder is a blurred preview, scaled up smoothly
+        // (pixelated is for the image).
+        self.layer.magnificationFilter = self.showsHash ? kCAFilterLinear : kCAFilterNearest;
+    }
     if ([self blurs: image]) {
         self.originalImage = image;
         self.blurredImage = nil;
@@ -513,10 +533,10 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     }
 }
 
-// Whether the image is blurred: a loaded image, not defaultSource (as with
-// React Native's Image, and on Android).
+// 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 != _defaultSource;
+    return _blurRadius > 0 && image && image != _placeholder && image != self.hashImage;
 }
 
 // Blurs the image off the main thread, and shows it (tinted as any image) unless
@@ -649,27 +669,7 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     [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);
-    }
+    FFFBoxBlur(context, boxSize);
 
     CGImageRef cgImage = CGBitmapContextCreateImage(context);
     CGContextRelease(context);
@@ -798,13 +798,51 @@ NSString *FFFErrorMessage(NSError *error)
     }
 }
 
-- (void) setDefaultSource: (UIImage*)defaultSource {
-    if (_defaultSource != defaultSource) {
-        _defaultSource = defaultSource;
+- (void) setPlaceholder: (UIImage*)placeholder {
+    if (_placeholder != placeholder) {
+        _placeholder = placeholder;
         _needsReload = YES;
     }
 }
 
+- (void) setSourcePlaceholders: (NSArray<NSString*>*)sourcePlaceholders {
+    _sourcePlaceholders = [sourcePlaceholders copy];
+    [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.
+- (UIImage*) shownPlaceholder {
+    return self.hashImage ?: _placeholder;
+}
+
+// The picked source's ThumbHash or blurDataUri, or nil.
+- (NSString*) pickedSourcePlaceholder {
+    NSUInteger index = 0;
+    if ([self picksSource]) {
+        index = _source ? [_sources indexOfObjectIdenticalTo: _source] : NSNotFound;
+    }
+    NSString* hash = index < _sourcePlaceholders.count ? _sourcePlaceholders[index] : nil;
+    return hash.length > 0 ? hash : nil;
+}
+
+// Decodes the picked source's placeholder. A view showing the previous
+// placeholder shows the new one at once, without loading the image again.
+- (void) updateHashImage {
+    NSString* hash = [self pickedSourcePlaceholder];
+    if (hash == self.hashImageKey || [hash isEqualToString: self.hashImageKey]) {
+        return;
+    }
+    UIImage* previous = [self shownPlaceholder];
+    BOOL showing = self.showsPlaceholder;
+    self.hashImageKey = hash;
+    self.hashImage = [FFFThumbHash imageForPlaceholder: hash];
+    UIImage* placeholder = [self shownPlaceholder];
+    if (showing && placeholder != previous) {
+        [self setImage: placeholder];
+    }
+}
+
 - (void) didSetProps {
     if (_needsReload) {
         // With downsample on, the image is decoded for the view's size, and
@@ -906,6 +944,7 @@ NSString *FFFErrorMessage(NSError *error)
     if ([self picksSource]) {
         _source = [self sourceForSize];
     }
+    [self updateHashImage];
     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
@@ -924,8 +963,9 @@ NSString *FFFErrorMessage(NSError *error)
             // Use SDWebImage API to support external format like WebP images
             UIImage* image = [UIImage sd_imageWithData: [NSData dataWithContentsOfURL: _source.url]];
             if (!image) {
-                // Not decodable: fail like a remote image, showing defaultSource.
-                [self setImage: _defaultSource];
+                // Not decodable: fail like a remote image, showing the
+                // placeholder.
+                [self setImage: [self shownPlaceholder]];
                 self.showsLoadedImage = NO;
                 [self sendOnError: @"Failed to decode the image"];
                 if (self.onFastImageLoadEnd) {
@@ -954,9 +994,10 @@ NSString *FFFErrorMessage(NSError *error)
         SDWebImageOptions options = [self loadOptions];
 
         // Keep showing the loaded image until the new one has loaded, instead
-        // of clearing it to defaultSource (or nothing) while it loads, which
-        // flashed (#747). defaultSource shows if the new image fails. As React
-        // Native's Image does; a `key` that changes starts from blank instead.
+        // of clearing it to the placeholder prop (or nothing) while it loads,
+        // which flashed (#747). The placeholder prop shows if the new image
+        // fails. As React Native's Image does; a `key` that changes starts from
+        // blank instead.
         if (self.showsLoadedImage) {
             options |= SDWebImageDelayPlaceholder;
         }
@@ -970,8 +1011,8 @@ NSString *FFFErrorMessage(NSError *error)
         [self stopWaitingForActive];
 
         [self downloadImage: _source options: options context: [self loadContext] events: YES];
-    } else if (_defaultSource) {
-        [self setImage: _defaultSource];
+    } else if ([self shownPlaceholder]) {
+        [self setImage: [self shownPlaceholder]];
         self.showsLoadedImage = NO;
     }
 }
@@ -1003,8 +1044,8 @@ 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
+// one in the memory cache, where SDWebImage finds it as the load starts, or one
+// that isn't downloaded (no source, which shows the placeholder prop, or a data
 // 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;
@@ -1143,13 +1184,13 @@ 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;
+    UIImage* placeholder = [self shownPlaceholder];
     SDSetImageBlock setImage = ^(UIImage* _Nullable image, NSData* _Nullable data, SDImageCacheType cacheType, NSURL* _Nullable imageURL) {
         if (weakSelf.loadCount != load) {
             return;
         }
-        // The loaded image, not defaultSource (shown while it loads, or if it
-        // fails).
+        // The loaded image, not the placeholder prop (shown while it loads, or
+        // if it fails).
         BOOL loaded = image && image != placeholder;
         [weakSelf showLoadedImage: image fade: loaded && [weakSelf fadesImageFromCache: cacheType]];
     };
@@ -1174,6 +1215,13 @@ NSString *FFFErrorMessage(NSError *error)
                 if (weakSelf.loadCount != load) {
                     return;
                 }
+                // cacheOnly: SDWebImage completes the load of an image that
+                // isn't cached with neither an image nor an error.
+                if (!error && !image) {
+                    error = [NSError errorWithDomain: @"FastImage"
+                                                code: 0
+                                            userInfo: @{NSLocalizedDescriptionKey: @"Not in the cache"}];
+                }
                 // The download was running when the app went to the
                 // background, and failed: iOS suspends it there, and its
                 // timeout keeps counting, so it times out as the app comes
@@ -1187,7 +1235,13 @@ NSString *FFFErrorMessage(NSError *error)
                     return;
                 }
                 if (error) {
-                    // SDWebImage shows the placeholder (defaultSource or nothing).
+                    // SDWebImage shows the placeholder the load started with
+                    // (the placeholder prop, a source's, or nothing): the
+                    // current one if the source's changed since.
+                    UIImage* current = [weakSelf shownPlaceholder];
+                    if (current != placeholder) {
+                        [weakSelf setImage: current];
+                    }
                     weakSelf.showsLoadedImage = NO;
                     [weakSelf sendOnError: [source errorMessage: error]];
                     if (weakSelf.onFastImageLoadEnd) {

package/ios/FastImage/FFFastImageViewComponentView.mm

@@ -95,7 +95,7 @@ static folly::dynamic FFFDynamicFromObject(id value)
     return nullptr;
 }
 
-// A prop of any type (a source, sources, defaultSource) as JSON: nil when
+// A prop of any type (a source, sources, placeholder) as JSON: nil when
 // it's null (not set).
 static id _Nullable FFFJSON(const folly::dynamic &value)
 {
@@ -232,9 +232,16 @@ typedef NS_OPTIONS(int32_t, FFFEvent) {
         id sources = FFFJSON(newViewProps.sources);
         view.sources = sources ? [RCTConvert FFFastImageSourceArray:sources] : nil;
     }
-    if (all || oldViewProps.defaultSource != newViewProps.defaultSource) {
-        id defaultSource = FFFJSON(newViewProps.defaultSource);
-        view.defaultSource = defaultSource ? [RCTConvert UIImage:defaultSource] : nil;
+    if (all || oldViewProps.placeholder != newViewProps.placeholder) {
+        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;
     }
     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.1.0",
+    "version": "10.2.0",
     "description": "FastImage, performant React Native image component.",
     "keywords": [
         "cache",
@@ -32,9 +32,11 @@
         "app.plugin.js",
         "src",
         "!src/**/*.test.tsx",
+        "!src/**/*.test.ts",
         "!src/__snapshots__",
         "dist",
-        "RNFastImage.podspec"
+        "RNFastImage.podspec",
+        "thumbhash"
     ],
     "scripts": {
         "build": "bun run build:package && bun run build:docs",

package/src/index.js.flow

@@ -110,6 +110,11 @@ export type PreloadResult = PreloadSuccess | PreloadFailure
 export type PreloadFn = (
     sources: Array<FastImageSource>,
 ) => Promise<Array<PreloadResult>>
+export type SourcePlaceholder = {
+    thumbhash?: string,
+    blurDataUri?: string,
+}
+
 export type FastImageSource = {
     uri?: string,
     headers?: Object,
@@ -118,6 +123,8 @@ export type FastImageSource = {
     cacheKey?: string,
     memoryCache?: boolean,
     diskCache?: boolean,
+    thumbhash?: string,
+    blurDataUri?: string,
     width?: number,
     height?: number,
     scale?: number,
@@ -132,6 +139,8 @@ export type FastImageProps = $ReadOnly<{|
     onProgress?: ?(event: OnProgressEvent) => void,
 
     source?: ?(FastImageSource | Array<FastImageSource> | number),
+    placeholder?: ?(number | string | SourcePlaceholder),
+    // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo } from 'react'
+import React, { forwardRef, memo, useMemo } from 'react'
 import {
     ColorValue,
     View,
@@ -16,6 +16,7 @@ import { fromStyle, resolveObjectFit } from './objectFit'
 import { objectPositionOrCentered, type ObjectPosition } from './objectPosition'
 import FastImageView from './specs/FastImageViewNativeComponent'
 import NativeFastImageModule from './specs/NativeFastImageModule'
+import { dataUri, hasSourcePlaceholder, isImageName } from './placeholders'
 import { warnIfChildren, warnOnce } from './warnings'
 
 /** How the image fits the view: see [`objectFit`](#objectfit). */
@@ -129,6 +130,32 @@ export type Source = {
      * @default true
      */
     diskCache?: boolean
+    /**
+     * A [ThumbHash](https://evanw.github.io/thumbhash/) of the image, shown
+     * blurred while the image loads, and if it fails to load. It's a short
+     * string you make when the image is uploaded (e.g. with the `thumbhash`
+     * package) and send with the image's url.
+     *
+     * On the web, it needs `import 'react-native-fast-image/thumbhash'` (see
+     * [ThumbHashes on the web](#thumbhashes-on-the-web)).
+     *
+     * @example
+     * ```jsx
+     * <FastImage source={{ uri: photo.url, thumbhash: photo.thumbhash }} />
+     * ```
+     */
+    thumbhash?: string
+    /**
+     * A tiny version of the image (e.g. 8 to 20 px) as a data uri, shown
+     * blurred while the image loads, and if it fails to load. On the web it
+     * shows without any JavaScript, e.g. in a server-rendered page.
+     *
+     * @example
+     * ```jsx
+     * <FastImage source={{ uri: photo.url, blurDataUri: photo.lqip }} />
+     * ```
+     */
+    blurDataUri?: string
     /**
      * With several sources (`source` as an array), the image's width at this
      * uri, in pixels (times `scale`, if given).
@@ -143,6 +170,9 @@ export type Source = {
     scale?: number
 }
 
+/** A `thumbhash` or `blurDataUri` as `placeholder`. */
+export type SourcePlaceholder = Pick<Source, 'thumbhash' | 'blurDataUri'>
+
 /** How the image fades in: see [`transition`](#transition). */
 export type Transition = {
     /**
@@ -154,7 +184,7 @@ export type Transition = {
     /**
      * Also fades between images: a new `source` replacing an image that's
      * showing cross-dissolves from it. Otherwise only an image that appears
-     * over nothing (or over `defaultSource`) fades in, and a new source
+     * over nothing (or over a placeholder) fades in, and a new source
      * replaces the image showing at once, once it has loaded.
      * @default false
      */
@@ -323,14 +353,29 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      */
     source?: Source | Source[] | ImageRequireSource
     /**
-     * An asset loaded with `require(...)`, shown while the first image loads,
-     * and if an image fails to load. When `source` changes, the previous image
-     * shows while the new one loads instead (see `source` and
-     * `recyclingKey`).
+     * A placeholder shown while the image loads, and if it fails to load:
      *
-     * On Android, `defaultSource` doesn't show in debug builds: there the dev
-     * server serves `require()`d images, and `defaultSource` is only loaded
-     * from the app's resources.
+     * - An image loaded with `require()`: `placeholder={require('./gray.png')}`.
+     * - A data uri: `placeholder="data:image/png;base64,…"`.
+     * - The name of an image bundled with the app (an iOS asset catalog image
+     *   or an Android drawable): `placeholder="gray"`.
+     * - A [ThumbHash](#sourcethumbhash), shown blurred:
+     *   `placeholder={{ thumbhash }}`.
+     * - A tiny image as a data uri, shown blurred:
+     *   `placeholder={{ blurDataUri }}`.
+     *
+     * A source's own `thumbhash` or `blurDataUri` is shown instead, if it has
+     * one.
+     *
+     * Notes:
+     *
+     * - A url isn't loaded: it's ignored, with a warning in development.
+     * - On Android, a `require()`d image doesn't show in debug builds, where
+     *   the dev server serves it. Release builds show it.
+     */
+    placeholder?: ImageRequireSource | string | SourcePlaceholder
+    /**
+     * @deprecated Use `placeholder`, which does the same.
      */
     defaultSource?: ImageRequireSource
     /**
@@ -373,8 +418,8 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      *   `{ right: 10, bottom: '20%' }`. A missing axis is centered.
      *
      * Points are dp on Android. An invalid value is ignored (the image is
-     * centered), with a warning in development. `defaultSource` is placed
-     * the same way.
+     * centered), with a warning in development. Placeholders are placed the
+     * same way.
      *
      * @default '50% 50%'
      * @example
@@ -387,7 +432,7 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * For views that get reused for other content, such as rows in FlashList
      * or recyclerlistview. Set it to something that identifies the content,
      * e.g. the item's id. When it changes, the image is cleared right away (to
-     * `defaultSource`, or blank) instead of staying until the new one has
+     * `placeholder`, or blank) instead of staying until the new one has
      * loaded. Unlike changing `key`, this keeps the view, which is what list
      * recycling is for.
      *
@@ -499,7 +544,7 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * blurring a photo behind a sheet). Each change blurs the image again on
      * the CPU, so don't animate it.
      *
-     * - Only the loaded image is blurred, not `defaultSource`.
+     * - Only the loaded image is blurred, not a placeholder.
      * - An animated image (GIF, animated WebP, APNG or AVIF) shows its first frame,
      *   blurred, and doesn't animate.
      * - With `tintColor`, the blurred image is tinted.
@@ -588,7 +633,7 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
 
     /**
      * If supplied, changes the color of all the non-transparent pixels to the
-     * given color.
+     * given color, including the placeholder.
      */
     tintColor?: ColorValue
 
@@ -601,13 +646,46 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
     children?: "FastImage doesn't take children: use FastImageBackground for content over an image"
 }
 
-const resolveDefaultSource = (
-    defaultSource?: ImageRequireSource,
+// A source without its thumbhash and blurDataUri.
+function withoutPlaceholders<T>(source: T): T {
+    if (!hasSourcePlaceholder(source)) return source
+    const {
+        thumbhash: _thumbhash,
+        blurDataUri: _blurDataUri,
+        ...rest
+    } = source as Source
+    return rest as T
+}
+
+// What the native view shows while a source loads: its ThumbHash (decoded
+// natively), or its blurDataUri, or '' for neither.
+function sourcePlaceholder(source: unknown): string {
+    if (!source || typeof source !== 'object') return ''
+    const { thumbhash, blurDataUri } = source as Source
+    return thumbhash || dataUri(blurDataUri) || ''
+}
+
+const resolvePlaceholder = (
+    placeholder?: ImageRequireSource | string,
 ): string | object | null => {
-    if (!defaultSource) {
+    if (typeof placeholder === 'string') {
+        // An image bundled with the app, by name, as React Native's Image
+        // takes it ({ uri: name }).
+        if (isImageName(placeholder)) {
+            return Platform.OS === 'android'
+                ? placeholder
+                : { uri: placeholder }
+        }
+        const uri = dataUri(placeholder)
+        if (!uri) return null
+        // Android decodes it; iOS takes it as an image source, as it does a
+        // require()d image's.
+        return Platform.OS === 'android' ? uri : { uri }
+    }
+    if (!placeholder) {
         return null
     }
-    const resolved = Image.resolveAssetSource(defaultSource)
+    const resolved = Image.resolveAssetSource(placeholder)
     if (!resolved) {
         return null
     }
@@ -719,6 +797,7 @@ declare const __DEV__: boolean
 
 function FastImageBase({
     source,
+    placeholder,
     defaultSource,
     tintColor,
     onLoadStart,
@@ -765,18 +844,49 @@ function FastImageBase({
     const fit = resolveObjectFit(objectFit, style)
     const position = objectPositionOrCentered(objectPosition)
 
-    // Several sources are picked from natively, for the view's size; one in
-    // an array is a plain source.
-    const sources = Array.isArray(source)
-        ? source.length === 1
-            ? undefined
-            : source
-        : undefined
-    const single = Array.isArray(source) ? source[0] : source
-    const resolvedSource = sources
-        ? undefined
-        : Image.resolveAssetSource(single as any)
-    const resolvedDefaultSource = resolveDefaultSource(defaultSource)
+    // Memoized on source, so an unchanged source reaches the native view as
+    // the same objects, and React's prop diff stops at them.
+    // `placeholder` as a thumbhash or blurDataUri, for the sources without
+    // their own: a string, so an object made on every render doesn't make
+    // new sourcePlaceholders.
+    const shared = hasSourcePlaceholder(placeholder)
+        ? sourcePlaceholder(placeholder)
+        : ''
+    const { resolvedSource, sources, sourcePlaceholders } = useMemo(() => {
+        // Several sources are picked from natively, for the view's size; one
+        // in an array is a plain source.
+        const sources = Array.isArray(source)
+            ? source.length === 1
+                ? undefined
+                : source
+            : undefined
+        const single = Array.isArray(source) ? source[0] : source
+        // Sources' thumbhashes and blurDataUris go to the native view apart
+        // from the sources, so a new one for the same image doesn't load it
+        // again, by the source's index ('' for none). A source's own wins
+        // over `placeholder`'s.
+        const placeholders = (sources ?? [single]).map(
+            (entry) => sourcePlaceholder(entry) || shared,
+        )
+        return {
+            resolvedSource: sources
+                ? undefined
+                : Image.resolveAssetSource(withoutPlaceholders(single) as any),
+            sources: sources?.some(hasSourcePlaceholder)
+                ? sources.map(withoutPlaceholders)
+                : sources,
+            sourcePlaceholders: placeholders.some(Boolean)
+                ? placeholders
+                : undefined,
+        }
+    }, [source, shared])
+    // A thumbhash or blurDataUri in `placeholder` goes in sourcePlaceholders
+    // instead: it isn't an image to show as it is, but defaultSource still is.
+    const resolvedPlaceholder = resolvePlaceholder(
+        hasSourcePlaceholder(placeholder)
+            ? defaultSource
+            : (placeholder ?? defaultSource),
+    )
 
     return (
         <FastImageView
@@ -794,7 +904,8 @@ function FastImageBase({
             )}
             source={resolvedSource}
             sources={sources}
-            defaultSource={resolvedDefaultSource}
+            sourcePlaceholders={sourcePlaceholders}
+            placeholder={resolvedPlaceholder}
             onFastImageLoadStart={onLoadStart}
             onFastImageProgress={onProgress}
             // The native views only send the events with a handler (and only