react-native-fast-image 10.5.0 → 10.7.0

package/README.md

@@ -101,13 +101,13 @@ const YourImage = () => (
 
 ### `FastImage`
 
-It's a single native view, which also takes React Native's View props, such as accessibility props, `testID`, `nativeID`, `onLayout`, `pointerEvents` and `hitSlop`. A ref to it is that view (e.g. for `measure`). It doesn't take children: use [`FastImageBackground`](#fastimagebackground) for content over an image.
+It's a single native view, which also takes React Native's View props, such as accessibility props, `testID`, `nativeID`, `onLayout`, `pointerEvents` and `hitSlop`. A ref to it is that view (e.g. for `measure`), with [`reload()`](#refreload). It doesn't take children: use [`FastImageBackground`](#fastimagebackground) for content over an image.
 
 <!-- api:props start (generated from src/ by website/scripts/generate.mts) -->
 
 #### `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.
 
 ---
 
@@ -536,6 +537,27 @@ If supplied, changes the color of all the non-transparent pixels to the given co
 
 <!-- api:props end -->
 
+---
+
+#### `ref.reload()`
+
+Loads the image again, e.g. to try again after `onError`. The image showing stays until the new one has loaded (or the placeholder, if it failed), and the events are sent as for a new source. An image in the cache loads from it. In TypeScript, the ref's type is `FastImageRef`.
+
+```tsx
+const image = useRef<FastImageRef>(null)
+
+<FastImage ref={image} source={{ uri }} onError={() => setFailed(true)} />
+{failed && (
+    <Button
+        title="Try again"
+        onPress={() => {
+            setFailed(false)
+            image.current?.reload()
+        }}
+    />
+)}
+```
+
 ### `FastImageBackground`
 
 An image with content on top of it: a view that the image fills, with the children on top.
@@ -576,7 +598,7 @@ The image's style.
 
 #### `imageRef`
 
-**Type:** `Ref<any>`
+**Type:** `Ref<FastImageRef>`
 
 A ref to the image (the FastImage inside).
 

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);
@@ -436,6 +435,12 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl>
         view.setObjectFit(FastImageViewConverter.getScaleType(objectFit));
     }
 
+    // The ref's reload() (a command).
+    @Override
+    public void reload(FastImageViewWithUrl view) {
+        view.reload();
+    }
+
     @Override
     public void onDropViewInstance(@NonNull FastImageViewWithUrl view) {
         // Cancels its request, and nothing loads or tracks progress for it

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;
+    }
+
+    @Nullable
+    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;
     }
 
-    // The `source` prop. With several `sources`, mSource is the one picked for
-    // the view's size instead.
     @Nullable
-    private ReadableMap mPropSource = null;
+    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,29 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         return true;
     }
 
-    public void setPlaceholder(@Nullable Drawable placeholder) {
-        // None again (the placeholder prop is a url) doesn't reload.
-        if (placeholder == null && mPlaceholder == null) return;
+    // Loads the image again, as a new source would, keeping the image showing
+    // until then (the ref's reload()). Before the first props there's nothing
+    // to load yet.
+    void reload() {
+        if (mManager == null) return;
         mNeedsReload = true;
+        onAfterUpdate(mManager, requestManager);
+    }
+
+    // Shows at once, as a new source placeholder does (see updatePlaceholder),
+    // without loading the image again.
+    public void setPlaceholder(@Nullable Drawable placeholder) {
         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 +401,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 +515,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 +1826,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/composeRefs.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare function composeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T>;

package/dist/index.cjs.js

@@ -255,6 +255,7 @@ function objectPositionOrCentered(position) {
 }
 //#endregion
 //#region src/specs/FastImageViewNativeComponent.ts
+const Commands = (0, react_native.codegenNativeCommands)({ supportedCommands: ["reload"] });
 var FastImageViewNativeComponent_default = (0, react_native.codegenNativeComponent)("FastImageView");
 //#endregion
 //#region src/specs/NativeFastImageModule.ts
@@ -279,17 +280,28 @@ function dataUri(value) {
 	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) || "";
+//#region src/composeRefs.ts
+function composeRefs(...refs) {
+	return (value) => {
+		const cleanups = refs.map((ref) => {
+			if (typeof ref === "function") {
+				const cleanup = ref(value);
+				return typeof cleanup === "function" ? cleanup : () => {
+					ref(null);
+				};
+			}
+			if (ref) {
+				ref.current = value;
+				return () => {
+					ref.current = null;
+				};
+			}
+		});
+		return () => cleanups.forEach((cleanup) => cleanup === null || cleanup === void 0 ? void 0 : cleanup());
+	};
 }
+//#endregion
+//#region src/index.tsx
 const resolvePlaceholder = (placeholder) => {
 	if (typeof placeholder === "string") {
 		if (isImageName(placeholder)) return react_native.Platform.OS === "android" ? placeholder : { uri: placeholder };
@@ -361,28 +373,21 @@ 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);
+	const ref = (0, react.useMemo)(() => composeRefs(addReload, forwardedRef), [forwardedRef]);
 	return /* @__PURE__ */ react.default.createElement(FastImageViewNativeComponent_default, {
 		...props,
-		ref: forwardedRef,
+		ref,
 		style: [styles.image, style],
 		recyclingKey: (_props$recyclingKey = props.recyclingKey) !== null && _props$recyclingKey !== void 0 ? _props$recyclingKey : void 0,
 		loopCount: loopCount(loop),
 		...resolveTransition(transition, (_defaultTransition = defaultTransition) !== null && _defaultTransition !== void 0 ? _defaultTransition : builtInTransition()),
 		source: resolvedSource,
-		sources,
-		sourcePlaceholders,
 		placeholder: resolvedPlaceholder,
 		onFastImageLoadStart: onLoadStart,
 		onFastImageProgress: onProgress,
@@ -404,6 +409,9 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadSt
 		objectPositionYOffset: position.y.offset
 	});
 }
+function addReload(view) {
+	if (view) view.reload = () => Commands.reload(view);
+}
 const FastImageMemo = (0, react.memo)(FastImageBase);
 const FastImageComponent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ react.default.createElement(FastImageMemo, {
 	forwardedRef: ref,

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,
@@ -196,4 +196,6 @@ declare export default class FastImage extends React$Component<FastImageProps> {
         source: FastImageSource,
         file: string,
     ) => Promise<CachePathResult>;
+    // On a ref: loads the image again, e.g. to try again after onError.
+    reload(): void;
 }

package/dist/index.cjs.web.js

@@ -282,6 +282,27 @@ function dataUri(value) {
 	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/composeRefs.ts
+function composeRefs(...refs) {
+	return (value) => {
+		const cleanups = refs.map((ref) => {
+			if (typeof ref === "function") {
+				const cleanup = ref(value);
+				return typeof cleanup === "function" ? cleanup : () => {
+					ref(null);
+				};
+			}
+			if (ref) {
+				ref.current = value;
+				return () => {
+					ref.current = null;
+				};
+			}
+		});
+		return () => cleanups.forEach((cleanup) => cleanup === null || cleanup === void 0 ? void 0 : cleanup());
+	};
+}
+//#endregion
 //#region src/index.web.tsx
 const notSupported = {
 	ok: false,
@@ -298,12 +319,17 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	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 [reloads, setReloads] = (0, react.useState)(0);
+	const ref = (0, react.useMemo)(() => composeRefs((view) => {
+		if (view) view.reload = () => setReloads((count) => count + 1);
+	}, forwardedRef), [forwardedRef]);
 	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 urlPlaceholder = (_placeholderSource = placeholderSource(placeholder)) === null || _placeholderSource === void 0 ? void 0 : _placeholderSource.uri;
+	const placeholderKey = `${urlPlaceholder} ${reloads}`;
 	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, "");
@@ -315,14 +341,14 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	const showDefault = ok !== true;
 	useClientLayoutEffect(() => {
 		if (key) onLoadStart === null || onLoadStart === void 0 || onLoadStart();
-	}, [key]);
+	}, [key, reloads]);
 	return /* @__PURE__ */ react.default.createElement(react_native.View, {
 		...viewProps,
 		"aria-label": label,
 		style: [styles.container, style],
 		onLayout,
 		pointerEvents,
-		ref: forwardedRef
+		ref
 	}, defaultUri && showDefault ? /* @__PURE__ */ react.default.createElement(Picture, {
 		key: `default ${defaultUri}`,
 		src: defaultUri,
@@ -334,7 +360,7 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 		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}`,
+		key: `placeholder ${placeholderKey}`,
 		src: urlPlaceholder,
 		loading,
 		priority: "high",
@@ -342,11 +368,11 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 		fit: fit === "scale-down" || fit === "none" ? "contain" : fit,
 		position,
 		filter: tintColor ? `url(#${tintId})` : void 0,
-		hidden: failedPlaceholder === urlPlaceholder,
-		onError: () => setFailedPlaceholder(urlPlaceholder),
+		hidden: failedPlaceholder === placeholderKey,
+		onError: () => setFailedPlaceholder(placeholderKey),
 		alt: ""
 	}) : null, key && src ? /* @__PURE__ */ react.default.createElement(Picture, {
-		key: several ? "sizes" : key,
+		key: `${several ? "sizes" : key} ${reloads}`,
 		src,
 		srcSet,
 		sizes,
@@ -416,10 +442,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 +453,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,
@@ -590,11 +630,10 @@ FastImage.setDefaults = () => {};
 FastImage.writeToCache = () => Promise.resolve(notSupported);
 FastImage.getCachePath = () => Promise.resolve(notSupported);
 const styles = react_native.StyleSheet.create({ container: { overflow: "hidden" } });
-const FastImageWithRef = FastImageComponent;
 const FastImageBackground = (0, react.forwardRef)(({ style, imageStyle, imageRef, children, ...props }, ref) => /* @__PURE__ */ react.default.createElement(react_native.View, {
 	style,
 	ref
-}, /* @__PURE__ */ react.default.createElement(FastImageWithRef, {
+}, /* @__PURE__ */ react.default.createElement(FastImageComponent, {
 	...props,
 	style: [react_native.StyleSheet.absoluteFill, imageStyle],
 	ref: imageRef

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,
@@ -196,4 +196,6 @@ declare export default class FastImage extends React$Component<FastImageProps> {
         source: FastImageSource,
         file: string,
     ) => Promise<CachePathResult>;
+    // On a ref: loads the image again, e.g. to try again after onError.
+    reload(): void;
 }

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;
     /**
@@ -662,6 +664,18 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
     children?: "FastImage doesn't take children: use FastImageBackground for content over an image";
 }
 type ViewRef = React.ComponentRef<typeof View>;
+/**
+ * What a ref to `FastImage` gets: its native view, with a View's methods
+ * (e.g. `measure`), and `reload()`. E.g. `useRef<FastImageRef>(null)`.
+ */
+export type FastImageRef = ViewRef & {
+    /**
+     * Loads the image again, e.g. to try again after `onError`. The image
+     * showing stays until the new one has loaded, and the events are sent as
+     * for a new source. An image in the cache loads from it.
+     */
+    reload(): void;
+};
 /** A preloaded source that loaded (and is now cached). */
 export interface PreloadSuccess {
     /** The source's uri. */
@@ -760,14 +774,14 @@ export interface FastImageDefaults {
      */
     transition?: boolean | number | Transition | null;
 }
-declare const FastImage: React.ForwardRefExoticComponent<FastImageProps & React.RefAttributes<ViewRef>> & FastImageStaticProperties;
+declare const FastImage: React.ForwardRefExoticComponent<FastImageProps & React.RefAttributes<FastImageRef>> & FastImageStaticProperties;
 export interface FastImageBackgroundProps extends Omit<FastImageProps, 'style' | 'children'> {
     /** The container's style; the image fills it. */
     style?: StyleProp<ViewStyle>;
     /** The image's style. */
     imageStyle?: StyleProp<ImageStyle>;
     /** A ref to the image (the FastImage inside). */
-    imageRef?: React.Ref<any>;
+    imageRef?: React.Ref<FastImageRef>;
     /** Content shown on top of the image. */
     children?: React.ReactNode;
 }