react-native-fast-image 8.25.0 → 8.26.0

package/README.md

@@ -175,6 +175,33 @@ Whether the decoded image is kept in the memory cache. **Default: true.** With `
 
 ---
 
+### Several sizes of an image
+
+`source` can also be an array of the same image at different sizes, each with its `width` and `height` in pixels (times `scale`, if it has one). The view loads the one whose size is closest to its own, in pixels, so a small view downloads a small image:
+
+```jsx
+<FastImage
+    style={{ width: 120, height: 120 }}
+    source={[
+        { uri: 'https://example.com/photo-200.jpg', width: 200, height: 200 },
+        { uri: 'https://example.com/photo-800.jpg', width: 800, height: 800 },
+        {
+            uri: 'https://example.com/photo-2000.jpg',
+            width: 2000,
+            height: 2000,
+        },
+    ]}
+/>
+```
+
+- The view picks once it has been laid out. One that has no size (e.g. sized from `onLoad`) loads the largest.
+- 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 }`.
+- An array of one is the same as that source.
+
+---
+
 ### `defaultSource?: number`
 
 - An asset loaded with `require(...)`.
@@ -512,8 +539,9 @@ With [react-native-web](https://necolas.github.io/react-native-web/), FastImage
 
 Support is minimal:
 
-- Props that work: `source` (a `uri`, or a `require()`d image), `defaultSource`, `resizeMode`, `tintColor`, `blurRadius`, `style`, children, `onLoadStart`, `onLoad`, `onError`, `onLoadEnd`, and View props such as `testID`, accessibility props, `onLayout` and `pointerEvents`.
+- Props that work: `source` (a `uri`, a `require()`d image, or several sizes), `defaultSource`, `resizeMode`, `tintColor`, `blurRadius`, `style`, children, `onLoadStart`, `onLoad`, `onError`, `onLoadEnd`, and View props such as `testID`, accessibility props, `onLayout` and `pointerEvents`.
 - Ignored: `source.headers` (a browser can't send them for an image), `source.priority`, `source.cache`, `source.cacheKey`, `source.memoryCache`, `recyclingKey`, `loop`, `imageRendering`, `paused`, `transition`, `downsample`, `fallback` and `onProgress`.
+- Several sizes are shown with a lazily loaded `<img>` whose `srcset` lists them, with `sizes="auto, 100vw"`: the browser loads the one for the width the image is shown at, in device pixels (usually the smallest that's at least as wide). Browsers that don't support `sizes="auto"` use the viewport's width. `tintColor`, `defaultSource` and `resizeMode="repeat"` don't apply to them.
 - `FastImage.preload` loads the images into the browser's cache and resolves with a result per source. `clearMemoryCache`, `clearDiskCache` and `configureCache` resolve without doing anything (the browser manages its cache), and `getCachePath` and `writeToCache` resolve with `{ ok: false, error: 'Not supported on the web' }`.
 
 ## Troubleshooting

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

@@ -14,6 +14,7 @@ import androidx.annotation.NonNull;
 
 import com.bumptech.glide.Glide;
 import com.bumptech.glide.RequestManager;
+import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
@@ -69,6 +70,11 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
         view.setSource(source);
     }
 
+    @ReactProp(name = "sources")
+    public void setSources(FastImageViewWithUrl view, @Nullable ReadableArray sources) {
+        view.setSources(sources);
+    }
+
     @ReactProp(name = "defaultSource")
     public void setDefaultSource(FastImageViewWithUrl view, @Nullable String source) {
         view.setDefaultSource(

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

@@ -35,6 +35,7 @@ import com.bumptech.glide.request.target.SizeReadyCallback;
 import com.bumptech.glide.request.transition.NoTransition;
 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.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
@@ -63,7 +64,89 @@ class FastImageViewWithUrl extends AppCompatImageView {
 
     public void setSource(@Nullable ReadableMap source) {
         mNeedsReload = true;
-        mSource = source;
+        mPropSource = source;
+        if (mSources == null) mSource = source;
+    }
+
+    // The `source` prop. With several `sources`, mSource is the one picked for
+    // the view's size instead.
+    @Nullable
+    private ReadableMap mPropSource = 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
+    private ReadableArray mSources = null;
+    // Several sources: the index of the one picked (-1 before one is), and
+    // whether the load waits for the view's size (after layout), or has
+    // waited (then it loads the largest if the view still has no size).
+    private int mSourceIndex = -1;
+    private boolean mWaitsForSize = false;
+    private boolean mWaitedForSize = false;
+    // Several sources: the next load switches to another one for a new view
+    // size. It's the same picture at another size, so it doesn't fade in.
+    private boolean mSwitchesSource = false;
+    // What the last update was called with, to load once the view has a size.
+    @Nullable
+    private FastImageViewManager mManager;
+    @Nullable
+    private Map<String, List<FastImageViewWithUrl>> mViewsForUrlsMap;
+
+    public void setSources(@Nullable ReadableArray sources) {
+        mNeedsReload = true;
+        mSources = sources != null && sources.size() > 1 ? sources : null;
+        mSourceIndex = -1;
+        if (mSources == null) mSource = mPropSource;
+    }
+
+    // Of several sources, the index of the one whose size in pixels (width ×
+    // height × scale²) is closest to the view's (by pixel count), or of the
+    // largest while the view has no size (e.g. one sized from onLoad).
+    private int sourceIndexForSize() {
+        ReadableArray sources = mSources;
+        if (sources == null) return -1;
+        double viewPixels = (double) getWidth() * getHeight();
+        int best = -1;
+        double bestFit = Double.MAX_VALUE;
+        for (int i = 0; i < sources.size(); i++) {
+            ReadableMap source = sources.getMap(i);
+            if (source == null) continue;
+            double scale = number(source, "scale", 1);
+            double pixels = number(source, "width", 0) * number(source, "height", 0) * scale * scale;
+            double fit = viewPixels > 0 ? Math.abs(1 - pixels / viewPixels) : -pixels;
+            if (best < 0 || fit < bestFit) {
+                best = i;
+                bestFit = fit;
+            }
+        }
+        return best;
+    }
+
+    // Picks the source for the view's size (several sources).
+    private void pickSource() {
+        mSourceIndex = sourceIndexForSize();
+        mSource = mSourceIndex >= 0 && mSources != null ? mSources.getMap(mSourceIndex) : null;
+    }
+
+    private static double number(ReadableMap map, String key, double fallback) {
+        return map.hasKey(key) && !map.isNull(key) ? map.getDouble(key) : fallback;
+    }
+
+    // Several sources: another one fits the view's new size better. Loads it
+    // (after layout), keeping the image showing until then, without a fade.
+    private boolean switchSourceIfResized() {
+        if (mSources == null || mNeedsReload || mWaitsForSize || getWidth() <= 0 || getHeight() <= 0
+                || mManager == null || sourceIndexForSize() == mSourceIndex) {
+            return false;
+        }
+        mSwitchesSource = true;
+        mNeedsReload = true;
+        post(new Runnable() {
+            @Override
+            public void run() {
+                if (mNeedsReload && mManager != null) onAfterUpdate(mManager, requestManager, mViewsForUrlsMap);
+            }
+        });
+        return true;
     }
 
     public void setDefaultSource(@Nullable Drawable source) {
@@ -520,7 +603,7 @@ class FastImageViewWithUrl extends AppCompatImageView {
             mFadeFrom = null;
             invalidate();
         }
-        reloadIfResized();
+        if (!switchSourceIfResized()) reloadIfResized();
     }
 
     private void reloadIfResized() {
@@ -671,16 +754,42 @@ class FastImageViewWithUrl extends AppCompatImageView {
             @Nonnull FastImageViewManager manager,
             @Nullable RequestManager requestManager,
             @Nonnull Map<String, List<FastImageViewWithUrl>> viewsForUrlsMap) {
+        mManager = manager;
+        mViewsForUrlsMap = viewsForUrlsMap;
         if (mBlurChanged && !mNeedsReload) {
             mBlurChanged = false;
             reblur();
         }
         if (!mNeedsReload)
             return;
+        // Several sources: one is picked for the view's size, so a view that
+        // hasn't been laid out yet loads after layout (props and layout are
+        // applied in the same batch). A view that still has no size then
+        // (e.g. one sized from onLoad) loads the largest source.
+        if (mSources != null) {
+            if (mWaitsForSize) return;
+            if ((getWidth() <= 0 || getHeight() <= 0) && !mWaitedForSize) {
+                mWaitsForSize = true;
+                post(new Runnable() {
+                    @Override
+                    public void run() {
+                        if (!mWaitsForSize) return;
+                        mWaitsForSize = false;
+                        mWaitedForSize = true;
+                        onAfterUpdate(manager, requestManager, viewsForUrlsMap);
+                    }
+                });
+                return;
+            }
+            mWaitedForSize = false;
+            pickSource();
+        }
         // Only reload for changes that affect the request (source,
         // defaultSource, resizeMode), not for every prop update.
         mNeedsReload = false;
         mBlurChanged = false;
+        boolean switching = mSwitchesSource;
+        mSwitchesSource = false;
         boolean restarting = mRestarting;
         mRestarting = false;
         mLoadCount++;
@@ -791,7 +900,7 @@ class FastImageViewWithUrl extends AppCompatImageView {
             // replaces it at once, as Glide, Coil and Fresco fade an image in
             // from nothing and never between images.
             boolean replacing = shownRequest != null && model != null;
-            if (mTransitionDuration > 0 && (!replacing || mTransitionBetweenImages)) {
+            if (mTransitionDuration > 0 && !switching && (!replacing || mTransitionBetweenImages)) {
                 builder = builder.transition(DrawableTransitionOptions.with(
                         new FadeFactory(mTransitionDuration, mTransitionSkipOnCacheHit)));
             }

package/dist/index.cjs.js

@@ -125,7 +125,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 	};
 	const resolvedTintColor = tintColor != null ? tintColor : tintColorFromStyle(style);
 	if (fallback) {
-		const cleanedSource = typeof source === "number" ? source : withoutCache(source);
+		const cleanedSource = typeof source === "number" ? source : Array.isArray(source) ? source.map(withoutCache) : withoutCache(source);
 		const resolvedSource = react_native.Image.resolveAssetSource(cleanedSource);
 		return /* @__PURE__ */ react.default.createElement(react_native.View, {
 			style: [styles.imageContainer, style],
@@ -164,7 +164,9 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 			resizeMode
 		}), children);
 	}
-	const resolvedSource = react_native.Image.resolveAssetSource(source);
+	const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
+	const single = Array.isArray(source) ? source[0] : source;
+	const resolvedSource = sources ? void 0 : react_native.Image.resolveAssetSource(single);
 	const resolvedDefaultSource = resolveDefaultSource(defaultSource);
 	return /* @__PURE__ */ react.default.createElement(react_native.View, {
 		style: [styles.imageContainer, style],
@@ -177,6 +179,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		...transitionProps(transition),
 		style: react_native.StyleSheet.absoluteFill,
 		source: resolvedSource,
+		sources,
 		defaultSource: resolvedDefaultSource,
 		onFastImageLoadStart: onLoadStart,
 		onFastImageProgress: withProgress(onProgress),
@@ -200,8 +203,14 @@ const FastImage = FastImageComponent;
 FastImage.resizeMode = resizeMode;
 FastImage.cacheControl = cacheControl;
 FastImage.priority = priority;
-FastImage.preload = (sources) => Promise.resolve(react_native.NativeModules.FastImageView.preload(sources.map((s) => s || {}))).then((results) => sources.map((source, i) => {
+const ONE_SOURCE = "Takes one source, not an array of sizes: pass the size to use";
+FastImage.preload = (sources) => Promise.resolve(react_native.NativeModules.FastImageView.preload(sources.map((s) => s && !Array.isArray(s) ? s : {}))).then((results) => sources.map((source, i) => {
 	var _results$i;
+	if (Array.isArray(source)) return {
+		ok: false,
+		error: ONE_SOURCE,
+		uri: void 0
+	};
 	const uri = source ? source.uri : void 0;
 	const result = (_results$i = results === null || results === void 0 ? void 0 : results[i]) !== null && _results$i !== void 0 ? _results$i : noResult;
 	if (!result.ok) return {
@@ -220,8 +229,14 @@ FastImage.preload = (sources) => Promise.resolve(react_native.NativeModules.Fast
 FastImage.clearMemoryCache = () => react_native.NativeModules.FastImageView.clearMemoryCache();
 FastImage.clearDiskCache = () => react_native.NativeModules.FastImageView.clearDiskCache();
 FastImage.configureCache = (limits = {}) => Promise.resolve(react_native.NativeModules.FastImageView.configureCache(limits));
-FastImage.writeToCache = (source, file) => Promise.resolve(react_native.NativeModules.FastImageView.writeToCache(source || {}, file));
-FastImage.getCachePath = (source) => Promise.resolve(react_native.NativeModules.FastImageView.getCachePath(source || {}));
+FastImage.writeToCache = (source, file) => Array.isArray(source) ? Promise.resolve({
+	ok: false,
+	error: ONE_SOURCE
+}) : Promise.resolve(react_native.NativeModules.FastImageView.writeToCache(source || {}, file));
+FastImage.getCachePath = (source) => Array.isArray(source) ? Promise.resolve({
+	ok: false,
+	error: ONE_SOURCE
+}) : Promise.resolve(react_native.NativeModules.FastImageView.getCachePath(source || {}));
 const styles = react_native.StyleSheet.create({
 	fallbackImage: {
 		position: "absolute",

package/dist/index.cjs.js.flow

@@ -104,6 +104,9 @@ export type FastImageSource = {
     cache?: CacheControls,
     cacheKey?: string,
     memoryCache?: boolean,
+    width?: number,
+    height?: number,
+    scale?: number,
 }
 
 export type FastImageProps = $ReadOnly<{|
@@ -114,7 +117,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | number),
+    source?: ?(FastImageSource | Array<FastImageSource> | number),
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/dist/index.cjs.web.js

@@ -55,14 +55,27 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	const result = (0, react.useRef)(void 0);
 	const sent = (0, react.useRef)(Promise.resolve());
 	const image = (0, react.useRef)(null);
-	const uri = typeof source === "object" && source ? source.uri : void 0;
-	const webSource = typeof source === "number" ? source : uri ? { uri } : void 0;
+	const sizes = Array.isArray(source) && source.length > 1 ? source : void 0;
+	const single = Array.isArray(source) ? source[0] : source;
+	const uri = typeof single === "object" && single ? single.uri : void 0;
+	const webSource = typeof single === "number" ? single : uri ? { uri } : void 0;
 	return /* @__PURE__ */ react.default.createElement(react_native.View, {
 		style: [styles.container, style],
 		onLayout,
 		pointerEvents,
 		ref: forwardedRef
-	}, /* @__PURE__ */ react.default.createElement(react_native.Image, {
+	}, sizes ? /* @__PURE__ */ react.default.createElement(react_native.View, {
+		...props,
+		style: styles.image
+	}, /* @__PURE__ */ react.default.createElement(ImageSizes, {
+		sources: sizes,
+		resizeMode: mode,
+		blurRadius,
+		onLoadStart,
+		onLoad,
+		onError,
+		onLoadEnd
+	})) : /* @__PURE__ */ react.default.createElement(react_native.Image, {
 		...props,
 		style: styles.image,
 		source: webSource,
@@ -108,6 +121,68 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 		}
 	}), children);
 }
+function ImageSizes({ sources, resizeMode: mode, blurRadius, onLoadStart, onLoad, onError, onLoadEnd }) {
+	var _largest$uri, _sources$find;
+	const sized = 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,
+			width: Math.round(((_source$width = source.width) !== null && _source$width !== void 0 ? _source$width : 0) * ((_source$scale = source.scale) !== null && _source$scale !== void 0 ? _source$scale : 1))
+		};
+	});
+	const largest = sized.reduce((best, source) => !best || source.width > best.width ? source : best, void 0);
+	const src = (_largest$uri = largest === null || largest === void 0 ? void 0 : largest.uri) !== null && _largest$uri !== void 0 ? _largest$uri : (_sources$find = sources.find((source) => source === null || source === void 0 ? void 0 : source.uri)) === null || _sources$find === void 0 ? void 0 : _sources$find.uri;
+	const srcSet = sized.length > 0 ? sized.map((source) => `${source.uri} ${source.width}w`).join(", ") : void 0;
+	(0, react.useEffect)(() => {
+		onLoadStart === null || onLoadStart === void 0 || onLoadStart();
+	}, [src, srcSet]);
+	return /* @__PURE__ */ react.default.createElement("img", {
+		src,
+		srcSet,
+		sizes: srcSet ? "auto, 100vw" : void 0,
+		loading: "lazy",
+		alt: "",
+		draggable: false,
+		style: {
+			position: "absolute",
+			width: "100%",
+			height: "100%",
+			objectFit: OBJECT_FIT[mode !== null && mode !== void 0 ? mode : "cover"],
+			filter: blurRadius ? `blur(${blurRadius}px)` : void 0
+		},
+		onLoad: (event) => {
+			var _picked$width;
+			const image = event.currentTarget;
+			const picked = srcSet ? sized.find((source) => new URL(source.uri, image.currentSrc).href === image.currentSrc) : void 0;
+			const loadedWidth = (_picked$width = picked === null || picked === void 0 ? void 0 : picked.width) !== null && _picked$width !== void 0 ? _picked$width : image.naturalWidth;
+			const loadedHeight = picked ? Math.round(image.naturalHeight * picked.width / image.naturalWidth) : image.naturalHeight;
+			onLoad === null || onLoad === void 0 || onLoad({ nativeEvent: {
+				width: loadedWidth,
+				height: loadedHeight
+			} });
+			onLoadEnd === null || onLoadEnd === void 0 || onLoadEnd({
+				ok: true,
+				width: loadedWidth,
+				height: loadedHeight
+			});
+		},
+		onError: () => {
+			const error = "Failed to load the image";
+			onError === null || onError === void 0 || onError({ nativeEvent: { error } });
+			onLoadEnd === null || onLoadEnd === void 0 || onLoadEnd({
+				ok: false,
+				error
+			});
+		}
+	});
+}
+const OBJECT_FIT = {
+	cover: "cover",
+	contain: "contain",
+	stretch: "fill",
+	center: "scale-down",
+	repeat: "cover"
+};
 const FastImageMemo = (0, react.memo)(FastImageBase);
 const FastImageComponent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ react.default.createElement(FastImageMemo, {
 	forwardedRef: ref,

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

@@ -104,6 +104,9 @@ export type FastImageSource = {
     cache?: CacheControls,
     cacheKey?: string,
     memoryCache?: boolean,
+    width?: number,
+    height?: number,
+    scale?: number,
 }
 
 export type FastImageProps = $ReadOnly<{|
@@ -114,7 +117,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | number),
+    source?: ?(FastImageSource | Array<FastImageSource> | number),
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/dist/index.d.ts

@@ -26,6 +26,14 @@ export type Source = {
      * list scrolled back decodes them again.
      */
     memoryCache?: boolean;
+    /**
+     * With several sources (`source` as an array), the image's size at this
+     * uri in pixels (width and height, times `scale` if given): the view
+     * loads the source closest to its own size.
+     */
+    width?: number;
+    height?: number;
+    scale?: number;
 };
 export type Transition = {
     /**
@@ -116,7 +124,12 @@ export interface ImageStyle extends ViewStyle {
     opacity?: number;
 }
 export interface FastImageProps extends AccessibilityProps, ViewProps {
-    source?: Source | ImageRequireSource;
+    /**
+     * The image: a source, a `require()`d image, or several sources of the
+     * same image at different sizes (each with its `width` and `height` in
+     * pixels), of which the view loads the one closest to its size.
+     */
+    source?: Source | Source[] | ImageRequireSource;
     defaultSource?: ImageRequireSource;
     resizeMode?: ResizeMode;
     fallback?: boolean;

package/dist/index.js

@@ -98,7 +98,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 	};
 	const resolvedTintColor = tintColor != null ? tintColor : tintColorFromStyle(style);
 	if (fallback) {
-		const cleanedSource = typeof source === "number" ? source : withoutCache(source);
+		const cleanedSource = typeof source === "number" ? source : Array.isArray(source) ? source.map(withoutCache) : withoutCache(source);
 		const resolvedSource = Image.resolveAssetSource(cleanedSource);
 		return /* @__PURE__ */ React.createElement(View, {
 			style: [styles.imageContainer, style],
@@ -137,7 +137,9 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 			resizeMode
 		}), children);
 	}
-	const resolvedSource = Image.resolveAssetSource(source);
+	const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
+	const single = Array.isArray(source) ? source[0] : source;
+	const resolvedSource = sources ? void 0 : Image.resolveAssetSource(single);
 	const resolvedDefaultSource = resolveDefaultSource(defaultSource);
 	return /* @__PURE__ */ React.createElement(View, {
 		style: [styles.imageContainer, style],
@@ -150,6 +152,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		...transitionProps(transition),
 		style: StyleSheet.absoluteFill,
 		source: resolvedSource,
+		sources,
 		defaultSource: resolvedDefaultSource,
 		onFastImageLoadStart: onLoadStart,
 		onFastImageProgress: withProgress(onProgress),
@@ -173,8 +176,14 @@ const FastImage = FastImageComponent;
 FastImage.resizeMode = resizeMode;
 FastImage.cacheControl = cacheControl;
 FastImage.priority = priority;
-FastImage.preload = (sources) => Promise.resolve(NativeModules.FastImageView.preload(sources.map((s) => s || {}))).then((results) => sources.map((source, i) => {
+const ONE_SOURCE = "Takes one source, not an array of sizes: pass the size to use";
+FastImage.preload = (sources) => Promise.resolve(NativeModules.FastImageView.preload(sources.map((s) => s && !Array.isArray(s) ? s : {}))).then((results) => sources.map((source, i) => {
 	var _results$i;
+	if (Array.isArray(source)) return {
+		ok: false,
+		error: ONE_SOURCE,
+		uri: void 0
+	};
 	const uri = source ? source.uri : void 0;
 	const result = (_results$i = results === null || results === void 0 ? void 0 : results[i]) !== null && _results$i !== void 0 ? _results$i : noResult;
 	if (!result.ok) return {
@@ -193,8 +202,14 @@ FastImage.preload = (sources) => Promise.resolve(NativeModules.FastImageView.pre
 FastImage.clearMemoryCache = () => NativeModules.FastImageView.clearMemoryCache();
 FastImage.clearDiskCache = () => NativeModules.FastImageView.clearDiskCache();
 FastImage.configureCache = (limits = {}) => Promise.resolve(NativeModules.FastImageView.configureCache(limits));
-FastImage.writeToCache = (source, file) => Promise.resolve(NativeModules.FastImageView.writeToCache(source || {}, file));
-FastImage.getCachePath = (source) => Promise.resolve(NativeModules.FastImageView.getCachePath(source || {}));
+FastImage.writeToCache = (source, file) => Array.isArray(source) ? Promise.resolve({
+	ok: false,
+	error: ONE_SOURCE
+}) : Promise.resolve(NativeModules.FastImageView.writeToCache(source || {}, file));
+FastImage.getCachePath = (source) => Array.isArray(source) ? Promise.resolve({
+	ok: false,
+	error: ONE_SOURCE
+}) : Promise.resolve(NativeModules.FastImageView.getCachePath(source || {}));
 const styles = StyleSheet.create({
 	fallbackImage: {
 		position: "absolute",

package/dist/index.js.flow

@@ -104,6 +104,9 @@ export type FastImageSource = {
     cache?: CacheControls,
     cacheKey?: string,
     memoryCache?: boolean,
+    width?: number,
+    height?: number,
+    scale?: number,
 }
 
 export type FastImageProps = $ReadOnly<{|
@@ -114,7 +117,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | number),
+    source?: ?(FastImageSource | Array<FastImageSource> | number),
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/dist/index.web.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useRef } from "react";
+import React, { forwardRef, memo, useEffect, useRef } from "react";
 import { Image, StyleSheet, View } from "react-native";
 //#region src/constants.ts
 const resizeMode = {
@@ -28,14 +28,27 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	const result = useRef(void 0);
 	const sent = useRef(Promise.resolve());
 	const image = useRef(null);
-	const uri = typeof source === "object" && source ? source.uri : void 0;
-	const webSource = typeof source === "number" ? source : uri ? { uri } : void 0;
+	const sizes = Array.isArray(source) && source.length > 1 ? source : void 0;
+	const single = Array.isArray(source) ? source[0] : source;
+	const uri = typeof single === "object" && single ? single.uri : void 0;
+	const webSource = typeof single === "number" ? single : uri ? { uri } : void 0;
 	return /* @__PURE__ */ React.createElement(View, {
 		style: [styles.container, style],
 		onLayout,
 		pointerEvents,
 		ref: forwardedRef
-	}, /* @__PURE__ */ React.createElement(Image, {
+	}, sizes ? /* @__PURE__ */ React.createElement(View, {
+		...props,
+		style: styles.image
+	}, /* @__PURE__ */ React.createElement(ImageSizes, {
+		sources: sizes,
+		resizeMode: mode,
+		blurRadius,
+		onLoadStart,
+		onLoad,
+		onError,
+		onLoadEnd
+	})) : /* @__PURE__ */ React.createElement(Image, {
 		...props,
 		style: styles.image,
 		source: webSource,
@@ -81,6 +94,68 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 		}
 	}), children);
 }
+function ImageSizes({ sources, resizeMode: mode, blurRadius, onLoadStart, onLoad, onError, onLoadEnd }) {
+	var _largest$uri, _sources$find;
+	const sized = 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,
+			width: Math.round(((_source$width = source.width) !== null && _source$width !== void 0 ? _source$width : 0) * ((_source$scale = source.scale) !== null && _source$scale !== void 0 ? _source$scale : 1))
+		};
+	});
+	const largest = sized.reduce((best, source) => !best || source.width > best.width ? source : best, void 0);
+	const src = (_largest$uri = largest === null || largest === void 0 ? void 0 : largest.uri) !== null && _largest$uri !== void 0 ? _largest$uri : (_sources$find = sources.find((source) => source === null || source === void 0 ? void 0 : source.uri)) === null || _sources$find === void 0 ? void 0 : _sources$find.uri;
+	const srcSet = sized.length > 0 ? sized.map((source) => `${source.uri} ${source.width}w`).join(", ") : void 0;
+	useEffect(() => {
+		onLoadStart === null || onLoadStart === void 0 || onLoadStart();
+	}, [src, srcSet]);
+	return /* @__PURE__ */ React.createElement("img", {
+		src,
+		srcSet,
+		sizes: srcSet ? "auto, 100vw" : void 0,
+		loading: "lazy",
+		alt: "",
+		draggable: false,
+		style: {
+			position: "absolute",
+			width: "100%",
+			height: "100%",
+			objectFit: OBJECT_FIT[mode !== null && mode !== void 0 ? mode : "cover"],
+			filter: blurRadius ? `blur(${blurRadius}px)` : void 0
+		},
+		onLoad: (event) => {
+			var _picked$width;
+			const image = event.currentTarget;
+			const picked = srcSet ? sized.find((source) => new URL(source.uri, image.currentSrc).href === image.currentSrc) : void 0;
+			const loadedWidth = (_picked$width = picked === null || picked === void 0 ? void 0 : picked.width) !== null && _picked$width !== void 0 ? _picked$width : image.naturalWidth;
+			const loadedHeight = picked ? Math.round(image.naturalHeight * picked.width / image.naturalWidth) : image.naturalHeight;
+			onLoad === null || onLoad === void 0 || onLoad({ nativeEvent: {
+				width: loadedWidth,
+				height: loadedHeight
+			} });
+			onLoadEnd === null || onLoadEnd === void 0 || onLoadEnd({
+				ok: true,
+				width: loadedWidth,
+				height: loadedHeight
+			});
+		},
+		onError: () => {
+			const error = "Failed to load the image";
+			onError === null || onError === void 0 || onError({ nativeEvent: { error } });
+			onLoadEnd === null || onLoadEnd === void 0 || onLoadEnd({
+				ok: false,
+				error
+			});
+		}
+	});
+}
+const OBJECT_FIT = {
+	cover: "cover",
+	contain: "contain",
+	stretch: "fill",
+	center: "scale-down",
+	repeat: "cover"
+};
 const FastImageMemo = memo(FastImageBase);
 const FastImageComponent = forwardRef((props, ref) => /* @__PURE__ */ React.createElement(FastImageMemo, {
 	forwardedRef: ref,

package/dist/index.web.js.flow

@@ -104,6 +104,9 @@ export type FastImageSource = {
     cache?: CacheControls,
     cacheKey?: string,
     memoryCache?: boolean,
+    width?: number,
+    height?: number,
+    scale?: number,
 }
 
 export type FastImageProps = $ReadOnly<{|
@@ -114,7 +117,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | number),
+    source?: ?(FastImageSource | Array<FastImageSource> | number),
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/ios/FastImage/FFFastImageSource.h

@@ -32,6 +32,9 @@ typedef NS_ENUM(NSInteger, FFFCacheControl) {
 @property (nonatomic) FFFCacheControl cacheControl;
 // The key to cache the image under instead of its url, or nil.
 @property (nonatomic, copy) NSString *cacheKey;
+// With several sources, the image's size at this url in pixels (width ×
+// height × scale²), to pick the one closest to the view's size; 0 if unknown.
+@property (nonatomic) CGFloat pixelCount;
 // Whether the decoded image is kept in the memory cache (`memoryCache`,
 // default YES). Without it, it's only kept on disk: views don't leave it in
 // memory, and preload doesn't decode it.

package/ios/FastImage/FFFastImageView.h

@@ -17,6 +17,9 @@
 @property (nonatomic, copy) RCTDirectEventBlock onFastImageLoadEnd;
 @property (nonatomic, assign) RCTResizeMode resizeMode;
 @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.
+@property (nonatomic, copy) NSArray<FFFastImageSource *> *sources;
 @property (nonatomic, strong) UIImage *defaultSource;
 @property (nonatomic, strong) UIColor *imageColor;
 // When it changes, the next image doesn't replace the current one: the view

package/ios/FastImage/FFFastImageView.m

@@ -41,8 +41,17 @@
 // Whether the view shows an image that loaded (not defaultSource or nothing).
 // A new source then keeps it until the new image has loaded (see reloadImage).
 @property(nonatomic, assign) BOOL showsLoadedImage;
-// downsample: a load waits for the view's size (see didSetProps).
+// 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;
+// 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.
+@property(nonatomic, assign) BOOL switchesSource;
+@property(nonatomic, assign) BOOL loadsSwitchedSource;
 // The size (in pixels) the image showing or loading was decoded for, and
 // whether it covers it; zero for a full-size image.
 @property(nonatomic, assign) CGSize decodedBox;
@@ -132,7 +141,8 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 // the default), and from the disk cache too with 'all'. Downloads, local
 // files and bundled images fade.
 - (BOOL) fadesImageFromCache: (SDImageCacheType)cacheType {
-    if (self.transitionDuration <= 0 || ([self displaysLoadedImage] && !self.transitionBetweenImages)) {
+    if (self.transitionDuration <= 0 || self.loadsSwitchedSource ||
+        ([self displaysLoadedImage] && !self.transitionBetweenImages)) {
         return NO;
     }
     NSString* skip = self.transitionSkipOnCacheHit;
@@ -256,7 +266,7 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
         if ([self hasSize]) {
             [self reloadImage];
         }
-    } else {
+    } else if (![self switchSourceIfResized]) {
         [self reloadIfResized];
     }
 }
@@ -643,12 +653,59 @@ NSString *FFFErrorMessage(NSError *error)
 }
 
 - (void) setSource: (FFFastImageSource*)source {
-    if (_source != source) {
-        _source = 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;
+        }
         _needsReload = YES;
     }
 }
 
+// Whether the view picks one of several sources for its size.
+- (BOOL) picksSource {
+    return _sources.count > 1;
+}
+
+// Of several sources, the one whose size in pixels is closest to the view's
+// (by pixel count), or the largest while the view has no size (e.g. one sized
+// from onLoad).
+- (FFFastImageSource*) sourceForSize {
+    CGFloat scale = self.window.screen.scale ?: [UIScreen mainScreen].scale;
+    CGFloat viewPixels = self.bounds.size.width * self.bounds.size.height * scale * scale;
+    FFFastImageSource* best = nil;
+    CGFloat bestFit = CGFLOAT_MAX;
+    for (FFFastImageSource* source in _sources) {
+        CGFloat fit = viewPixels > 0 ? ABS(1 - source.pixelCount / viewPixels) : -source.pixelCount;
+        if (!best || fit < bestFit) {
+            best = source;
+            bestFit = fit;
+        }
+    }
+    return best;
+}
+
+// Several sources: another one fits the view's new size better. Loads it,
+// keeping the image showing until then, without a fade (see switchesSource).
+- (BOOL) switchSourceIfResized {
+    if (![self picksSource] || _needsReload || ![self hasSize] || [self sourceForSize] == _source) {
+        return NO;
+    }
+    self.switchesSource = YES;
+    [self reloadImage];
+    return YES;
+}
+
 - (void) setRecyclingKey: (NSString*)recyclingKey {
     if (_recyclingKey == recyclingKey || [_recyclingKey isEqualToString: recyclingKey]) {
         return;
@@ -674,12 +731,13 @@ NSString *FFFErrorMessage(NSError *error)
 
 - (void) didSetProps: (NSArray<NSString*>*)changedProps {
     if (_needsReload) {
-        // With downsample on, the image is decoded for the view's size, so
-        // a view that hasn't been laid out yet loads once it has. Props and
-        // layout are applied in the same update, so that's before the next
-        // frame (in layoutSubviews). A view that still has no size then
-        // (e.g. one sized from onLoad) loads at full size.
-        if ([self downsamples] && ![self hasSize]) {
+        // With downsample on, the image is decoded for the view's size, and
+        // with several sources one is picked for it, so a view that hasn't
+        // been laid out yet loads once it has. Props and layout are applied
+        // in the same update, so that's before the next frame (in
+        // layoutSubviews). A view that still has no size then (e.g. one sized
+        // from onLoad) loads at full size, or the largest source.
+        if (([self downsamples] || [self picksSource]) && ![self hasSize]) {
             if (!self.waitsForSize) {
                 self.waitsForSize = YES;
                 __weak typeof(self) weakSelf = self;
@@ -766,6 +824,11 @@ NSString *FFFErrorMessage(NSError *error)
 - (void) reloadImage {
     _needsReload = NO;
     self.waitsForSize = NO;
+    self.loadsSwitchedSource = self.switchesSource;
+    self.switchesSource = NO;
+    if ([self picksSource]) {
+        _source = [self sourceForSize];
+    }
     self.decodedBox = CGSizeZero;
     // The previous load, if it's still running, is for a source the view no
     // longer shows: cancel it (a new download would, but a data uri or no

package/ios/FastImage/FFFastImageViewManager.m

@@ -101,6 +101,7 @@ RCT_EXPORT_MODULE(FastImageView)
 }
 
 RCT_EXPORT_VIEW_PROPERTY(source, FFFastImageSource)
+RCT_EXPORT_VIEW_PROPERTY(sources, FFFastImageSourceArray)
 RCT_EXPORT_VIEW_PROPERTY(defaultSource, UIImage)
 RCT_EXPORT_VIEW_PROPERTY(resizeMode, RCTResizeMode)
 RCT_EXPORT_VIEW_PROPERTY(recyclingKey, NSString)

package/ios/FastImage/RCTConvert+FFFastImage.h

@@ -5,5 +5,6 @@
 @interface RCTConvert (FFFastImage)
 
 + (FFFastImageSource *)FFFastImageSource:(id)json;
++ (NSArray<FFFastImageSource *> *)FFFastImageSourceArray:(id)json;
 
 @end

package/ios/FastImage/RCTConvert+FFFastImage.m

@@ -51,6 +51,8 @@ RCT_ENUM_CONVERTER(FFFCacheControl, (@{
     imageSource.cacheKey = cacheKey.length > 0 ? cacheKey : nil;
     id memoryCache = json[@"memoryCache"];
     imageSource.memoryCache = memoryCache && memoryCache != (id)kCFNull ? [self BOOL:memoryCache] : YES;
+    CGFloat scale = json[@"scale"] && json[@"scale"] != (id)kCFNull ? [self CGFloat:json[@"scale"]] : 1;
+    imageSource.pixelCount = [self CGFloat:json[@"width"]] * [self CGFloat:json[@"height"]] * scale * scale;
     
     return imageSource;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-fast-image",
-    "version": "8.25.0",
+    "version": "8.26.0",
     "description": "🚩 FastImage, performant React Native image component.",
     "keywords": [
         "cache",