react-native-fast-image 10.1.1 → 10.3.0

package/android/src/main/java/com/fastimage/FastImageViewWithUrl.java

@@ -61,7 +61,8 @@ import javax.annotation.Nonnull;
 class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEventsView, ReactHitSlopView {
     private boolean mNeedsReload = false;
     private ReadableMap mSource = null;
-    private Drawable mDefaultSource = null;
+    // The `placeholder` prop.
+    private Drawable mPlaceholder = null;
 
     // Null when the view was created in a destroyed Activity (nothing loads).
     @Nullable
@@ -307,9 +308,74 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         return true;
     }
 
-    public void setDefaultSource(@Nullable Drawable source) {
+    public void setPlaceholder(@Nullable Drawable placeholder) {
         mNeedsReload = true;
-        mDefaultSource = source;
+        mPlaceholder = placeholder;
+    }
+
+    // The `sourcePlaceholders` prop, by the source's index ("" for none; one
+    // for a single source): the picked source's ThumbHash or blurDataUri (a
+    // data uri) shows instead of the placeholder prop. JS sends them apart from
+    // the sources, so a new one for the same image doesn't reload it.
+    @Nullable
+    private ReadableArray mSourcePlaceholders = null;
+    // What shows while the image loads and if it fails: the picked source's
+    // ThumbHash or blurDataUri decoded (FastImageThumbHash), or the placeholder
+    // prop. FastImage's own drawable either way, which Glide doesn't recycle.
+    @Nullable
+    private Drawable mShownPlaceholder = null;
+    // The source placeholder mShownPlaceholder shows, or null for the
+    // placeholder prop.
+    @Nullable
+    private String mPlaceholderKey = null;
+    // The last source placeholder that failed to decode, so it isn't decoded
+    // again on every update.
+    @Nullable
+    private String mInvalidPlaceholder = null;
+
+    public void setSourcePlaceholders(@Nullable ReadableArray placeholders) {
+        mSourcePlaceholders = placeholders;
+        updatePlaceholder();
+    }
+
+    // The picked source's ThumbHash or blurDataUri, or null.
+    @Nullable
+    private String pickedSourcePlaceholder() {
+        int index = mSources == null ? 0 : mSourceIndex;
+        String key = mSourcePlaceholders != null && index >= 0 && index < mSourcePlaceholders.size()
+                && !mSourcePlaceholders.isNull(index) ? mSourcePlaceholders.getString(index) : null;
+        return key == null || key.isEmpty() ? null : key;
+    }
+
+    // Sets mShownPlaceholder for the picked source. A view showing the previous
+    // placeholder shows the new one at once, without reloading the image.
+    private void updatePlaceholder() {
+        String key = pickedSourcePlaceholder();
+        Drawable placeholder;
+        if (key != null && key.equals(mPlaceholderKey)) {
+            placeholder = mShownPlaceholder;
+        } else if (key != null && key.equals(mInvalidPlaceholder)) {
+            placeholder = mPlaceholder;
+            mPlaceholderKey = null;
+        } else {
+            Bitmap bitmap = FastImageThumbHash.placeholder(key);
+            if (bitmap != null) {
+                BitmapDrawable drawable = new BitmapDrawable(getResources(), bitmap);
+                // Scaled up smoothly, as a blurred preview (also with
+                // imageRendering pixelated, which is for the image).
+                drawable.setFilterBitmap(true);
+                placeholder = drawable;
+                mPlaceholderKey = key;
+            } else {
+                placeholder = mPlaceholder;
+                mPlaceholderKey = null;
+                mInvalidPlaceholder = key;
+            }
+        }
+        if (placeholder == mShownPlaceholder) return;
+        boolean showing = mShowsPlaceholder;
+        mShownPlaceholder = placeholder;
+        if (showing) setImageDrawable(placeholder);
     }
 
     // The events JS has a handler for (the handledEvents prop): the view only
@@ -482,7 +548,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     private ValueAnimator mFade;
     @Nullable
     private Bitmap mFadeFrom;
-    // Or, instead of a copy, the defaultSource the view showed, with the
+    // Or, instead of a copy, the placeholder prop the view showed, with the
     // matrix it drew it with: FastImage's own drawable, which Glide doesn't
     // recycle, so it's drawn again as it was, rather than copied into a
     // bitmap the size of the view for every image that fades in over it.
@@ -508,7 +574,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         Drawable fromDrawable = null;
         Matrix fromMatrix = null;
         Drawable shown = getDrawable();
-        if (shown != null && mShowsDefaultSource && mFade == null) {
+        if (shown != null && mShowsPlaceholder && mFade == null) {
             // Its own state, so its alpha (see drawFadeFrom) is only its own.
             fromDrawable = shown.mutate();
             fromMatrix = new Matrix(getImageMatrix());
@@ -564,7 +630,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         invalidate();
     }
 
-    // Draws the defaultSource the view showed when the fade started (with
+    // Draws the placeholder prop the view showed when the fade started (with
     // `alpha`), as ImageView draws its drawable: inside the padding
     // (cropToPadding), with the matrix it had then.
     private void drawFadeFrom(Canvas canvas, Drawable drawable, int alpha) {
@@ -1001,14 +1067,14 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
                 : null;
     }
 
-    // Whether the image on screen is a cover one Glide cropped to what the
-    // view shows (CenterCrop or FastImageCrop, at the position it was loaded
-    // for). Glide can't crop animated WebPs and AVIFs, APNGs and
-    // defaultSource, and doesn't crop pixelated images or ones decoded at full
-    // size (downsample false).
+    // Whether the image on screen is a cover one Glide cropped to what the view
+    // shows (CenterCrop or FastImageCrop, at the position it was loaded for).
+    // Glide can't crop animated WebPs and AVIFs, APNGs and the placeholder
+    // prop, and doesn't crop pixelated images or ones decoded at full size
+    // (downsample false).
     private boolean shownCropped(Drawable drawable) {
         return mLayoutScaleType == ScaleType.CENTER_CROP && !mLayoutPixelated && mLayoutDownsampled
-                && drawable != mDefaultSource
+                && drawable != mShownPlaceholder
                 && (drawable instanceof BitmapDrawable || drawable instanceof GifDrawable);
     }
 
@@ -1025,13 +1091,14 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         updateImageMatrix();
     }
 
-    // Whether the view shows its defaultSource: FastImage's own drawable,
-    // which Glide doesn't recycle (see startFade).
-    private boolean mShowsDefaultSource = false;
+    // Whether the view shows its placeholder (the placeholder prop, or a
+    // source's): FastImage's own drawable, which Glide doesn't recycle (see
+    // startFade).
+    private boolean mShowsPlaceholder = false;
 
     @Override
     public void setImageDrawable(@Nullable Drawable drawable) {
-        mShowsDefaultSource = drawable != null && drawable == mDefaultSource;
+        mShowsPlaceholder = drawable != null && drawable == mShownPlaceholder;
         super.setImageDrawable(drawable);
         updateImageMatrix();
     }
@@ -1082,7 +1149,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     // edges at (view - image) * fraction + offset. Glide decodes a scale-down
     // image no larger than that (CenterInside), a none one at its size, and
     // crops a cover one to what the view shows (FastImageCrop), so it's drawn
-    // at this size. defaultSource (a resource) is already at its size on
+    // at this size. The placeholder prop (a resource) is already at its size on
     // screen, and so is a center image (its size in pixels, as ImageView's
     // CENTER_INSIDE draws it).
     private void updateImageMatrix() {
@@ -1116,13 +1183,17 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             setImageMatrix(matrix);
             return;
         }
-        if (mLayoutScaleType == ScaleType.CENTER_CROP || mLayoutScaleType == ScaleType.FIT_CENTER) {
+        // A source's placeholder (a ThumbHash or a blurDataUri) stands for an
+        // image whose size isn't known yet: with scale-down and none (which
+        // show an image at its own size), it's shown as with contain.
+        boolean hashFits = drawable == mShownPlaceholder && mPlaceholderKey != null;
+        if (mLayoutScaleType == ScaleType.CENTER_CROP || mLayoutScaleType == ScaleType.FIT_CENTER || hashFits) {
             float x = viewWidth / drawableWidth;
             float y = viewHeight / drawableHeight;
             float scale = mLayoutScaleType == ScaleType.CENTER_CROP ? Math.max(x, y) : Math.min(x, y);
             width = drawableWidth * scale;
             height = drawableHeight * scale;
-        } else if (drawable == mDefaultSource) {
+        } else if (drawable == mShownPlaceholder) {
             width = drawableWidth;
             height = drawableHeight;
         } else if (mImageWidth > 0 && mImageHeight > 0) {
@@ -1239,12 +1310,12 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     private boolean mRestarting = false;
 
     // The request for the image the view shows (from when it has loaded until
-    // another image or defaultSource replaces it), and the one loading. A new
-    // source starts with the shown one as a thumbnail, from the cache only, so
-    // the image stays until the new one has loaded instead of flashing blank
-    // (#747), also if the source changes again meanwhile. This is Glide's safe
-    // way to do that: the previous bitmap can't be kept in the view itself,
-    // since Glide reuses it once its request is cleared.
+    // another image or the placeholder prop replaces it), and the one loading.
+    // A new source starts with the shown one as a thumbnail, from the cache
+    // only, so the image stays until the new one has loaded instead of flashing
+    // blank (#747), also if the source changes again meanwhile. This is Glide's
+    // safe way to do that: the previous bitmap can't be kept in the view
+    // itself, since Glide reuses it once its request is cleared.
     @Nullable
     private RequestBuilder<Drawable> mShownRequest;
     @Nullable
@@ -1270,8 +1341,8 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         mRecyclingKey = recyclingKey;
         if (changed) {
             // No thumbnail of the current image, so Glide clears the view to
-            // defaultSource (or nothing) while the next one loads, nor a fade
-            // from it. Reload even if the source is the same.
+            // the placeholder prop (or nothing) while the next one loads, nor a
+            // fade from it. Reload even if the source is the same.
             mShownRequest = null;
             endFade();
             mNeedsReload = true;
@@ -1356,12 +1427,12 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     // reloadForSize does: it's decoded again from the cache and blurred or
     // fitted on Glide's threads, and the view keeps the current image (and its
     // layout, see onImageLoaded) until then. If that fails, it shows the image
-    // from Glide's caches; cache: 'web' skips them, so the view shows
-    // defaultSource (or nothing) then. Also while it's loading again that way
-    // (e.g. the blur changes every frame): that load is replaced. A load that
-    // hasn't finished starts again with the new blur, without a second
-    // onLoadStart. Nothing loaded (defaultSource, which isn't blurred, or
-    // nothing): the next load has the new blur.
+    // from Glide's caches; cache: 'web' skips them, so the view shows the
+    // placeholder prop (or nothing) then. Also while it's loading again that
+    // way (e.g. the blur changes every frame): that load is replaced. A load
+    // that hasn't finished starts again with the new blur, without a second
+    // onLoadStart. Nothing loaded (the placeholder prop, which isn't blurred,
+    // or nothing): the next load has the new blur.
     @SuppressLint("CheckResult")
     private void reblur() {
         if (requestManager == null || mBaseRequest == null) return;
@@ -1445,20 +1516,24 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         mLoadEnded = true;
     }
 
-    // The loading image failed (FastImageRequestListener). Glide shows
-    // defaultSource then, but not over a thumbnail: show it here, as iOS does.
+    // The loading image failed (FastImageRequestListener). Glide shows the
+    // placeholder prop then, but not over a thumbnail: show it here, as iOS
+    // does.
     void onImageFailed(boolean hadThumbnail) {
         mLoadEnded = true;
         endProgress();
         applyObjectFit();
         mShownRequest = null;
-        if (!hadThumbnail) return;
         final int load = mLoadCount;
-        // Not from within Glide's callback.
+        // Not from within Glide's callback. Without a thumbnail Glide shows the
+        // placeholder the request started with: a source placeholder that changed since
+        // shows the new one.
         post(new Runnable() {
             @Override
             public void run() {
-                if (load == mLoadCount) setImageDrawable(mDefaultSource);
+                if (load == mLoadCount && (hadThumbnail || getDrawable() != mShownPlaceholder)) {
+                    setImageDrawable(mShownPlaceholder);
+                }
             }
         });
     }
@@ -1499,8 +1574,9 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             mWaitedForSize = false;
             pickSource();
         }
+        updatePlaceholder();
         // Only reload for changes that affect the request (source,
-        // defaultSource, objectFit), not for every prop update.
+        // the placeholder prop, objectFit), not for every prop update.
         mNeedsReload = false;
         mBlurChanged = false;
         mFitChanged = false;
@@ -1520,7 +1596,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         mModel = null;
 
         // Nothing to show.
-        if (mSource == null && mDefaultSource == null) {
+        if (mSource == null && mShownPlaceholder == null) {
             mShownRequest = null;
             // Cancel existing requests.
             clearView(requestManager);
@@ -1541,8 +1617,8 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
                 : null;
 
         // A source without a uri (empty, missing or null), or one that can't be
-        // resolved: fire onError and onLoadEnd and show defaultSource, as on iOS
-        // (#1028, #945).
+        // resolved: fire onError and onLoadEnd and show the placeholder prop,
+        // as on iOS (#1028, #945).
         if (mSource != null && (imageSource == null || imageSource.getUri().toString().length() == 0)) {
             String error = "Invalid source: " + mSource;
             WritableMap event = new WritableNativeMap();
@@ -1555,12 +1631,13 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             clearView(requestManager);
 
             endProgress();
-            setImageDrawable(mDefaultSource);
+            setImageDrawable(mShownPlaceholder);
             return;
         }
 
-        // `imageSource` may be null and we still continue, if `defaultSource` is not null.
-        // What Glide loads: a FastImageUrl for a remote image.
+        // `imageSource` may be null and we still continue, if the placeholder
+        // prop is not null. What Glide loads: a FastImageUrl for a remote
+        // image.
         Object model = imageSource == null ? null : imageSource.getSourceForLoad();
 
         // Before the view clears (see shownCopy).
@@ -1600,8 +1677,8 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
                             .load(model)
                             .apply(FastImageViewConverter
                                     .getOptions(getContext(), imageSource, mSource)
-                                    .placeholder(mDefaultSource) // show until loaded
-                                    .fallback(mDefaultSource)); // null will not be treated as error
+                                    .placeholder(mShownPlaceholder) // show until loaded
+                                    .fallback(mShownPlaceholder)); // null will not be treated as error
             mBaseRequest = model == null ? null : base;
             mModel = model;
             // What into() would apply for the scale type, with the size
@@ -1609,7 +1686,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             RequestBuilder<Drawable> builder = base.clone().apply(renderingOptions(model));
             RequestBuilder<Drawable> request = builder.clone();
 
-            // Only defaultSource: it replaces the image.
+            // Only the placeholder prop: it replaces the image.
             if (model == null) {
                 meanwhile = null;
                 mShownRequest = null;

package/dist/index.cjs.js

@@ -260,10 +260,39 @@ var FastImageViewNativeComponent_default = (0, react_native.codegenNativeCompone
 //#region src/specs/NativeFastImageModule.ts
 var NativeFastImageModule_default = react_native.TurboModuleRegistry.get("FastImageModule");
 //#endregion
+//#region src/placeholders.ts
+function isImageName(value) {
+	return !/^[a-z][a-z\d+.-]*:/i.test(value) && !value.startsWith("/");
+}
+function hasSourcePlaceholder(value) {
+	return !!value && typeof value === "object" && ("thumbhash" in value || "blurDataUri" in value);
+}
+function dataUri(value) {
+	if (typeof value !== "string" || value === "") return void 0;
+	if (/^data:/i.test(value)) return value;
+	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("placeholder-url", `react-native-fast-image: \`placeholder\` and \`blurDataUri\` don't load urls: "${value.slice(0, 60)}" is ignored. Use a data uri (data:image/…), or for \`placeholder\`, a require()d image or the name of an image bundled with the app.`, "warn");
+}
+//#endregion
 //#region src/index.tsx
-const resolveDefaultSource = (defaultSource) => {
-	if (!defaultSource) return null;
-	const resolved = react_native.Image.resolveAssetSource(defaultSource);
+function withoutPlaceholders(source) {
+	if (!hasSourcePlaceholder(source)) return source;
+	const { thumbhash: _thumbhash, blurDataUri: _blurDataUri, ...rest } = source;
+	return rest;
+}
+function sourcePlaceholder(source) {
+	if (!source || typeof source !== "object") return "";
+	const { thumbhash, blurDataUri } = source;
+	return thumbhash || dataUri(blurDataUri) || "";
+}
+const resolvePlaceholder = (placeholder) => {
+	if (typeof placeholder === "string") {
+		if (isImageName(placeholder)) return react_native.Platform.OS === "android" ? placeholder : { uri: placeholder };
+		const uri = dataUri(placeholder);
+		if (!uri) return null;
+		return react_native.Platform.OS === "android" ? uri : { uri };
+	}
+	if (!placeholder) return null;
+	const resolved = react_native.Image.resolveAssetSource(placeholder);
 	if (!resolved) return null;
 	return react_native.Platform.OS === "android" ? resolved.uri : resolved;
 };
@@ -318,7 +347,7 @@ function builtInTransition() {
 	return resolveTransition(react_native.Platform.OS === "android", NO_TRANSITION);
 }
 let defaultTransition;
-function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, loop, transition, forwardedRef, ...viewProps }) {
+function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, loop, transition, loading: _loading, sizes: _sizes, forwardedRef, ...viewProps }) {
 	var _props$recyclingKey, _defaultTransition;
 	const { fallback, resizeMode: _resizeMode, ...props } = viewProps;
 	if (__DEV__ && fallback !== void 0) warnOnce("fallback", "react-native-fast-image: `fallback` was removed in 10.0, and does nothing: images always load natively. Remove it, or use React Native's Image for those images.", "warn");
@@ -326,10 +355,18 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 	const resolvedTintColor = tintColor != null ? tintColor : fromStyle(style, "tintColor");
 	const fit = resolveObjectFit(objectFit, style);
 	const position = objectPositionOrCentered(objectPosition);
-	const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
-	const single = Array.isArray(source) ? source[0] : source;
-	const resolvedSource = sources ? void 0 : react_native.Image.resolveAssetSource(single);
-	const resolvedDefaultSource = resolveDefaultSource(defaultSource);
+	const shared = hasSourcePlaceholder(placeholder) ? sourcePlaceholder(placeholder) : "";
+	const { resolvedSource, sources, sourcePlaceholders } = (0, react.useMemo)(() => {
+		const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
+		const single = Array.isArray(source) ? source[0] : source;
+		const placeholders = (sources !== null && sources !== void 0 ? sources : [single]).map((entry) => sourcePlaceholder(entry) || shared);
+		return {
+			resolvedSource: sources ? void 0 : react_native.Image.resolveAssetSource(withoutPlaceholders(single)),
+			sources: (sources === null || sources === void 0 ? void 0 : sources.some(hasSourcePlaceholder)) ? sources.map(withoutPlaceholders) : sources,
+			sourcePlaceholders: placeholders.some(Boolean) ? placeholders : void 0
+		};
+	}, [source, shared]);
+	const resolvedPlaceholder = resolvePlaceholder(hasSourcePlaceholder(placeholder) ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
 	return /* @__PURE__ */ react.default.createElement(FastImageViewNativeComponent_default, {
 		...props,
 		ref: forwardedRef,
@@ -339,7 +376,8 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		...resolveTransition(transition, (_defaultTransition = defaultTransition) !== null && _defaultTransition !== void 0 ? _defaultTransition : builtInTransition()),
 		source: resolvedSource,
 		sources,
-		defaultSource: resolvedDefaultSource,
+		sourcePlaceholders,
+		placeholder: resolvedPlaceholder,
 		onFastImageLoadStart: onLoadStart,
 		onFastImageProgress: onProgress,
 		handledEvents: handledEvents({

package/dist/index.cjs.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,
@@ -140,6 +149,8 @@ export type FastImageProps = $ReadOnly<{|
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
     imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
+    loading?: ?('lazy' | 'eager'),
+    sizes?: ?string,
     paused?: ?boolean,
     transition?: ?(boolean | number | Transition),
     downsample?: ?boolean,

package/dist/index.cjs.web.js

@@ -267,17 +267,24 @@ function cssPosition({ x, y }) {
 	return `${axis(x)} ${axis(y)}`;
 }
 //#endregion
+//#region src/placeholders.ts
+function hasSourcePlaceholder(value) {
+	return !!value && typeof value === "object" && ("thumbhash" in value || "blurDataUri" in value);
+}
+function dataUri(value) {
+	if (typeof value !== "string" || value === "") return void 0;
+	if (/^data:/i.test(value)) return value;
+	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("placeholder-url", `react-native-fast-image: \`placeholder\` and \`blurDataUri\` don't load urls: "${value.slice(0, 60)}" is ignored. Use a data uri (data:image/…), or for \`placeholder\`, a require()d image or the name of an image bundled with the app.`, "warn");
+}
+//#endregion
 //#region src/index.web.tsx
-var _useId;
 const notSupported = {
 	ok: false,
 	error: "Not supported on the web"
 };
-let ids = 0;
-const useCounterId = () => (0, react.useState)(() => `${++ids}`)[0];
-const useSvgId = (_useId = react.default.useId) !== null && _useId !== void 0 ? _useId : useCounterId;
 const useClientLayoutEffect = globalThis.document === void 0 ? react.useEffect : react.useLayoutEffect;
-function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadStart, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, forwardedRef, onLayout, pointerEvents, recyclingKey: _recyclingKey, loop: _loop, imageRendering: _imageRendering, paused: _paused, transition: _transition, downsample: _downsample, onProgress: _onProgress, ...props }) {
+function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadius, onLoadStart, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, loading, sizes, forwardedRef, onLayout, pointerEvents, recyclingKey: _recyclingKey, loop: _loop, imageRendering: _imageRendering, paused: _paused, transition: _transition, downsample: _downsample, onProgress: _onProgress, ...props }) {
+	var _resolveUri;
 	if (typeof __DEV__ !== "undefined" && __DEV__) warnIfChildren(children);
 	const { accessibilityLabel, "aria-label": ariaLabel, resizeMode: _resizeMode, ...viewProps } = props;
 	const label = ariaLabel || accessibilityLabel || void 0;
@@ -286,10 +293,15 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	const src = sized ? sized.src : resolveUri(source);
 	const srcSet = sized === null || sized === void 0 ? void 0 : sized.srcSet;
 	const key = srcSet !== null && srcSet !== void 0 ? srcSet : src;
-	const defaultUri = resolveUri(defaultSource);
+	const priority = sourcePriority(source);
+	const preview = hasSourcePlaceholder(placeholder) ? placeholder : void 0;
+	const blurUri = (_resolveUri = resolveUri(dataUri(shared(source, "blurDataUri", preview)))) !== null && _resolveUri !== void 0 ? _resolveUri : thumbhashUri(shared(source, "thumbhash", preview));
+	const defaultUri = blurUri !== null && blurUri !== void 0 ? blurUri : resolveUri(preview ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
 	const [result, setResult] = (0, react.useState)();
 	const ok = result && result.key === key ? result.ok : void 0;
-	const tintId = `fast-image-tint-${useSvgId().replace(/[^\w-]/g, "")}`;
+	const svgId = (0, react.useId)().replace(/[^\w-]/g, "");
+	const tintId = `fast-image-tint-${svgId}`;
+	const blurId = `fast-image-blur-${svgId}`;
 	const fit = resolveObjectFit(objectFit, style);
 	const position = cssPosition(objectPositionOrCentered(objectPosition));
 	const filter = [blurRadius ? `blur(${blurRadius}px)` : "", tintColor ? `url(#${tintId})` : ""].filter(Boolean).join(" ") || void 0;
@@ -307,15 +319,19 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	}, defaultUri && showDefault ? /* @__PURE__ */ react.default.createElement(Picture, {
 		key: `default ${defaultUri}`,
 		src: defaultUri,
-		fit,
+		loading,
+		priority,
+		fit: blurUri && (fit === "scale-down" || fit === "none") ? "contain" : fit,
 		position,
-		filter,
+		filter: blurUri ? [`url(#${blurId})`, tintColor ? `url(#${tintId})` : ""].filter(Boolean).join(" ") : filter,
 		alt: key ? "" : label !== null && label !== void 0 ? label : ""
 	}) : null, key && src ? /* @__PURE__ */ react.default.createElement(Picture, {
 		key: several ? "sizes" : key,
 		src,
 		srcSet,
-		lazy: !!several,
+		sizes,
+		loading,
+		priority,
 		fit,
 		position,
 		filter,
@@ -352,7 +368,29 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	}) : null, tintColor ? /* @__PURE__ */ react.default.createElement(TintFilter, {
 		id: tintId,
 		color: tintColor
-	}) : null);
+	}) : null, blurUri && showDefault ? /* @__PURE__ */ react.default.createElement(PreviewBlur, { id: blurId }) : null);
+}
+function thumbhashUri(hash) {
+	if (!hash) return void 0;
+	const decode = globalThis[Symbol.for("react-native-fast-image/thumbhash")];
+	if (decode) return decode(hash);
+	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("thumbhash-web", "react-native-fast-image: on the web, a `thumbhash` shows only with `import 'react-native-fast-image/thumbhash'` (it decodes them). Or make it a `blurDataUri` before it reaches the browser (e.g. on your server) with that module's thumbHashToBlurDataUri, which needs no JavaScript in the browser.", "warn");
+}
+function sourcePriority(source) {
+	const values = (Array.isArray(source) ? source : [source]).map((entry) => entry && typeof entry === "object" ? entry.priority : void 0);
+	return [
+		"high",
+		"normal",
+		"low"
+	].find((priority) => values.includes(priority));
+}
+function shared(source, key, preview) {
+	const values = (Array.isArray(source) ? source : [source]).map((entry) => {
+		var _ref;
+		const own = entry && typeof entry === "object" ? entry : void 0;
+		return (_ref = (own === null || own === void 0 ? void 0 : own.thumbhash) || dataUri(own === null || own === void 0 ? void 0 : own.blurDataUri) ? own : preview) === null || _ref === void 0 ? void 0 : _ref[key];
+	});
+	return values.every((value) => value && value === values[0]) ? values[0] : void 0;
 }
 function resolveUri(source) {
 	let uri;
@@ -400,7 +438,7 @@ const fill = {
 	width: "100%",
 	height: "100%"
 };
-function Picture({ src, srcSet, lazy, fit, position, filter, hidden, alt, onLoad, onError }) {
+function Picture({ src, srcSet, sizes, loading, priority, fit, position, filter, hidden, alt, onLoad, onError }) {
 	const image = (0, react.useRef)(null);
 	const mounted = (0, react.useRef)(true);
 	const handled = (0, react.useRef)(void 0);
@@ -437,8 +475,9 @@ function Picture({ src, srcSet, lazy, fit, position, filter, hidden, alt, onLoad
 		ref: image,
 		src,
 		srcSet,
-		sizes: srcSet ? "auto, 100vw" : void 0,
-		loading: lazy ? "lazy" : void 0,
+		sizes: srcSet ? sizes !== null && sizes !== void 0 ? sizes : "auto, 100vw" : void 0,
+		loading: loading === "eager" ? void 0 : "lazy",
+		fetchPriority: priority === "high" || priority === "low" ? priority : void 0,
 		alt,
 		draggable: false,
 		style: {
@@ -464,6 +503,20 @@ function TintFilter({ id, color }) {
 		operator: "in"
 	}))));
 }
+function PreviewBlur({ id }) {
+	return /* @__PURE__ */ react.default.createElement("svg", { style: tintStyle }, /* @__PURE__ */ react.default.createElement("defs", null, /* @__PURE__ */ react.default.createElement("filter", {
+		id,
+		x: "0",
+		y: "0",
+		width: "1",
+		height: "1",
+		primitiveUnits: "objectBoundingBox",
+		colorInterpolationFilters: "sRGB"
+	}, /* @__PURE__ */ react.default.createElement("feGaussianBlur", { stdDeviation: "0.06" }), /* @__PURE__ */ react.default.createElement("feComponentTransfer", null, /* @__PURE__ */ react.default.createElement("feFuncA", {
+		type: "table",
+		tableValues: "0 1 1 1 1"
+	})))));
+}
 const tintStyle = {
 	position: "absolute",
 	width: 0,

package/dist/index.cjs.web.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,
@@ -140,6 +149,8 @@ export type FastImageProps = $ReadOnly<{|
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
     imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
+    loading?: ?('lazy' | 'eager'),
+    sizes?: ?string,
     paused?: ?boolean,
     transition?: ?(boolean | number | Transition),
     downsample?: ?boolean,