react-native-fast-image 9.2.1 → 9.3.0

package/dist/index.js

@@ -19,30 +19,61 @@ const cacheControl = {
 	cacheOnly: "cacheOnly"
 };
 //#endregion
-//#region src/index.tsx
-const resolveDefaultSource = (defaultSource) => {
-	if (!defaultSource) return null;
-	if (Platform.OS === "android") {
-		const resolved = Image.resolveAssetSource(defaultSource);
-		if (resolved) return resolved.uri;
-		return null;
-	}
-	return defaultSource;
-};
-function tintColorFromStyle(style) {
+//#region src/objectFit.ts
+function fromStyle(style, key) {
 	if (Array.isArray(style)) {
 		for (let i = style.length - 1; i >= 0; i--) {
-			const found = tintColorFromStyle(style[i]);
+			const found = fromStyle(style[i], key);
 			if (found !== void 0) return found;
 		}
 		return;
 	}
 	if (typeof style === "number") {
 		const flattened = StyleSheet.flatten(style);
-		return flattened ? flattened.tintColor : void 0;
+		return flattened ? flattened[key] : void 0;
 	}
-	return style && typeof style === "object" ? style.tintColor : void 0;
+	return style && typeof style === "object" ? style[key] : void 0;
+}
+const RESIZE_MODE_FIT = {
+	contain: "contain",
+	cover: "cover",
+	stretch: "fill",
+	center: "center",
+	repeat: "repeat"
+};
+const FITS = {
+	fill: true,
+	contain: true,
+	cover: true,
+	none: true,
+	"scale-down": true
+};
+function resolveObjectFit(objectFit, style, resizeMode) {
+	var _RESIZE_MODE_FIT$resi;
+	const fit = objectFit != null ? objectFit : fromStyle(style, "objectFit");
+	if (fit && FITS[fit] === true) return fit;
+	return (_RESIZE_MODE_FIT$resi = RESIZE_MODE_FIT[resizeMode]) !== null && _RESIZE_MODE_FIT$resi !== void 0 ? _RESIZE_MODE_FIT$resi : "cover";
 }
+//#endregion
+//#region src/index.tsx
+const resolveDefaultSource = (defaultSource) => {
+	if (!defaultSource) return null;
+	if (Platform.OS === "android") {
+		const resolved = Image.resolveAssetSource(defaultSource);
+		if (resolved) return resolved.uri;
+		return null;
+	}
+	return defaultSource;
+};
+const NATIVE_RESIZE_MODE = {
+	fill: "stretch",
+	contain: "contain",
+	cover: "cover",
+	none: "none",
+	"scale-down": "scale-down",
+	center: "center",
+	repeat: "repeat"
+};
 function loopCount(loop) {
 	if (loop === void 0) return -1;
 	if (loop === true) return 0;
@@ -84,7 +115,7 @@ function withoutCache(source) {
 	const { cache: _cache, ...rest } = source || {};
 	return rest;
 }
-function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, fallback, children, resizeMode = "cover", loop, transition, forwardedRef, onLayout, pointerEvents, hitSlop, onStartShouldSetResponder, onStartShouldSetResponderCapture, onMoveShouldSetResponder, onMoveShouldSetResponderCapture, onResponderGrant, onResponderReject, onResponderStart, onResponderMove, onResponderEnd, onResponderRelease, onResponderTerminationRequest, onResponderTerminate, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, onTouchEndCapture, ...viewProps }) {
+function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, fallback, children, objectFit, resizeMode = "cover", loop, transition, forwardedRef, onLayout, pointerEvents, hitSlop, onStartShouldSetResponder, onStartShouldSetResponderCapture, onMoveShouldSetResponder, onMoveShouldSetResponderCapture, onResponderGrant, onResponderReject, onResponderStart, onResponderMove, onResponderEnd, onResponderRelease, onResponderTerminationRequest, onResponderTerminate, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, onTouchEndCapture, ...viewProps }) {
 	const { onClick, ...props } = viewProps;
 	const fallbackResult = useRef(void 0);
 	const wrapperProps = {
@@ -114,7 +145,8 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		...props,
 		pointerEvents: pointerEvents === "box-none" ? "none" : void 0
 	};
-	const resolvedTintColor = tintColor != null ? tintColor : tintColorFromStyle(style);
+	const resolvedTintColor = tintColor != null ? tintColor : fromStyle(style, "tintColor");
+	const mode = NATIVE_RESIZE_MODE[resolveObjectFit(objectFit, style, resizeMode)];
 	if (fallback) {
 		const cleanedSource = typeof source === "number" ? source : Array.isArray(source) ? source.map(withoutCache) : withoutCache(source);
 		const resolvedSource = Image.resolveAssetSource(cleanedSource);
@@ -152,7 +184,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 					error: "Failed to load the image"
 				});
 			}),
-			resizeMode
+			resizeMode: mode === "none" || mode === "scale-down" ? "center" : mode
 		}), children);
 	}
 	const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
@@ -178,7 +210,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		onFastImageLoad: onLoad,
 		onFastImageError: onError,
 		onFastImageLoadEnd: onLoadEnd && ((event) => onLoadEnd(loadResult(event.nativeEvent))),
-		resizeMode
+		resizeMode: mode
 	}), children);
 }
 const FastImageMemo = memo(FastImageBase);

package/dist/index.js.flow

@@ -49,6 +49,7 @@ export type CacheControl = $ReadOnly<{|
 |}>
 
 export type ResizeModes = $Values<ResizeMode>
+export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
 export type Priorities = $Values<Priority>
 export type CacheControls = $Values<CacheControl>
 
@@ -123,6 +124,8 @@ export type FastImageProps = $ReadOnly<{|
     defaultSource?: ?number,
 
     tintColor?: number | string,
+    objectFit?: ?ObjectFit,
+    // Deprecated: objectFit, except for 'repeat'.
     resizeMode?: ?ResizeModes,
     fallback?: ?boolean,
     recyclingKey?: ?string,

package/dist/index.web.js

@@ -1,5 +1,6 @@
-import React, { forwardRef, memo, useEffect, useRef } from "react";
-import { Image, StyleSheet, View } from "react-native";
+import React, { forwardRef, memo, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Image, PixelRatio, StyleSheet, View } from "react-native";
+import { getAssetByID } from "react-native-web/dist/modules/AssetRegistry";
 //#region src/constants.ts
 const resizeMode = {
 	contain: "contain",
@@ -19,142 +20,279 @@ const cacheControl = {
 	cacheOnly: "cacheOnly"
 };
 //#endregion
+//#region src/objectFit.ts
+function fromStyle(style, key) {
+	if (Array.isArray(style)) {
+		for (let i = style.length - 1; i >= 0; i--) {
+			const found = fromStyle(style[i], key);
+			if (found !== void 0) return found;
+		}
+		return;
+	}
+	if (typeof style === "number") {
+		const flattened = StyleSheet.flatten(style);
+		return flattened ? flattened[key] : void 0;
+	}
+	return style && typeof style === "object" ? style[key] : void 0;
+}
+const RESIZE_MODE_FIT = {
+	contain: "contain",
+	cover: "cover",
+	stretch: "fill",
+	center: "center",
+	repeat: "repeat"
+};
+const FITS = {
+	fill: true,
+	contain: true,
+	cover: true,
+	none: true,
+	"scale-down": true
+};
+function resolveObjectFit(objectFit, style, resizeMode) {
+	var _RESIZE_MODE_FIT$resi;
+	const fit = objectFit != null ? objectFit : fromStyle(style, "objectFit");
+	if (fit && FITS[fit] === true) return fit;
+	return (_RESIZE_MODE_FIT$resi = RESIZE_MODE_FIT[resizeMode]) !== null && _RESIZE_MODE_FIT$resi !== void 0 ? _RESIZE_MODE_FIT$resi : "cover";
+}
+//#endregion
 //#region src/index.web.tsx
+var _useId;
 const notSupported = {
 	ok: false,
 	error: "Not supported on the web"
 };
-function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadStart, onLoad, onError, onLoadEnd, style, children, resizeMode: mode = "cover", forwardedRef, onLayout, pointerEvents, fallback: _fallback, recyclingKey: _recyclingKey, loop: _loop, imageRendering: _imageRendering, paused: _paused, transition: _transition, downsample: _downsample, onProgress: _onProgress, ...props }) {
-	const result = useRef(void 0);
-	const sent = useRef(Promise.resolve());
-	const image = useRef(null);
-	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;
+let ids = 0;
+const useCounterId = () => useState(() => `${++ids}`)[0];
+const useSvgId = (_useId = React.useId) !== null && _useId !== void 0 ? _useId : useCounterId;
+const useClientLayoutEffect = globalThis.document === void 0 ? useEffect : useLayoutEffect;
+function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadStart, onLoad, onError, onLoadEnd, style, children, objectFit, resizeMode: mode = "cover", forwardedRef, onLayout, pointerEvents, fallback: _fallback, recyclingKey: _recyclingKey, loop: _loop, imageRendering: _imageRendering, paused: _paused, transition: _transition, downsample: _downsample, onProgress: _onProgress, ...props }) {
+	const { accessibilityLabel, "aria-label": ariaLabel, ...viewProps } = props;
+	const label = ariaLabel || accessibilityLabel || void 0;
+	const several = Array.isArray(source) && source.length > 1 ? source : void 0;
+	const sized = several ? sizedSources(several) : void 0;
+	const src = sized ? sized.src : resolveUri(source);
+	const srcSet = sized === null || sized === void 0 ? void 0 : sized.srcSet;
+	const key = srcSet !== null && srcSet !== void 0 ? srcSet : src;
+	const defaultUri = resolveUri(defaultSource);
+	const [result, setResult] = useState();
+	const ok = result && result.key === key ? result.ok : void 0;
+	const tintId = `fast-image-tint-${useSvgId().replace(/[^\w-]/g, "")}`;
+	const resolved = resolveObjectFit(objectFit, style, mode);
+	const fit = resolved === "center" ? "scale-down" : several && resolved === "repeat" ? "cover" : resolved;
+	const filter = [blurRadius ? `blur(${blurRadius}px)` : "", tintColor ? `url(#${tintId})` : ""].filter(Boolean).join(" ") || void 0;
+	const showDefault = !!defaultUri && ok !== true;
+	useClientLayoutEffect(() => {
+		if (key) onLoadStart === null || onLoadStart === void 0 || onLoadStart();
+	}, [key]);
 	return /* @__PURE__ */ React.createElement(View, {
+		...viewProps,
+		"aria-label": label,
 		style: [styles.container, style],
 		onLayout,
 		pointerEvents,
 		ref: forwardedRef
-	}, 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,
-		defaultSource,
-		resizeMode: mode,
-		tintColor,
-		blurRadius,
-		ref: image,
-		onLoadStart,
-		onLoad: (event) => {
-			var _event$nativeEvent;
-			sent.current = loadedSize(event === null || event === void 0 || (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.target, image.current, uri).then(({ width, height }) => {
-				result.current = {
-					ok: true,
-					width,
-					height
-				};
-				onLoad === null || onLoad === void 0 || onLoad({ nativeEvent: {
-					width,
-					height
-				} });
+	}, defaultUri && showDefault ? /* @__PURE__ */ React.createElement(Picture, {
+		key: `default ${defaultUri}`,
+		src: defaultUri,
+		fit,
+		filter,
+		alt: key ? "" : label !== null && label !== void 0 ? label : ""
+	}) : null, key && src ? /* @__PURE__ */ React.createElement(Picture, {
+		key: several ? "sizes" : key,
+		src,
+		srcSet,
+		lazy: !!several,
+		fit,
+		filter,
+		hidden: ok === false,
+		alt: label !== null && label !== void 0 ? label : "",
+		onLoad: (image) => {
+			const { width, height } = loadedSize(image, sized);
+			setResult({
+				key,
+				ok: true
+			});
+			onLoad === null || onLoad === void 0 || onLoad({ nativeEvent: {
+				width,
+				height
+			} });
+			onLoadEnd === null || onLoadEnd === void 0 || onLoadEnd({
+				ok: true,
+				width,
+				height
 			});
 		},
-		onError: (event) => {
-			var _event$nativeEvent$er, _event$nativeEvent2;
-			const error = String((_event$nativeEvent$er = event === null || event === void 0 || (_event$nativeEvent2 = event.nativeEvent) === null || _event$nativeEvent2 === void 0 ? void 0 : _event$nativeEvent2.error) !== null && _event$nativeEvent$er !== void 0 ? _event$nativeEvent$er : "Failed to load the image");
-			result.current = {
+		onError: (uri) => {
+			const error = `Failed to load resource ${uri}`;
+			setResult({
+				key,
+				ok: false
+			});
+			onError === null || onError === void 0 || onError({ nativeEvent: { error } });
+			onLoadEnd === null || onLoadEnd === void 0 || onLoadEnd({
 				ok: false,
 				error
-			};
-			sent.current = Promise.resolve();
-			onError === null || onError === void 0 || onError({ nativeEvent: { error } });
-		},
-		onLoadEnd: () => {
-			sent.current.then(() => {
-				var _result$current;
-				onLoadEnd === null || onLoadEnd === void 0 || onLoadEnd((_result$current = result.current) !== null && _result$current !== void 0 ? _result$current : {
-					ok: false,
-					error: "Failed to load the image"
-				});
-				result.current = void 0;
 			});
 		}
-	}), children);
+	}) : null, tintColor ? /* @__PURE__ */ React.createElement(TintFilter, {
+		id: tintId,
+		color: tintColor
+	}) : null, children);
+}
+function resolveUri(source) {
+	let uri;
+	if (typeof source === "number") {
+		var _asset$scales$;
+		const asset = getAssetByID(source);
+		if (!asset) return void 0;
+		const scale = asset.scales.reduce((best, scale) => Math.abs(scale - PixelRatio.get()) < Math.abs(best - PixelRatio.get()) ? scale : best, (_asset$scales$ = asset.scales[0]) !== null && _asset$scales$ !== void 0 ? _asset$scales$ : 1);
+		const suffix = scale !== 1 ? `@${scale}x` : "";
+		uri = `${asset.httpServerLocation}/${asset.name}${suffix}.${asset.type}`;
+	} else if (typeof source === "string") uri = source;
+	else if (Array.isArray(source)) return resolveUri(source[0]);
+	else if (source && typeof source.uri === "string") uri = source.uri;
+	const svg = uri === null || uri === void 0 ? void 0 : uri.match(/^(data:image\/svg\+xml;utf8,)(.*)/);
+	return svg ? svg[1] + encodeURIComponent(svg[2]) : uri || void 0;
 }
-function ImageSizes({ sources, resizeMode: mode, blurRadius, onLoadStart, onLoad, onError, onLoadEnd }) {
+function sizedSources(sources) {
 	var _largest$uri, _sources$find;
-	const sized = sources.filter((source) => (source === null || source === void 0 ? void 0 : source.uri) && source.width).map((source) => {
+	const widths = sources.filter((source) => (source === null || source === void 0 ? void 0 : source.uri) && source.width).map((source) => {
 		var _source$width, _source$scale;
 		return {
 			uri: source.uri,
 			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;
+	const largest = widths.reduce((best, source) => !best || source.width > best.width ? source : best, void 0);
+	return {
+		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,
+		srcSet: widths.length > 0 ? widths.map((source) => `${source.uri} ${source.width}w`).join(", ") : void 0,
+		widths
+	};
+}
+function loadedSize(image, sized) {
+	var _picked$width;
+	const picked = (sized === null || sized === void 0 ? void 0 : sized.srcSet) ? sized.widths.find((source) => new URL(source.uri, image.currentSrc).href === image.currentSrc) : void 0;
+	return {
+		width: (_picked$width = picked === null || picked === void 0 ? void 0 : picked.width) !== null && _picked$width !== void 0 ? _picked$width : image.naturalWidth,
+		height: picked ? Math.round(image.naturalHeight * picked.width / image.naturalWidth) : image.naturalHeight
+	};
+}
+const fill = {
+	position: "absolute",
+	top: 0,
+	left: 0,
+	width: "100%",
+	height: "100%"
+};
+function Picture({ src, srcSet, lazy, fit, filter, hidden, alt, onLoad, onError }) {
+	const repeat = fit === "repeat";
+	const image = useRef(null);
+	const tiles = useRef(null);
+	const mounted = useRef(true);
+	const handled = useRef(void 0);
+	const [natural, setNatural] = useState();
+	const [box, setBox] = useState();
+	const loaded = (target) => {
+		var _handled$current, _target$decode;
+		const file = target.currentSrc || src;
+		const sources = srcSet !== null && srcSet !== void 0 ? srcSet : src;
+		if (!mounted.current || ((_handled$current = handled.current) === null || _handled$current === void 0 ? void 0 : _handled$current.sources) === sources && handled.current.file === file) return;
+		handled.current = {
+			sources,
+			file
+		};
+		setNatural({
+			width: target.naturalWidth,
+			height: target.naturalHeight
+		});
+		const done = () => {
+			if (mounted.current) onLoad === null || onLoad === void 0 || onLoad(target);
+		};
+		Promise.resolve((_target$decode = target.decode) === null || _target$decode === void 0 ? void 0 : _target$decode.call(target)).then(done, done);
+	};
 	useEffect(() => {
-		onLoadStart === null || onLoadStart === void 0 || onLoadStart();
-	}, [src, srcSet]);
-	return /* @__PURE__ */ React.createElement("img", {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	useClientLayoutEffect(() => {
+		var _target$decode2;
+		const target = image.current;
+		if (!(target === null || target === void 0 ? void 0 : target.complete)) return;
+		if (target.naturalWidth > 0) return loaded(target);
+		Promise.resolve((_target$decode2 = target.decode) === null || _target$decode2 === void 0 ? void 0 : _target$decode2.call(target)).then(() => loaded(target), () => {
+			if (mounted.current) onError === null || onError === void 0 || onError(target.currentSrc || src);
+		});
+	}, []);
+	useClientLayoutEffect(() => {
+		const Observer = globalThis.ResizeObserver;
+		const node = tiles.current;
+		if (!repeat || !node || !Observer) return;
+		const observer = new Observer((entries) => {
+			const { width, height } = entries[0].contentRect;
+			setBox({
+				width,
+				height
+			});
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [repeat]);
+	const img = /* @__PURE__ */ React.createElement("img", {
+		ref: image,
 		src,
 		srcSet,
 		sizes: srcSet ? "auto, 100vw" : void 0,
-		loading: "lazy",
-		alt: "",
+		loading: lazy ? "lazy" : void 0,
+		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
+			...fill,
+			objectFit: repeat ? "cover" : fit,
+			filter: repeat ? void 0 : filter,
+			opacity: repeat || hidden ? 0 : 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
-			});
+		onLoad: (event) => loaded(event.currentTarget),
+		onError: (event) => {
+			const target = event.currentTarget;
+			if (mounted.current) onError === null || onError === void 0 || onError((target === null || target === void 0 ? void 0 : target.currentSrc) || src);
 		}
 	});
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, repeat ? /* @__PURE__ */ React.createElement("div", {
+		ref: tiles,
+		style: {
+			...fill,
+			backgroundImage: `url("${src}")`,
+			backgroundRepeat: "repeat",
+			backgroundPosition: "0",
+			backgroundSize: tileSize(natural, box),
+			filter,
+			opacity: hidden ? 0 : void 0
+		}
+	}) : null, img);
 }
-const OBJECT_FIT = {
-	cover: "cover",
-	contain: "contain",
-	stretch: "fill",
-	center: "scale-down",
-	repeat: "cover"
+function tileSize(natural, box) {
+	if (!(natural === null || natural === void 0 ? void 0 : natural.width) || !natural.height || !(box === null || box === void 0 ? void 0 : box.width) || !box.height) return;
+	const scale = Math.min(1, box.width / natural.width, box.height / natural.height);
+	return `${Math.ceil(scale * natural.width)}px ${Math.ceil(scale * natural.height)}px`;
+}
+function TintFilter({ id, color }) {
+	return /* @__PURE__ */ React.createElement("svg", { style: tintStyle }, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", { id }, /* @__PURE__ */ React.createElement("feFlood", {
+		floodColor: String(color),
+		key: String(color)
+	}), /* @__PURE__ */ React.createElement("feComposite", {
+		in2: "SourceAlpha",
+		operator: "in"
+	}))));
+}
+const tintStyle = {
+	position: "absolute",
+	width: 0,
+	height: 0,
+	visibility: "hidden"
 };
 const FastImageMemo = memo(FastImageBase);
 const FastImageComponent = forwardRef((props, ref) => /* @__PURE__ */ React.createElement(FastImageMemo, {
@@ -162,24 +300,6 @@ const FastImageComponent = forwardRef((props, ref) => /* @__PURE__ */ React.crea
 	...props
 }));
 FastImageComponent.displayName = "FastImage";
-async function loadedSize(loaded, view, uri) {
-	var _view$querySelector;
-	if (loaded === null || loaded === void 0 ? void 0 : loaded.naturalWidth) return {
-		width: loaded.naturalWidth,
-		height: loaded.naturalHeight
-	};
-	await new Promise((resolve) => setTimeout(resolve, 0));
-	const shown = view === null || view === void 0 || (_view$querySelector = view.querySelector) === null || _view$querySelector === void 0 ? void 0 : _view$querySelector.call(view, "img");
-	if (shown === null || shown === void 0 ? void 0 : shown.naturalWidth) return {
-		width: shown.naturalWidth,
-		height: shown.naturalHeight
-	};
-	const src = uri !== null && uri !== void 0 ? uri : shown === null || shown === void 0 ? void 0 : shown.src;
-	return src ? getSize(src) : {
-		width: 0,
-		height: 0
-	};
-}
 function getSize(uri) {
 	return new Promise((resolve) => {
 		Image.getSize(uri, (width, height) => resolve({
@@ -217,16 +337,7 @@ FastImage.clearDiskCache = () => Promise.resolve(notSupported);
 FastImage.configureCache = () => Promise.resolve({});
 FastImage.writeToCache = () => Promise.resolve(notSupported);
 FastImage.getCachePath = () => Promise.resolve(notSupported);
-const styles = StyleSheet.create({
-	container: { overflow: "hidden" },
-	image: {
-		position: "absolute",
-		top: 0,
-		left: 0,
-		width: "100%",
-		height: "100%"
-	}
-});
+const styles = StyleSheet.create({ container: { overflow: "hidden" } });
 const FastImageWithRef = FastImageComponent;
 const FastImageBackground = forwardRef(({ style, imageStyle, imageRef, children, ...props }, ref) => /* @__PURE__ */ React.createElement(View, {
 	style,

package/dist/index.web.js.flow

@@ -49,6 +49,7 @@ export type CacheControl = $ReadOnly<{|
 |}>
 
 export type ResizeModes = $Values<ResizeMode>
+export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
 export type Priorities = $Values<Priority>
 export type CacheControls = $Values<CacheControl>
 
@@ -123,6 +124,8 @@ export type FastImageProps = $ReadOnly<{|
     defaultSource?: ?number,
 
     tintColor?: number | string,
+    objectFit?: ?ObjectFit,
+    // Deprecated: objectFit, except for 'repeat'.
     resizeMode?: ?ResizeModes,
     fallback?: ?boolean,
     recyclingKey?: ?string,

package/dist/objectFit.d.ts

@@ -0,0 +1,3 @@
+import type { ImageStyle, ObjectFit, ResizeMode } from './index';
+export declare function fromStyle<K extends 'tintColor' | 'objectFit'>(style: unknown, key: K): ImageStyle[K];
+export declare function resolveObjectFit(objectFit: ObjectFit | null | undefined, style: unknown, resizeMode: ResizeMode): ObjectFit | 'repeat' | 'center';

package/ios/FastImage/FFFDownsampledImage.h

@@ -25,6 +25,14 @@
 // loaded this way was decoded from, for onLoad, or zero for other images.
 + (CGSize) sourceSizeOfImage: (UIImage*)image;
 
+// SDWebImage puts an image it decoded smaller from the disk cache, for a view
+// that downsamples, into the memory cache under the full-size image's key too
+// (SDWebImageManager writes what its original cache query finds back there),
+// where a full-size load (a view that doesn't downsample, or a preload) would
+// find it: a blurry image, or a preload's size. Drops it there, so that load
+// decodes the file from the disk cache. Call it before a full-size load.
++ (void) forgetSmallerFullSizeImageForURL: (NSURL*)url context: (SDWebImageContext*)context;
+
 // Whether this version of SDWebImage can decode through this class: it
 // decodes static images through the animated image class since 5.19.
 + (BOOL) isSupported;

package/ios/FastImage/FFFDownsampledImage.m

@@ -5,6 +5,8 @@
 #import <SDWebImage/UIImage+Metadata.h>
 #import <SDWebImage/NSData+ImageContentType.h>
 #import <SDWebImage/SDImageCodersManager.h>
+#import <SDWebImage/SDImageCache.h>
+#import <SDWebImage/SDWebImageManager.h>
 
 // The decode option that carries the full image's size to the view.
 static SDImageCoderOption const FFFDecodeSourceSize = @"FFFDecodeSourceSize";
@@ -109,6 +111,20 @@ static CGSize FFFPixelSize(NSData* data) {
     return [sourceSize isKindOfClass: [FFFSourceSize class]] ? ((FFFSourceSize*) sourceSize).size : CGSizeZero;
 }
 
++ (void) forgetSmallerFullSizeImageForURL: (NSURL*)url context: (SDWebImageContext*)context {
+    SDWebImageManager* manager = [SDWebImageManager sharedManager];
+    if (!url || ![manager.imageCache isKindOfClass: [SDImageCache class]] || ![manager respondsToSelector: @selector(cacheKeyForURL:context:)]) {
+        return;
+    }
+    SDImageCache* cache = (SDImageCache*) manager.imageCache;
+    NSString* key = [manager cacheKeyForURL: url context: context];
+    UIImage* image = [cache imageFromMemoryCacheForKey: key];
+    CGSize fullSize = [self sourceSizeOfImage: image];
+    if (image && fullSize.width > 0 && fullSize.height > 0 && !CGSizeEqualToSize(image.size, fullSize)) {
+        [cache removeImageFromMemoryForKey: key];
+    }
+}
+
 - (instancetype) initWithData: (NSData*)data scale: (CGFloat)scale options: (SDImageCoderOptions*)options {
     // An SVG isn't decoded smaller: it's a vector image, drawn at any size.
     // This class can't decode it, and SDWebImage would then give it to the

package/ios/FastImage/FFFastImageView.h

@@ -8,6 +8,12 @@
 
 #import "FFFastImageSource.h"
 
+// resizeMode: React Native's, and `none` (objectFit="none": the image at its
+// own size, centered, not scaled), which React Native's own resize modes only
+// have from 0.77, with another meaning (top-left).
+typedef RCTResizeMode FFFResizeMode;
+static const FFFResizeMode FFFResizeModeNone = (FFFResizeMode) -2;
+
 @interface FFFastImageView : SDAnimatedImageView
 
 @property (nonatomic, copy) RCTDirectEventBlock onFastImageLoadStart;
@@ -17,7 +23,7 @@
 @property (nonatomic, copy) RCTDirectEventBlock onFastImageError;
 @property (nonatomic, copy) RCTDirectEventBlock onFastImageLoad;
 @property (nonatomic, copy) RCTDirectEventBlock onFastImageLoadEnd;
-@property (nonatomic, assign) RCTResizeMode resizeMode;
+@property (nonatomic, assign) FFFResizeMode 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.