react-native-fast-image 10.4.0 → 10.6.0

package/dist/index.cjs.web.js

@@ -268,13 +268,18 @@ function cssPosition({ x, y }) {
 }
 //#endregion
 //#region src/placeholders.ts
+function placeholderSource(value) {
+	const uri = typeof value === "string" ? value : value && typeof value === "object" ? value.uri : void 0;
+	if (typeof uri !== "string" || !/^https?:/i.test(uri)) return void 0;
+	return typeof value === "string" ? { uri } : value;
+}
 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");
+	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("placeholder-url", `react-native-fast-image: \`blurDataUri\` takes a data uri (data:image/…): "${value.slice(0, 60)}" is ignored. For a placeholder loaded from a url, use \`placeholder\`.`, "warn");
 }
 //#endregion
 //#region src/index.web.tsx
@@ -284,7 +289,7 @@ const notSupported = {
 };
 const useClientLayoutEffect = globalThis.document === void 0 ? react.useEffect : react.useLayoutEffect;
 function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadius, onLoadStart, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, loading, sizes, dynamicRangeLimit, forwardedRef, onLayout, pointerEvents, recyclingKey: _recyclingKey, loop: _loop, imageRendering: _imageRendering, paused: _paused, transition: _transition, downsample: _downsample, onProgress: _onProgress, ...props }) {
-	var _resolveUri;
+	var _resolveUri, _placeholderSource;
 	if (typeof __DEV__ !== "undefined" && __DEV__) warnIfChildren(children);
 	const { accessibilityLabel, "aria-label": ariaLabel, resizeMode: _resizeMode, ...viewProps } = props;
 	const label = ariaLabel || accessibilityLabel || void 0;
@@ -296,7 +301,9 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	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 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 ? 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, "");
@@ -305,7 +312,7 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	const fit = resolveObjectFit(objectFit, style);
 	const position = cssPosition(objectPositionOrCentered(objectPosition));
 	const filter = [blurRadius ? `blur(${blurRadius}px)` : "", tintColor ? `url(#${tintId})` : ""].filter(Boolean).join(" ") || void 0;
-	const showDefault = !!defaultUri && ok !== true;
+	const showDefault = ok !== true;
 	useClientLayoutEffect(() => {
 		if (key) onLoadStart === null || onLoadStart === void 0 || onLoadStart();
 	}, [key]);
@@ -326,6 +333,18 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 		position,
 		filter: blurUri ? [`url(#${blurId})`, tintColor ? `url(#${tintId})` : ""].filter(Boolean).join(" ") : filter,
 		alt: key ? "" : label !== null && label !== void 0 ? label : ""
+	}) : null, urlPlaceholder && showDefault ? /* @__PURE__ */ react.default.createElement(Picture, {
+		key: `placeholder ${urlPlaceholder}`,
+		src: urlPlaceholder,
+		loading,
+		priority: "high",
+		dynamicRangeLimit,
+		fit: fit === "scale-down" || fit === "none" ? "contain" : fit,
+		position,
+		filter: tintColor ? `url(#${tintId})` : void 0,
+		hidden: failedPlaceholder === urlPlaceholder,
+		onError: () => setFailedPlaceholder(urlPlaceholder),
+		alt: ""
 	}) : null, key && src ? /* @__PURE__ */ react.default.createElement(Picture, {
 		key: several ? "sizes" : key,
 		src,
@@ -397,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;
@@ -409,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

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

package/dist/index.d.ts

@@ -154,6 +154,8 @@ export type Source = {
 };
 /** A `thumbhash` or `blurDataUri` as `placeholder`. */
 export type SourcePlaceholder = Pick<Source, 'thumbhash' | 'blurDataUri'>;
+/** A url as `placeholder`, loaded like a source (see `placeholder`). */
+export type PlaceholderSource = Pick<Source, 'uri' | 'headers' | 'cacheKey' | 'cache'>;
 /** How the image fades in: see [`transition`](#transition). */
 export type Transition = {
     /**
@@ -329,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:
      *
@@ -343,19 +346,26 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      *   `placeholder={{ thumbhash }}`.
      * - A tiny image as a data uri, shown blurred:
      *   `placeholder={{ blurDataUri }}`.
+     * - A url, loaded and cached like a source:
+     *   `placeholder="https://example.com/placeholder.png"`, or a source with
+     *   `headers` or a `cacheKey`: `placeholder={{ uri, headers }}`.
+     * - A url only shown if it's already cached, e.g. a list's thumbnail while
+     *   the full-size image loads: `placeholder={{ uri, cache: 'cacheOnly' }}`.
      *
      * A source's own `thumbhash` or `blurDataUri` is shown instead, if it has
-     * one.
+     * one; a url placeholder shows over it once it has loaded.
      *
      * 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.
+     * - On the web, a url loads like any image, also with `'cacheOnly'`: a
+     *   browser can't look only in its cache.
      */
-    placeholder?: ImageRequireSource | string | SourcePlaceholder;
+    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

@@ -234,8 +234,14 @@ var FastImageViewNativeComponent_default = codegenNativeComponent("FastImageView
 var NativeFastImageModule_default = TurboModuleRegistry.get("FastImageModule");
 //#endregion
 //#region src/placeholders.ts
+const SCHEME = /^[a-z][a-z\d+.-]*:/i;
 function isImageName(value) {
-	return !/^[a-z][a-z\d+.-]*:/i.test(value) && !value.startsWith("/");
+	return !SCHEME.test(value) && !value.startsWith("/");
+}
+function placeholderSource(value) {
+	const uri = typeof value === "string" ? value : value && typeof value === "object" ? value.uri : void 0;
+	if (typeof uri !== "string" || !/^https?:/i.test(uri)) return void 0;
+	return typeof value === "string" ? { uri } : value;
 }
 function hasSourcePlaceholder(value) {
 	return !!value && typeof value === "object" && ("thumbhash" in value || "blurDataUri" in value);
@@ -243,20 +249,10 @@ function hasSourcePlaceholder(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");
+	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("placeholder-url", `react-native-fast-image: \`blurDataUri\` takes a data uri (data:image/…): "${value.slice(0, 60)}" is ignored. For a placeholder loaded from a url, use \`placeholder\`.`, "warn");
 }
 //#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 };
@@ -321,25 +317,19 @@ function builtInTransition() {
 }
 let defaultTransition;
 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;
+	var _placeholderSource, _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");
 	if (__DEV__) warnIfChildren(children);
 	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 = 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,
@@ -348,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

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

package/dist/index.web.js

@@ -241,13 +241,18 @@ function cssPosition({ x, y }) {
 }
 //#endregion
 //#region src/placeholders.ts
+function placeholderSource(value) {
+	const uri = typeof value === "string" ? value : value && typeof value === "object" ? value.uri : void 0;
+	if (typeof uri !== "string" || !/^https?:/i.test(uri)) return void 0;
+	return typeof value === "string" ? { uri } : value;
+}
 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");
+	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("placeholder-url", `react-native-fast-image: \`blurDataUri\` takes a data uri (data:image/…): "${value.slice(0, 60)}" is ignored. For a placeholder loaded from a url, use \`placeholder\`.`, "warn");
 }
 //#endregion
 //#region src/index.web.tsx
@@ -257,7 +262,7 @@ const notSupported = {
 };
 const useClientLayoutEffect = globalThis.document === void 0 ? useEffect : useLayoutEffect;
 function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadius, onLoadStart, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, loading, sizes, dynamicRangeLimit, forwardedRef, onLayout, pointerEvents, recyclingKey: _recyclingKey, loop: _loop, imageRendering: _imageRendering, paused: _paused, transition: _transition, downsample: _downsample, onProgress: _onProgress, ...props }) {
-	var _resolveUri;
+	var _resolveUri, _placeholderSource;
 	if (typeof __DEV__ !== "undefined" && __DEV__) warnIfChildren(children);
 	const { accessibilityLabel, "aria-label": ariaLabel, resizeMode: _resizeMode, ...viewProps } = props;
 	const label = ariaLabel || accessibilityLabel || void 0;
@@ -269,7 +274,9 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	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 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 ? 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, "");
@@ -278,7 +285,7 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	const fit = resolveObjectFit(objectFit, style);
 	const position = cssPosition(objectPositionOrCentered(objectPosition));
 	const filter = [blurRadius ? `blur(${blurRadius}px)` : "", tintColor ? `url(#${tintId})` : ""].filter(Boolean).join(" ") || void 0;
-	const showDefault = !!defaultUri && ok !== true;
+	const showDefault = ok !== true;
 	useClientLayoutEffect(() => {
 		if (key) onLoadStart === null || onLoadStart === void 0 || onLoadStart();
 	}, [key]);
@@ -299,6 +306,18 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 		position,
 		filter: blurUri ? [`url(#${blurId})`, tintColor ? `url(#${tintId})` : ""].filter(Boolean).join(" ") : filter,
 		alt: key ? "" : label !== null && label !== void 0 ? label : ""
+	}) : null, urlPlaceholder && showDefault ? /* @__PURE__ */ React.createElement(Picture, {
+		key: `placeholder ${urlPlaceholder}`,
+		src: urlPlaceholder,
+		loading,
+		priority: "high",
+		dynamicRangeLimit,
+		fit: fit === "scale-down" || fit === "none" ? "contain" : fit,
+		position,
+		filter: tintColor ? `url(#${tintId})` : void 0,
+		hidden: failedPlaceholder === urlPlaceholder,
+		onError: () => setFailedPlaceholder(urlPlaceholder),
+		alt: ""
 	}) : null, key && src ? /* @__PURE__ */ React.createElement(Picture, {
 		key: several ? "sizes" : key,
 		src,
@@ -370,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;
@@ -382,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

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

package/dist/placeholders.d.ts

@@ -1,4 +1,5 @@
-import type { SourcePlaceholder } from './index';
+import type { PlaceholderSource, SourcePlaceholder } from './index';
 export declare function isImageName(value: string): boolean;
+export declare function placeholderSource(value: unknown): PlaceholderSource | undefined;
 export declare function hasSourcePlaceholder(value: unknown): value is SourcePlaceholder;
 export declare function dataUri(value: unknown): string | undefined;

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,17 +28,23 @@ 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;
-// 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.
+// `placeholder` as a url (a source): loaded apart from the
+// 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 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).