react-native-fast-image 10.5.0 → 10.6.0

package/README.md

@@ -107,7 +107,7 @@ It's a single native view, which also takes React Native's View props, such as a
 
 #### `source`
 
-**Type:** `number | Source | Source[]`
+**Type:** `number | Source | (number | Source)[]`
 
 Source for the remote image to load: a `Source`, a `require()`d image, or an array of the same image at different sizes.
 
@@ -129,6 +129,7 @@ When `source` changes, the image that's showing stays until the new one has load
 - When the view's size changes so that another size fits better, it loads that one (with its load events), and keeps showing the current image until then, without a `transition`.
 - Each size is cached separately. A `cacheKey` applies to its own entry: give each size its own key (or none), or the sizes would replace each other in the cache.
 - `FastImage.preload`, `getCachePath` and `writeToCache` take one size: pass the one a view will show. An array fails with `{ ok: false, error }`.
+- A `require()`d image can be one of the sizes: its size is the file's.
 - An array of one is the same as that source.
 
 ---
@@ -291,7 +292,7 @@ Notes:
 
 **Type:** `number`
 
-**Deprecated:** Use `placeholder`, which does the same.
+**Deprecated:** Use `placeholder`, which does the same. With both, `placeholder` shows.
 
 ---
 

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

@@ -21,6 +21,7 @@ import com.bumptech.glide.RequestManager;
 import com.facebook.react.bridge.ColorPropConverter;
 import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.DynamicFromObject;
+import com.facebook.react.bridge.JavaOnlyArray;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.ReadableType;
@@ -307,23 +308,26 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl>
 
     @Override
     public void setSource(FastImageViewWithUrl view, Dynamic source) {
-        view.setSource(source.isNull() ? null : source.asMap());
+        // One source, or several (an array).
+        view.setSource(source.isNull() ? null
+                : source.getType() == ReadableType.Array ? source.asArray()
+                : JavaOnlyArray.of(source.asMap()));
     }
 
-    @Override
-    public void setSources(FastImageViewWithUrl view, Dynamic sources) {
-        view.setSources(sources.isNull() ? null : sources.asArray());
-    }
-
-    // The `placeholder` prop: a url to load apart from the image, as a source
-    // (a map), or the resolved asset's uri or a data uri (a string).
+    // The `placeholder` prop: a thumbhash or blurDataUri, or a url to load
+    // apart from the image, as a source (a map), or the resolved asset's uri
+    // or a data uri (a string).
     @Override
     public void setPlaceholder(FastImageViewWithUrl view, Dynamic source) {
         if (source.getType() == ReadableType.Map) {
+            ReadableMap map = source.asMap();
+            boolean hash = map.hasKey("thumbhash") || map.hasKey("blurDataUri");
             view.setPlaceholder(null);
-            view.setPlaceholderSource(source.asMap());
+            view.setPlaceholderHash(hash ? FastImageViewWithUrl.sourcePlaceholder(map) : null);
+            view.setPlaceholderSource(hash ? null : map);
             return;
         }
+        view.setPlaceholderHash(null);
         view.setPlaceholderSource(null);
         String uri = source.isNull() ? null : source.asString();
         if (uri != null && FastImageThumbHash.isDataUri(uri)) {
@@ -351,11 +355,6 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl>
         view.setRecyclingKey(recyclingKey);
     }
 
-    @Override
-    public void setSourcePlaceholders(FastImageViewWithUrl view, @Nullable ReadableArray placeholders) {
-        view.setSourcePlaceholders(placeholders);
-    }
-
     @Override
     public void setLoopCount(FastImageViewWithUrl view, int loopCount) {
         view.setLoopCount(loopCount);

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

@@ -48,6 +48,7 @@ import com.bumptech.glide.request.transition.Transition;
 import com.bumptech.glide.request.transition.TransitionFactory;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.ReadableType;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
 import com.facebook.react.modules.i18nmanager.I18nUtil;
@@ -58,6 +59,10 @@ import com.facebook.react.uimanager.PointerEvents;
 import com.facebook.react.uimanager.ReactPointerEventsView;
 import com.facebook.react.uimanager.style.LogicalEdge;
 
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Objects;
 import javax.annotation.Nonnull;
 
 class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEventsView, ReactHitSlopView {
@@ -213,16 +218,72 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         return false;
     }
 
-    public void setSource(@Nullable ReadableMap source) {
-        mNeedsReload = true;
-        mPropSource = source;
-        if (mSources == null) mSource = source;
+    // The `source` prop: one source, or several (sizes of one image), each
+    // with its thumbhash or blurDataUri if it has one. Only a change besides
+    // those loads again: a new thumbhash for the same image (e.g. one that
+    // arrives later) shows at once (see updatePlaceholder).
+    public void setSource(@Nullable ReadableArray sources) {
+        List<Object> key = sourceKey(sources);
+        if (!mHasSource || !Objects.equals(key, mSourceKey)) {
+            mHasSource = true;
+            mSourceKey = key;
+            mNeedsReload = true;
+            mSources = sources != null && sources.size() > 1 ? sources : null;
+            mSourceIndex = -1;
+            if (mSources == null) mSource = sources != null && sources.size() == 1 ? map(sources, 0) : null;
+        }
+        mSourcePlaceholders = new ArrayList<>();
+        for (int i = 0; sources != null && i < sources.size(); i++) {
+            mSourcePlaceholders.add(sourcePlaceholder(map(sources, i)));
+        }
+        updatePlaceholder();
+    }
+
+    // The sources without their thumbhashes and blurDataUris, to compare.
+    private boolean mHasSource = false;
+    @Nullable
+    private List<Object> mSourceKey = null;
+
+    @Nullable
+    private static List<Object> sourceKey(@Nullable ReadableArray sources) {
+        if (sources == null) return null;
+        List<Object> key = new ArrayList<>();
+        for (int i = 0; i < sources.size(); i++) {
+            ReadableMap source = map(sources, i);
+            key.add(source == null ? null : withoutPlaceholders(source));
+        }
+        return key;
+    }
+
+    // A source without its thumbhash and blurDataUri.
+    private static HashMap<String, Object> withoutPlaceholders(ReadableMap source) {
+        HashMap<String, Object> map = source.toHashMap();
+        map.remove("thumbhash");
+        map.remove("blurDataUri");
+        return map;
     }
 
-    // The `source` prop. With several `sources`, mSource is the one picked for
-    // the view's size instead.
     @Nullable
-    private ReadableMap mPropSource = null;
+    private static ReadableMap map(ReadableArray array, int index) {
+        return array.getType(index) == ReadableType.Map ? array.getMap(index) : null;
+    }
+
+    // A source's (or `placeholder`'s) ThumbHash, or its blurDataUri if it's a
+    // data uri (JS warns about another), or null.
+    @Nullable
+    static String sourcePlaceholder(@Nullable ReadableMap source) {
+        if (source == null) return null;
+        String thumbhash = string(source, "thumbhash");
+        if (thumbhash != null && !thumbhash.isEmpty()) return thumbhash;
+        String blurDataUri = string(source, "blurDataUri");
+        return blurDataUri != null && FastImageThumbHash.isDataUri(blurDataUri) ? blurDataUri : null;
+    }
+
+    @Nullable
+    private static String string(ReadableMap map, String key) {
+        return map.hasKey(key) && map.getType(key) == ReadableType.String ? map.getString(key) : null;
+    }
+
     // Several sources (2 or more) of the same image at different sizes, or
     // null: the view loads the one whose size is closest to its own.
     @Nullable
@@ -240,13 +301,6 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     @Nullable
     private FastImageViewManager mManager;
 
-    public void setSources(@Nullable ReadableArray sources) {
-        mNeedsReload = true;
-        mSources = sources != null && sources.size() > 1 ? sources : null;
-        mSourceIndex = -1;
-        if (mSources == null) mSource = mPropSource;
-    }
-
     // The box the image is drawn in: the view inside its padding, which is the
     // border widths (see updateBorderPadding).
     private int contentWidth() {
@@ -310,19 +364,20 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         return true;
     }
 
+    // Shows at once, as a new source placeholder does (see updatePlaceholder),
+    // without loading the image again.
     public void setPlaceholder(@Nullable Drawable placeholder) {
-        // None again (the placeholder prop is a url) doesn't reload.
-        if (placeholder == null && mPlaceholder == null) return;
-        mNeedsReload = true;
         mPlaceholder = placeholder;
+        updatePlaceholder();
     }
 
-    // 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.
+    // The sources' ThumbHashes or blurDataUris, by the source's index (null
+    // for none): the picked source's shows instead of the placeholder prop.
+    private List<String> mSourcePlaceholders = new ArrayList<>();
+    // `placeholder` as a thumbhash or blurDataUri: shows for the sources
+    // without their own.
     @Nullable
-    private ReadableArray mSourcePlaceholders = null;
+    private String mPlaceholderHash = 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.
@@ -337,8 +392,9 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     @Nullable
     private String mInvalidPlaceholder = null;
 
-    public void setSourcePlaceholders(@Nullable ReadableArray placeholders) {
-        mSourcePlaceholders = placeholders;
+    public void setPlaceholderHash(@Nullable String hash) {
+        if (Objects.equals(hash, mPlaceholderHash)) return;
+        mPlaceholderHash = hash;
         updatePlaceholder();
     }
 
@@ -450,13 +506,15 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         }
     }
 
-    // The picked source's ThumbHash or blurDataUri, or null.
+    // The picked source's ThumbHash or blurDataUri, or `placeholder`'s, 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;
+        // None until one is picked.
+        if (index < 0) return null;
+        String key = index < mSourcePlaceholders.size() ? mSourcePlaceholders.get(index) : null;
+        return key != null ? key : mPlaceholderHash;
     }
 
     // Sets mShownPlaceholder for the picked source. A view showing the previous
@@ -1759,7 +1817,8 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         // 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;
+            // Without its thumbhash or blurDataUri (a data uri can be long).
+            String error = "Invalid source: " + withoutPlaceholders(mSource);
             WritableMap event = new WritableNativeMap();
             event.putString("error", error);
             FastImageEvents.send(this, REACT_ON_ERROR_EVENT, event);

package/dist/index.cjs.js

@@ -280,16 +280,6 @@ function dataUri(value) {
 }
 //#endregion
 //#region src/index.tsx
-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 };
@@ -361,18 +351,12 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadSt
 	const resolvedTintColor = tintColor != null ? tintColor : fromStyle(style, "tintColor");
 	const fit = resolveObjectFit(objectFit, style);
 	const position = objectPositionOrCentered(objectPosition);
-	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 = (_placeholderSource = placeholderSource(placeholder)) !== null && _placeholderSource !== void 0 ? _placeholderSource : resolvePlaceholder(hasSourcePlaceholder(placeholder) ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
+	const resolvedSource = (0, react.useMemo)(() => {
+		for (const entry of [source].flat()) dataUri(entry === null || entry === void 0 ? void 0 : entry.blurDataUri);
+		const single = Array.isArray(source) && source.length === 1 ? source[0] : source;
+		return Array.isArray(single) ? single.map((entry) => react_native.Image.resolveAssetSource(entry)) : react_native.Image.resolveAssetSource(single);
+	}, [source]);
+	const resolvedPlaceholder = hasSourcePlaceholder(placeholder) ? placeholder.thumbhash || dataUri(placeholder.blurDataUri) ? placeholder : resolvePlaceholder(defaultSource) : (_placeholderSource = placeholderSource(placeholder)) !== null && _placeholderSource !== void 0 ? _placeholderSource : resolvePlaceholder(placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
 	return /* @__PURE__ */ react.default.createElement(FastImageViewNativeComponent_default, {
 		...props,
 		ref: forwardedRef,
@@ -381,8 +365,6 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadSt
 		loopCount: loopCount(loop),
 		...resolveTransition(transition, (_defaultTransition = defaultTransition) !== null && _defaultTransition !== void 0 ? _defaultTransition : builtInTransition()),
 		source: resolvedSource,
-		sources,
-		sourcePlaceholders,
 		placeholder: resolvedPlaceholder,
 		onFastImageLoadStart: onLoadStart,
 		onFastImageProgress: onProgress,

package/dist/index.cjs.js.flow

@@ -145,7 +145,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource> | number),
+    source?: ?(FastImageSource | Array<FastImageSource | number> | number),
     placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,

package/dist/index.cjs.web.js

@@ -303,7 +303,7 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	const blurUri = (_resolveUri = resolveUri(dataUri(shared(source, "blurDataUri", preview)))) !== null && _resolveUri !== void 0 ? _resolveUri : thumbhashUri(shared(source, "thumbhash", preview));
 	const urlPlaceholder = (_placeholderSource = placeholderSource(placeholder)) === null || _placeholderSource === void 0 ? void 0 : _placeholderSource.uri;
 	const [failedPlaceholder, setFailedPlaceholder] = (0, react.useState)();
-	const defaultUri = blurUri !== null && blurUri !== void 0 ? blurUri : resolveUri(preview || urlPlaceholder ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
+	const defaultUri = blurUri !== null && blurUri !== void 0 ? blurUri : resolveUri(preview ? defaultSource : urlPlaceholder ? void 0 : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
 	const [result, setResult] = (0, react.useState)();
 	const ok = result && result.key === key ? result.ok : void 0;
 	const svgId = (0, react.useId)().replace(/[^\w-]/g, "");
@@ -416,10 +416,9 @@ function shared(source, key, preview) {
 function resolveUri(source) {
 	let uri;
 	if (typeof source === "number") {
-		var _asset$scales$;
 		const asset = (0, react_native_web_dist_modules_AssetRegistry.getAssetByID)(source);
 		if (!asset) return void 0;
-		const scale = asset.scales.reduce((best, scale) => Math.abs(scale - react_native.PixelRatio.get()) < Math.abs(best - react_native.PixelRatio.get()) ? scale : best, (_asset$scales$ = asset.scales[0]) !== null && _asset$scales$ !== void 0 ? _asset$scales$ : 1);
+		const scale = assetScale(asset);
 		const suffix = scale !== 1 ? `@${scale}x` : "";
 		uri = `${asset.httpServerLocation}/${asset.name}${suffix}.${asset.type}`;
 	} else if (typeof source === "string") uri = source;
@@ -428,9 +427,24 @@ function resolveUri(source) {
 	const svg = uri === null || uri === void 0 ? void 0 : uri.match(/^(data:image\/svg\+xml;utf8,)(.*)/);
 	return svg ? svg[1] + encodeURIComponent(svg[2]) : uri || void 0;
 }
-function sizedSources(sources) {
+function assetScale(asset) {
+	var _asset$scales$;
+	return asset.scales.reduce((best, scale) => Math.abs(scale - react_native.PixelRatio.get()) < Math.abs(best - react_native.PixelRatio.get()) ? scale : best, (_asset$scales$ = asset.scales[0]) !== null && _asset$scales$ !== void 0 ? _asset$scales$ : 1);
+}
+function sizedSource(source) {
+	if (typeof source !== "number") return source;
+	const asset = (0, react_native_web_dist_modules_AssetRegistry.getAssetByID)(source);
+	return asset ? {
+		uri: resolveUri(source),
+		width: asset.width,
+		height: asset.height,
+		scale: assetScale(asset)
+	} : void 0;
+}
+function sizedSources(entries) {
 	var _largest$uri, _sources$find;
-	const widths = sources.filter((source) => (source === null || source === void 0 ? void 0 : source.uri) && source.width).map((source) => {
+	const sources = entries.map(sizedSource);
+	const widths = sources.filter((source) => !!(source === null || source === void 0 ? void 0 : source.uri) && !!source.width).map((source) => {
 		var _source$width, _source$scale;
 		return {
 			uri: source.uri,

package/dist/index.cjs.web.js.flow

@@ -145,7 +145,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource> | number),
+    source?: ?(FastImageSource | Array<FastImageSource | number> | number),
     placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,

package/dist/index.d.ts

@@ -331,9 +331,10 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * - `FastImage.preload`, `getCachePath` and `writeToCache` take one size:
      *   pass the one a view will show. An array fails with
      *   `{ ok: false, error }`.
+     * - A `require()`d image can be one of the sizes: its size is the file's.
      * - An array of one is the same as that source.
      */
-    source?: Source | Source[] | ImageRequireSource;
+    source?: Source | Array<Source | ImageRequireSource> | ImageRequireSource;
     /**
      * A placeholder shown while the image loads, and if it fails to load:
      *
@@ -363,7 +364,8 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      */
     placeholder?: ImageRequireSource | string | SourcePlaceholder | PlaceholderSource;
     /**
-     * @deprecated Use `placeholder`, which does the same.
+     * @deprecated Use `placeholder`, which does the same. With both,
+     * `placeholder` shows.
      */
     defaultSource?: ImageRequireSource;
     /**

package/dist/index.js

@@ -253,16 +253,6 @@ function dataUri(value) {
 }
 //#endregion
 //#region src/index.tsx
-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 Platform.OS === "android" ? placeholder : { uri: placeholder };
@@ -334,18 +324,12 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadSt
 	const resolvedTintColor = tintColor != null ? tintColor : fromStyle(style, "tintColor");
 	const fit = resolveObjectFit(objectFit, style);
 	const position = objectPositionOrCentered(objectPosition);
-	const shared = hasSourcePlaceholder(placeholder) ? sourcePlaceholder(placeholder) : "";
-	const { resolvedSource, sources, sourcePlaceholders } = 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 : 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 = (_placeholderSource = placeholderSource(placeholder)) !== null && _placeholderSource !== void 0 ? _placeholderSource : resolvePlaceholder(hasSourcePlaceholder(placeholder) ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
+	const resolvedSource = useMemo(() => {
+		for (const entry of [source].flat()) dataUri(entry === null || entry === void 0 ? void 0 : entry.blurDataUri);
+		const single = Array.isArray(source) && source.length === 1 ? source[0] : source;
+		return Array.isArray(single) ? single.map((entry) => Image.resolveAssetSource(entry)) : Image.resolveAssetSource(single);
+	}, [source]);
+	const resolvedPlaceholder = hasSourcePlaceholder(placeholder) ? placeholder.thumbhash || dataUri(placeholder.blurDataUri) ? placeholder : resolvePlaceholder(defaultSource) : (_placeholderSource = placeholderSource(placeholder)) !== null && _placeholderSource !== void 0 ? _placeholderSource : resolvePlaceholder(placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
 	return /* @__PURE__ */ React.createElement(FastImageViewNativeComponent_default, {
 		...props,
 		ref: forwardedRef,
@@ -354,8 +338,6 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadSt
 		loopCount: loopCount(loop),
 		...resolveTransition(transition, (_defaultTransition = defaultTransition) !== null && _defaultTransition !== void 0 ? _defaultTransition : builtInTransition()),
 		source: resolvedSource,
-		sources,
-		sourcePlaceholders,
 		placeholder: resolvedPlaceholder,
 		onFastImageLoadStart: onLoadStart,
 		onFastImageProgress: onProgress,

package/dist/index.js.flow

@@ -145,7 +145,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource> | number),
+    source?: ?(FastImageSource | Array<FastImageSource | number> | number),
     placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,

package/dist/index.web.js

@@ -276,7 +276,7 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	const blurUri = (_resolveUri = resolveUri(dataUri(shared(source, "blurDataUri", preview)))) !== null && _resolveUri !== void 0 ? _resolveUri : thumbhashUri(shared(source, "thumbhash", preview));
 	const urlPlaceholder = (_placeholderSource = placeholderSource(placeholder)) === null || _placeholderSource === void 0 ? void 0 : _placeholderSource.uri;
 	const [failedPlaceholder, setFailedPlaceholder] = useState();
-	const defaultUri = blurUri !== null && blurUri !== void 0 ? blurUri : resolveUri(preview || urlPlaceholder ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
+	const defaultUri = blurUri !== null && blurUri !== void 0 ? blurUri : resolveUri(preview ? defaultSource : urlPlaceholder ? void 0 : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
 	const [result, setResult] = useState();
 	const ok = result && result.key === key ? result.ok : void 0;
 	const svgId = useId().replace(/[^\w-]/g, "");
@@ -389,10 +389,9 @@ function shared(source, key, preview) {
 function resolveUri(source) {
 	let uri;
 	if (typeof source === "number") {
-		var _asset$scales$;
 		const asset = getAssetByID(source);
 		if (!asset) return void 0;
-		const scale = asset.scales.reduce((best, scale) => Math.abs(scale - PixelRatio.get()) < Math.abs(best - PixelRatio.get()) ? scale : best, (_asset$scales$ = asset.scales[0]) !== null && _asset$scales$ !== void 0 ? _asset$scales$ : 1);
+		const scale = assetScale(asset);
 		const suffix = scale !== 1 ? `@${scale}x` : "";
 		uri = `${asset.httpServerLocation}/${asset.name}${suffix}.${asset.type}`;
 	} else if (typeof source === "string") uri = source;
@@ -401,9 +400,24 @@ function resolveUri(source) {
 	const svg = uri === null || uri === void 0 ? void 0 : uri.match(/^(data:image\/svg\+xml;utf8,)(.*)/);
 	return svg ? svg[1] + encodeURIComponent(svg[2]) : uri || void 0;
 }
-function sizedSources(sources) {
+function assetScale(asset) {
+	var _asset$scales$;
+	return asset.scales.reduce((best, scale) => Math.abs(scale - PixelRatio.get()) < Math.abs(best - PixelRatio.get()) ? scale : best, (_asset$scales$ = asset.scales[0]) !== null && _asset$scales$ !== void 0 ? _asset$scales$ : 1);
+}
+function sizedSource(source) {
+	if (typeof source !== "number") return source;
+	const asset = getAssetByID(source);
+	return asset ? {
+		uri: resolveUri(source),
+		width: asset.width,
+		height: asset.height,
+		scale: assetScale(asset)
+	} : void 0;
+}
+function sizedSources(entries) {
 	var _largest$uri, _sources$find;
-	const widths = sources.filter((source) => (source === null || source === void 0 ? void 0 : source.uri) && source.width).map((source) => {
+	const sources = entries.map(sizedSource);
+	const widths = sources.filter((source) => !!(source === null || source === void 0 ? void 0 : source.uri) && !!source.width).map((source) => {
 		var _source$width, _source$scale;
 		return {
 			uri: source.uri,

package/dist/index.web.js.flow

@@ -145,7 +145,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource> | number),
+    source?: ?(FastImageSource | Array<FastImageSource | number> | number),
     placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,

package/dist/specs/FastImageViewNativeComponent.d.ts

@@ -20,9 +20,7 @@ type LoadEndEvent = Readonly<{
 }>;
 export interface NativeProps extends ViewProps {
     source?: CodegenTypes.UnsafeMixed;
-    sources?: CodegenTypes.UnsafeMixed;
     placeholder?: CodegenTypes.UnsafeMixed;
-    sourcePlaceholders?: ReadonlyArray<string>;
     objectFit?: CodegenTypes.WithDefault<string, 'cover'>;
     objectPositionX?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.5>;
     objectPositionXOffset?: CodegenTypes.Float;

package/ios/FastImage/FFFThumbHash.h

@@ -15,6 +15,9 @@ NS_ASSUME_NONNULL_BEGIN
 // Main thread.
 + (nullable UIImage*) imageForPlaceholder: (nullable NSString*)placeholder;
 
+// Whether a placeholder is a data uri (a blurDataUri) rather than a ThumbHash.
++ (BOOL) isDataUri: (nullable NSString*)placeholder;
+
 // The placeholder for a base64 ThumbHash (standard or url-safe, with or
 // without padding), or nil for an empty or invalid one. Main thread.
 + (nullable UIImage*) imageForThumbHash: (nullable NSString*)thumbhash;

package/ios/FastImage/FFFThumbHash.m

@@ -200,8 +200,12 @@ static UIImage* FFFBlurredPreview(UIImage* image) {
     return cache;
 }
 
++ (BOOL) isDataUri: (NSString*)placeholder {
+    return placeholder && [placeholder rangeOfString: @"data:" options: NSCaseInsensitiveSearch | NSAnchoredSearch].location != NSNotFound;
+}
+
 + (UIImage*) imageForPlaceholder: (NSString*)placeholder {
-    if ([placeholder rangeOfString: @"data:" options: NSCaseInsensitiveSearch | NSAnchoredSearch].location == NSNotFound) {
+    if (![self isDataUri: placeholder]) {
         return [self imageForThumbHash: placeholder];
     }
     UIImage* cached = [[self cache] objectForKey: placeholder];

package/ios/FastImage/FFFastImageView.h

@@ -28,9 +28,8 @@ typedef NS_ENUM(NSInteger, FFFObjectFit) {
 @property (nonatomic, copy) RCTDirectEventBlock onFastImageLoad;
 @property (nonatomic, copy) RCTDirectEventBlock onFastImageLoadEnd;
 @property (nonatomic, assign) FFFObjectFit objectFit;
-@property (nonatomic, strong) FFFastImageSource *source;
-// Several sources (2 or more) of the same image at different sizes: the view
-// loads the one whose size is closest to its own.
+// The `source` prop: one source, or several (sizes of one image), of which
+// the view loads the one whose size is closest to its own.
 @property (nonatomic, copy) NSArray<FFFastImageSource *> *sources;
 // The `placeholder` prop.
 @property (nonatomic, strong) UIImage *placeholder;
@@ -38,11 +37,14 @@ typedef NS_ENUM(NSInteger, FFFObjectFit) {
 // image, at a high priority (or only from the cache, with cache cacheOnly),
 // it shows over the other placeholders once it has.
 @property (nonatomic, strong) FFFastImageSource *placeholderSource;
-// The `sourcePlaceholders` prop, by the source's index (an empty string for
-// none; one for a single source): the picked source's ThumbHash or
-// blurDataUri (a data uri) shows instead of placeholder. JS sends them apart
-// from the sources, so a new one for the same image doesn't load it again.
+// The sources' ThumbHashes or blurDataUris (data uris), by the source's index
+// (an empty string for none): the picked source's shows instead of
+// placeholder. Set apart from the sources, so a new one for the same image
+// doesn't load it again.
 @property (nonatomic, copy) NSArray<NSString *> *sourcePlaceholders;
+// `placeholder` as a thumbhash or blurDataUri: shows for the sources without
+// their own.
+@property (nonatomic, copy) NSString *placeholderHash;
 @property (nonatomic, strong) UIColor *imageColor;
 // When it changes, the next image doesn't replace the current one: the view
 // clears first (for views reused for other content, like list rows).

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.
@@ -749,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;
     }
@@ -847,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 {
@@ -859,6 +854,11 @@ NSString *FFFErrorMessage(NSError *error)
     [self updateHashImage];
 }
 
+- (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.
@@ -912,6 +912,9 @@ NSString *FFFErrorMessage(NSError *error)
 }
 
 - (void) setPlaceholderSource: (FFFastImageSource*)placeholderSource {
+    if (!placeholderSource && !_placeholderSource) {
+        return;
+    }
     _placeholderSource = placeholderSource;
     [self cancelUrlPlaceholderLoad];
     [self showUrlPlaceholderImage: nil];
@@ -979,14 +982,18 @@ NSString *FFFErrorMessage(NSError *error)
     [self showChangedPlaceholder: previous showing: showing];
 }
 
-// The picked source's ThumbHash or blurDataUri, or nil.
+// 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

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,41 @@ 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.
@@ -242,25 +278,36 @@ 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);
-        BOOL loads = FFFIsUrlPlaceholder(placeholder);
-        view.placeholder = placeholder && !loads ? [RCTConvert UIImage:placeholder] : 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.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.5.0",
+    "version": "10.6.0",
     "description": "FastImage, performant React Native image component.",
     "keywords": [
         "cache",

package/src/index.js.flow

@@ -145,7 +145,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource> | number),
+    source?: ?(FastImageSource | Array<FastImageSource | number> | number),
     placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,

package/src/index.tsx

@@ -362,9 +362,10 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * - `FastImage.preload`, `getCachePath` and `writeToCache` take one size:
      *   pass the one a view will show. An array fails with
      *   `{ ok: false, error }`.
+     * - A `require()`d image can be one of the sizes: its size is the file's.
      * - An array of one is the same as that source.
      */
-    source?: Source | Source[] | ImageRequireSource
+    source?: Source | Array<Source | ImageRequireSource> | ImageRequireSource
     /**
      * A placeholder shown while the image loads, and if it fails to load:
      *
@@ -398,7 +399,8 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
         | SourcePlaceholder
         | PlaceholderSource
     /**
-     * @deprecated Use `placeholder`, which does the same.
+     * @deprecated Use `placeholder`, which does the same. With both,
+     * `placeholder` shows.
      */
     defaultSource?: ImageRequireSource
     /**
@@ -707,25 +709,6 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
     children?: "FastImage doesn't take children: use FastImageBackground for content over an image"
 }
 
-// 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 = (
     // A source object here has no url (e.g. { uri: name }, a bundled image).
     placeholder?: ImageRequireSource | string | PlaceholderSource,
@@ -911,53 +894,32 @@ function FastImageBase({
     const fit = resolveObjectFit(objectFit, style)
     const position = objectPositionOrCentered(objectPosition)
 
-    // 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,
+    // One source, or several in an array, picked from natively for the
+    // view's size (one in an array is a plain source), with their thumbhashes
+    // and blurDataUris: the native view doesn't load the image again when
+    // only those change. Memoized on source, so an unchanged source reaches
+    // the native view as the same object, and React's prop diff stops at it.
+    const resolvedSource = useMemo(() => {
+        // A blurDataUri that isn't a data uri is ignored, with a warning.
+        for (const entry of [source].flat()) {
+            dataUri((entry as Source | undefined)?.blurDataUri)
         }
-    }, [source, shared])
-    // A url in `placeholder` goes to the native view as a source, loaded
-    // apart from the image, in place of defaultSource. A thumbhash or
-    // blurDataUri goes in sourcePlaceholders instead: it isn't an image to
-    // show as it is, but defaultSource still is.
-    const resolvedPlaceholder =
-        placeholderSource(placeholder) ??
-        resolvePlaceholder(
-            hasSourcePlaceholder(placeholder)
-                ? defaultSource
-                : (placeholder ?? defaultSource),
-        )
+        const single =
+            Array.isArray(source) && source.length === 1 ? source[0] : source
+        return Array.isArray(single)
+            ? single.map((entry) => Image.resolveAssetSource(entry as any))
+            : Image.resolveAssetSource(single as any)
+    }, [source])
+    // `placeholder` as the native view takes it: a thumbhash or blurDataUri
+    // as it is (for the sources without their own), a url as a source loaded
+    // apart from the image, or an image shown at once. defaultSource only
+    // applies without one (an empty thumbhash or blurDataUri is none).
+    const resolvedPlaceholder = hasSourcePlaceholder(placeholder)
+        ? placeholder.thumbhash || dataUri(placeholder.blurDataUri)
+            ? placeholder
+            : resolvePlaceholder(defaultSource)
+        : (placeholderSource(placeholder) ??
+          resolvePlaceholder(placeholder ?? defaultSource))
 
     return (
         <FastImageView
@@ -974,8 +936,6 @@ function FastImageBase({
                 defaultTransition ?? builtInTransition(),
             )}
             source={resolvedSource}
-            sources={sources}
-            sourcePlaceholders={sourcePlaceholders}
             placeholder={resolvedPlaceholder}
             onFastImageLoadStart={onLoadStart}
             onFastImageProgress={onProgress}

package/src/index.web.tsx

@@ -141,14 +141,18 @@ function FastImageBase({
     // like any image: it can't look in its cache only (cache: 'cacheOnly').
     const urlPlaceholder = placeholderSource(placeholder)?.uri
     const [failedPlaceholder, setFailedPlaceholder] = useState<string>()
-    // A thumbhash or blurDataUri in `placeholder` isn't an image to show as it
-    // is, nor is a url (above): defaultSource still is.
+    // defaultSource only shows without `placeholder`, as on iOS and Android,
+    // or in place of a thumbhash or blurDataUri the web can't show (one of
+    // several sizes', or a thumbhash without react-native-fast-image/thumbhash,
+    // or an empty one). Not with a url (above).
     const defaultUri =
         blurUri ??
         resolveUri(
-            preview || urlPlaceholder
+            preview
                 ? defaultSource
-                : (placeholder ?? defaultSource),
+                : urlPlaceholder
+                  ? undefined
+                  : (placeholder ?? defaultSource),
         )
     // Whether the image for `key` loaded, or failed.
     const [result, setResult] = useState<{ key: string; ok: boolean }>()
@@ -341,14 +345,7 @@ function resolveUri(source: unknown): string | undefined {
     if (typeof source === 'number') {
         const asset: PackagerAsset | undefined = getAssetByID(source)
         if (!asset) return undefined
-        const scale = asset.scales.reduce(
-            (best, scale) =>
-                Math.abs(scale - PixelRatio.get()) <
-                Math.abs(best - PixelRatio.get())
-                    ? scale
-                    : best,
-            asset.scales[0] ?? 1,
-        )
+        const scale = assetScale(asset)
         const suffix = scale !== 1 ? `@${scale}x` : ''
         uri = `${asset.httpServerLocation}/${asset.name}${suffix}.${asset.type}`
     } else if (typeof source === 'string') {
@@ -370,6 +367,36 @@ type PackagerAsset = {
     name: string
     type: string
     scales: number[]
+    width?: number
+    height?: number
+}
+
+// The scale of an asset's file closest to the screen's.
+function assetScale(asset: PackagerAsset): number {
+    return asset.scales.reduce(
+        (best, scale) =>
+            Math.abs(scale - PixelRatio.get()) <
+            Math.abs(best - PixelRatio.get())
+                ? scale
+                : best,
+        asset.scales[0] ?? 1,
+    )
+}
+
+// One of several sizes: a require()d image in react-native-web's asset
+// registry as a source with its file's size (Expo's web builds make it a
+// { uri, width, height } object already).
+function sizedSource(source: Source | number): Source | undefined {
+    if (typeof source !== 'number') return source
+    const asset: PackagerAsset | undefined = getAssetByID(source)
+    return asset
+        ? {
+              uri: resolveUri(source),
+              width: asset.width,
+              height: asset.height,
+              scale: assetScale(asset),
+          }
+        : undefined
 }
 
 // Several sizes of an image, as a srcset (each size's width, times its
@@ -379,9 +406,10 @@ type PackagerAsset = {
 // is laid out at; it only applies to lazy images, and otherwise, or in
 // browsers without it, the next value, 100vw (the viewport's width). src is the largest, for browsers without
 // srcset.
-function sizedSources(sources: Source[]) {
+function sizedSources(entries: (Source | number)[]) {
+    const sources = entries.map(sizedSource)
     const widths = sources
-        .filter((source) => source?.uri && source.width)
+        .filter((source): source is Source => !!source?.uri && !!source.width)
         .map((source) => ({
             uri: source.uri as string,
             width: Math.round((source.width ?? 0) * (source.scale ?? 1)),

package/src/specs/FastImageViewNativeComponent.ts

@@ -40,21 +40,18 @@ type LoadEndEvent = Readonly<{
 }>
 
 export interface NativeProps extends ViewProps {
-    // A source ({ uri, headers, priority, cache, ... }), as the native
-    // sides read it.
+    // The `source` prop: a source ({ uri, headers, priority, cache, ... },
+    // with its thumbhash or blurDataUri), or several (sizes of one image) in
+    // an array, picked from for the view's size. A change to the thumbhashes
+    // and blurDataUris only doesn't load the image again.
     source?: CodegenTypes.UnsafeMixed
-    // Several sources (sizes of one image), picked from for the view's size.
-    sources?: CodegenTypes.UnsafeMixed
-    // The `placeholder` prop: a url to load apart from the image, as a source
-    // ({ uri, headers, cacheKey, cache }), or an image shown at once: a
-    // resolved asset source ({ uri, width, height, scale }) or a data uri
-    // ({ uri } on iOS; the uri on Android, as a string).
+    // The `placeholder` prop: a thumbhash or blurDataUri ({ thumbhash } or
+    // { blurDataUri }, for the sources without their own), a url to load
+    // apart from the image, as a source ({ uri, headers, cacheKey, cache }),
+    // or an image shown at once: a resolved asset source ({ uri, width,
+    // height, scale }) or a data uri ({ uri } on iOS; the uri on Android, as
+    // a string).
     placeholder?: CodegenTypes.UnsafeMixed
-    // What shows in place of placeholder while a source loads: its ThumbHash,
-    // or its blurDataUri (blurred natively), by the source's index ('' for
-    // none; one for a single source). Apart from the sources, so a new one
-    // for the same image doesn't load it again.
-    sourcePlaceholders?: ReadonlyArray<string>
     // objectFit, resolved (fill, contain, cover, none or scale-down).
     objectFit?: CodegenTypes.WithDefault<string, 'cover'>
     // objectPosition, as CSS computes it: on each axis the image's left or top