react-native-fast-image 8.24.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(...)`.
@@ -199,6 +226,7 @@ For views that get reused for other content, such as rows in FlashList or recycl
 - `FastImage.resizeMode.cover` **(Default)** - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
 - `FastImage.resizeMode.stretch` - Scale width and height independently, This may change the aspect ratio of the src.
 - `FastImage.resizeMode.center` - Do not scale the image, keep centered.
+- `FastImage.resizeMode.repeat` - Repeat the image to cover the view, from its top-left corner, at the image's own size in pixels (a bundled image at its size in points), scaled down to fit if it's larger than the view. An animated image repeats its first frame, and `defaultSource` repeats too.
 
 ---
 
@@ -511,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(
@@ -127,8 +133,11 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
 
     @ReactProp(name = "resizeMode")
     public void setResizeMode(FastImageViewWithUrl view, String resizeMode) {
-        final FastImageViewWithUrl.ScaleType scaleType = FastImageViewConverter.getScaleType(resizeMode);
-        view.setResizeMode(scaleType);
+        // repeat fills the view with the tiled image (see setImageDrawable).
+        boolean repeat = "repeat".equals(resizeMode);
+        final FastImageViewWithUrl.ScaleType scaleType =
+                repeat ? FastImageViewWithUrl.ScaleType.FIT_XY : FastImageViewConverter.getScaleType(resizeMode);
+        view.setResizeMode(scaleType, repeat);
     }
 
     @Override

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

@@ -12,6 +12,7 @@ import android.graphics.Canvas;
 import android.graphics.Paint;
 import android.graphics.PorterDuff;
 import android.graphics.PorterDuffXfermode;
+import android.graphics.Shader;
 import android.graphics.drawable.BitmapDrawable;
 import android.graphics.drawable.Drawable;
 
@@ -34,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;
@@ -62,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) {
@@ -354,14 +438,41 @@ class FastImageViewWithUrl extends AppCompatImageView {
                 : mLoopCount);
     }
 
+    // resizeMode repeat: the image (a GIF's first frame) repeated from the
+    // top-left at its own size, scaled down to fit the view if it's larger,
+    // as React Native's Image does. The view fills with it (FIT_XY).
+    private boolean mRepeat = false;
+
     // Glide crops or fits the bitmap for the scale type when it loads, so a
     // new resizeMode needs a reload to take effect (#762).
-    public void setResizeMode(ScaleType scaleType) {
-        if (scaleType == getScaleType()) return;
+    public void setResizeMode(ScaleType scaleType, boolean repeat) {
+        if (scaleType == getScaleType() && repeat == mRepeat) return;
         setScaleType(scaleType);
+        mRepeat = repeat;
         mNeedsReload = true;
     }
 
+    // Repeats what the view shows (the loaded image, and defaultSource).
+    @Override
+    public void setImageDrawable(@Nullable Drawable drawable) {
+        super.setImageDrawable(mRepeat ? tiled(drawable) : drawable);
+    }
+
+    @Nullable
+    private Drawable tiled(@Nullable Drawable drawable) {
+        if (!(drawable instanceof BitmapDrawable)) return drawable;
+        BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
+        if (bitmapDrawable.getTileModeX() == Shader.TileMode.REPEAT) return drawable;
+        Bitmap bitmap = bitmapDrawable.getBitmap();
+        if (bitmap == null) return drawable;
+        // A copy of the drawable (not of the bitmap): Glide's may be shown by
+        // other views too.
+        BitmapDrawable tiled = new BitmapDrawable(getResources(), bitmap);
+        tiled.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
+        if (mPixelated) tiled.setFilterBitmap(false);
+        return tiled;
+    }
+
     // imageRendering="pixelated": no resampling by Glide, and drawn without
     // filtering (sharp pixels). "smooth" is iOS only; here it's the same as
     // "auto": Glide already decodes a large image at about the view's size, and
@@ -391,9 +502,20 @@ class FastImageViewWithUrl extends AppCompatImageView {
     // pixelated, and the blur. A blurred animated image shows its first frame,
     // as on iOS.
     private RequestOptions renderingOptions(Object model) {
-        FastImageBlur blur = mBlurRadius > 0 ? new FastImageBlur(mBlurRadius, getScaleType()) : null;
+        FastImageBlur blur = mBlurRadius > 0 ? new FastImageBlur(mBlurRadius, mRepeat ? null : getScaleType()) : null;
         RequestOptions options;
-        if (mPixelated) {
+        if (mRepeat) {
+            // Decoded at its own size, or scaled down to fit the view if it's
+            // larger (not cropped or fitted for the scale type), and a GIF as
+            // its first frame (tiled by setImageDrawable).
+            options = new RequestOptions()
+                    .downsample(new FastImageSourceSize.Capture(
+                            mPixelated ? DownsampleStrategy.NONE : DownsampleStrategy.CENTER_INSIDE,
+                            String.valueOf(model)))
+                    .dontTransform()
+                    .dontAnimate();
+            if (blur != null) options = options.optionalTransform(blur);
+        } else if (mPixelated) {
             // Decoded as it is, then scaled by the view without filtering (see
             // OwnGifTarget).
             options = new RequestOptions()
@@ -481,7 +603,7 @@ class FastImageViewWithUrl extends AppCompatImageView {
             mFadeFrom = null;
             invalidate();
         }
-        reloadIfResized();
+        if (!switchSourceIfResized()) reloadIfResized();
     }
 
     private void reloadIfResized() {
@@ -632,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++;
@@ -752,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/constants.d.ts

@@ -3,6 +3,7 @@ export declare const resizeMode: {
     readonly cover: 'cover';
     readonly stretch: 'stretch';
     readonly center: 'center';
+    readonly repeat: 'repeat';
 };
 export declare const priority: {
     readonly low: 'low';

package/dist/index.cjs.js

@@ -32,7 +32,8 @@ const resizeMode = {
 	contain: "contain",
 	cover: "cover",
 	stretch: "stretch",
-	center: "center"
+	center: "center",
+	repeat: "repeat"
 };
 const priority = {
 	low: "low",
@@ -124,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],
@@ -163,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],
@@ -176,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),
@@ -199,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 {
@@ -219,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

@@ -33,6 +33,7 @@ export type ResizeMode = $ReadOnly<{|
     cover: 'cover',
     stretch: 'stretch',
     center: 'center',
+    repeat: 'repeat',
 |}>
 
 export type Priority = $ReadOnly<{|
@@ -103,6 +104,9 @@ export type FastImageSource = {
     cache?: CacheControls,
     cacheKey?: string,
     memoryCache?: boolean,
+    width?: number,
+    height?: number,
+    scale?: number,
 }
 
 export type FastImageProps = $ReadOnly<{|
@@ -113,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

@@ -32,7 +32,8 @@ const resizeMode = {
 	contain: "contain",
 	cover: "cover",
 	stretch: "stretch",
-	center: "center"
+	center: "center",
+	repeat: "repeat"
 };
 const priority = {
 	low: "low",
@@ -54,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,
@@ -107,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

@@ -33,6 +33,7 @@ export type ResizeMode = $ReadOnly<{|
     cover: 'cover',
     stretch: 'stretch',
     center: 'center',
+    repeat: 'repeat',
 |}>
 
 export type Priority = $ReadOnly<{|
@@ -103,6 +104,9 @@ export type FastImageSource = {
     cache?: CacheControls,
     cacheKey?: string,
     memoryCache?: boolean,
+    width?: number,
+    height?: number,
+    scale?: number,
 }
 
 export type FastImageProps = $ReadOnly<{|
@@ -113,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

@@ -2,7 +2,7 @@ import React from 'react';
 import { LayoutChangeEvent, StyleProp, ViewStyle, ImageRequireSource, AccessibilityProps, ViewProps } from 'react-native';
 import { cacheControl, priority, resizeMode } from './constants';
 type ColorValue = NonNullable<ViewStyle['backgroundColor']>;
-export type ResizeMode = 'contain' | 'cover' | 'stretch' | 'center';
+export type ResizeMode = 'contain' | 'cover' | 'stretch' | 'center' | 'repeat';
 export type Priority = 'low' | 'normal' | 'high';
 export type Cache = 'immutable' | 'web' | 'cacheOnly';
 export type Source = {
@@ -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

@@ -5,7 +5,8 @@ const resizeMode = {
 	contain: "contain",
 	cover: "cover",
 	stretch: "stretch",
-	center: "center"
+	center: "center",
+	repeat: "repeat"
 };
 const priority = {
 	low: "low",
@@ -97,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],
@@ -136,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],
@@ -149,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),
@@ -172,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 {
@@ -192,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

@@ -33,6 +33,7 @@ export type ResizeMode = $ReadOnly<{|
     cover: 'cover',
     stretch: 'stretch',
     center: 'center',
+    repeat: 'repeat',
 |}>
 
 export type Priority = $ReadOnly<{|
@@ -103,6 +104,9 @@ export type FastImageSource = {
     cache?: CacheControls,
     cacheKey?: string,
     memoryCache?: boolean,
+    width?: number,
+    height?: number,
+    scale?: number,
 }
 
 export type FastImageProps = $ReadOnly<{|
@@ -113,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,11 +1,12 @@
-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 = {
 	contain: "contain",
 	cover: "cover",
 	stretch: "stretch",
-	center: "center"
+	center: "center",
+	repeat: "repeat"
 };
 const priority = {
 	low: "low",
@@ -27,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,
@@ -80,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

@@ -33,6 +33,7 @@ export type ResizeMode = $ReadOnly<{|
     cover: 'cover',
     stretch: 'stretch',
     center: 'center',
+    repeat: 'repeat',
 |}>
 
 export type Priority = $ReadOnly<{|
@@ -103,6 +104,9 @@ export type FastImageSource = {
     cache?: CacheControls,
     cacheKey?: string,
     memoryCache?: boolean,
+    width?: number,
+    height?: number,
+    scale?: number,
 }
 
 export type FastImageProps = $ReadOnly<{|
@@ -113,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

@@ -24,6 +24,8 @@
 @property(nonatomic, assign) NSUInteger imageCount;
 // The view's size when the image showing was blurred.
 @property(nonatomic, assign) CGSize blurredForSize;
+// The view's size when the image showing was tiled (resizeMode repeat).
+@property(nonatomic, assign) CGSize tiledForSize;
 // The blurred image showing (untinted), so a tint change can re-show it.
 @property(nonatomic, strong) UIImage* blurredImage;
 // The image being blurred fades in once it's blurred (transition).
@@ -39,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;
@@ -130,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;
@@ -211,11 +223,14 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 
 - (void) setResizeMode: (RCTResizeMode)resizeMode {
     if (_resizeMode != resizeMode) {
+        BOOL repeated = _resizeMode == RCTResizeModeRepeat;
         _resizeMode = resizeMode;
         [self updateContentMode];
-        // The blur is made for the size the image is shown at.
-        if ([self blurs: self.originalImage]) {
-            [self setImage: self.originalImage];
+        // The blur is made for the size the image is shown at, and repeat
+        // shows the image tiled: show it again.
+        UIImage* image = self.originalImage ?: super.image;
+        if ([self blurs: self.originalImage] || ((repeated || resizeMode == RCTResizeModeRepeat) && image)) {
+            [self setImage: image];
         }
     }
 }
@@ -227,7 +242,10 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 // view's size.
 - (void) updateContentMode {
     UIViewContentMode contentMode = (UIViewContentMode) _resizeMode;
-    if (_resizeMode == RCTResizeModeCenter) {
+    if (_resizeMode == RCTResizeModeRepeat) {
+        // The tiled image (see tiledImage:) fills the view.
+        contentMode = UIViewContentModeScaleToFill;
+    } else if (_resizeMode == RCTResizeModeCenter) {
         CGSize imageSize = super.image.size;
         CGSize viewSize = self.bounds.size;
         if (imageSize.width > viewSize.width || imageSize.height > viewSize.height) {
@@ -243,11 +261,12 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     [super layoutSubviews];
     [self updateContentMode];
     [self blurAgainIfResized];
+    [self tileAgainIfResized];
     if (self.waitsForSize) {
         if ([self hasSize]) {
             [self reloadImage];
         }
-    } else {
+    } else if (![self switchSourceIfResized]) {
         [self reloadIfResized];
     }
 }
@@ -320,7 +339,8 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
         [self blurImage: image];
         return;
     }
-    self.originalImage = image && self.imageColor ? image : nil;
+    // Kept to tint, or tile (resizeMode repeat), it again.
+    self.originalImage = image && (self.imageColor || _resizeMode == RCTResizeModeRepeat) ? image : nil;
     self.blurredImage = nil;
     self.blursOverNothing = NO;
     // The blur was removed before it was ready: the fade it was waiting for
@@ -342,7 +362,9 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 // template is), or, before SDWebImage 5.20, the first frame shows.
 - (void) showImage: (UIImage*)image {
     UIColor* tint = image ? self.imageColor : nil;
-    BOOL animated = [image conformsToProtocol: @protocol(SDAnimatedImage)] && [(id<SDAnimatedImage>)image animatedImageFrameCount] > 1;
+    // resizeMode repeat tiles an animated image's first frame (tiledImage:).
+    BOOL repeats = image && _resizeMode == RCTResizeModeRepeat;
+    BOOL animated = !repeats && [image conformsToProtocol: @protocol(SDAnimatedImage)] && [(id<SDAnimatedImage>)image animatedImageFrameCount] > 1;
     self.tintColor = tint;
     if ([self tintsFrames]) {
         [self setValue: tint && animated ? [SDImageTintTransformer transformerWithColor: tint] : nil forKey: @"animationTransformer"];
@@ -356,17 +378,54 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
         if (changed) {
             [self.player seekToFrameAtIndex: 0 loopCount: 0];
         }
-    } else if (tint) {
-        if (animated) {
-            image = [UIImage imageWithCGImage: image.CGImage scale: image.scale orientation: image.imageOrientation];
-        }
-        super.image = [image imageWithRenderingMode: UIImageRenderingModeAlwaysTemplate];
     } else {
+        if (tint) {
+            if (animated) {
+                image = [UIImage imageWithCGImage: image.CGImage scale: image.scale orientation: image.imageOrientation];
+            }
+            image = [image imageWithRenderingMode: UIImageRenderingModeAlwaysTemplate];
+        }
+        if (repeats) {
+            image = [self tiledImage: image];
+            self.tiledForSize = self.bounds.size;
+        }
         super.image = image;
     }
     [self updateContentMode];
 }
 
+// resizeMode repeat: the image repeated from the top-left at its own size in
+// pixels (a scaled image, e.g. a bundled @3x one, at its size in points), an
+// animated image's first frame, scaled down to fit the view if it's larger,
+// as React Native's Image does (and Android here).
+- (UIImage*) tiledImage: (UIImage*)image {
+    CGImageRef cgImage = image.CGImage;
+    if (!cgImage) {
+        return image;
+    }
+    CGFloat scale = image.scale > 1 ? image.scale : (self.window.screen.scale ?: [UIScreen mainScreen].scale);
+    CGSize size = CGSizeMake(image.size.width * image.scale / scale, image.size.height * image.scale / scale);
+    CGSize view = self.bounds.size;
+    if (view.width > 0 && view.height > 0 && (size.width > view.width || size.height > view.height)) {
+        scale *= MAX(size.width / view.width, size.height / view.height);
+    }
+    UIImage* still = [[UIImage imageWithCGImage: cgImage scale: scale orientation: image.imageOrientation]
+                      imageWithRenderingMode: image.renderingMode];
+    return [still resizableImageWithCapInsets: UIEdgeInsetsZero resizingMode: UIImageResizingModeTile];
+}
+
+// The view's size changed since the image was tiled, which scales an image
+// larger than the view down to fit it: tile it again.
+- (void) tileAgainIfResized {
+    if (_resizeMode != RCTResizeModeRepeat || CGSizeEqualToSize(self.bounds.size, self.tiledForSize)) {
+        return;
+    }
+    UIImage* image = [self blurs: self.originalImage] ? self.blurredImage : self.originalImage;
+    if (image) {
+        [self showImage: image];
+    }
+}
+
 - (void) setBlurRadius: (CGFloat)blurRadius {
     if (_blurRadius == blurRadius) {
         return;
@@ -594,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;
@@ -625,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;
@@ -717,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.24.0",
+    "version": "8.26.0",
     "description": "🚩 FastImage, performant React Native image component.",
     "keywords": [
         "cache",