react-native-fast-image 9.2.2 → 9.3.1

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: use objectFit.
     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.

package/ios/FastImage/FFFastImageView.m

@@ -224,7 +224,7 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     }
 }
 
-- (void) setResizeMode: (RCTResizeMode)resizeMode {
+- (void) setResizeMode: (FFFResizeMode)resizeMode {
     if (_resizeMode != resizeMode) {
         BOOL repeated = _resizeMode == RCTResizeModeRepeat;
         _resizeMode = resizeMode;
@@ -242,10 +242,13 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 // view down to fit, as React Native's Image and Android do (#866); only a
 // smaller one is shown at its own size. UIViewContentModeCenter alone showed
 // large images at full size, cropped. So it depends on the image and the
-// view's size.
+// view's size. `none` is the image at its own size, centered, whatever its
+// size (cropped by the view).
 - (void) updateContentMode {
     UIViewContentMode contentMode = (UIViewContentMode) _resizeMode;
-    if (_resizeMode == RCTResizeModeRepeat) {
+    if (_resizeMode == FFFResizeModeNone) {
+        contentMode = UIViewContentModeCenter;
+    } else if (_resizeMode == RCTResizeModeRepeat) {
         // The tiled image (see tiledImage:) fills the view.
         contentMode = UIViewContentModeScaleToFill;
     } else if (_resizeMode == RCTResizeModeCenter) {
@@ -803,9 +806,10 @@ NSString *FFFErrorMessage(NSError *error)
 // Whether images are decoded at about the view's size (downsample, from
 // SDWebImage 5.19, and always for photo library images, which are large and
 // usually shown small: Photos makes them at the size asked for, on any
-// version). Not for `repeat`, which tiles the image at its own size.
+// version). Not for `repeat`, which tiles the image at its own size, or
+// `none`, which shows it at its own size.
 - (BOOL) downsamples {
-    if (_resizeMode == RCTResizeModeRepeat) {
+    if (_resizeMode == RCTResizeModeRepeat || _resizeMode == FFFResizeModeNone) {
         return NO;
     }
     return [_source isPhotoLibrary] || (_downsample && [FFFDownsampledImage isSupported]);
@@ -1009,6 +1013,7 @@ NSString *FFFErrorMessage(NSError *error)
             // Only on disk, also when it comes from there.
             context[SDWebImageContextStoreCacheType] = @(SDImageCacheTypeDisk);
         }
+        [FFFDownsampledImage forgetSmallerFullSizeImageForURL: source.url context: context];
         return context;
     }
     [FFFDownsampledImage addToContext: context box: box cover: cover];

package/ios/FastImage/FFFastImageViewManager.m

@@ -103,7 +103,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(resizeMode, FFFResizeMode)
 RCT_EXPORT_VIEW_PROPERTY(recyclingKey, NSString)
 RCT_EXPORT_VIEW_PROPERTY(loopCount, NSInteger)
 RCT_EXPORT_VIEW_PROPERTY(imageRendering, NSString)
@@ -288,6 +288,8 @@ RCT_EXPORT_METHOD(preload:(nonnull NSArray<FFFastImageSource *> *)sources
             [results addObject:[NSNull null]];
             SDWebImageOptions options = FFFPreloadOptions(source);
             SDWebImageMutableContext *context = FFFPreloadContext(source);
+            // It looks in the memory cache first, for the full-size image.
+            [FFFDownsampledImage forgetSmallerFullSizeImageForURL:source.url context:context];
             if (!source.memoryCache) {
                 // Not decoded (only its header is read, for the size), and not
                 // kept in memory, also when it comes from the disk cache.

package/ios/FastImage/RCTConvert+FFFastImage.h

@@ -1,9 +1,12 @@
 #import <React/RCTConvert.h>
 
+#import "FFFastImageView.h"
+
 @class FFFastImageSource;
 
 @interface RCTConvert (FFFastImage)
 
++ (FFFResizeMode)FFFResizeMode:(id)json;
 + (FFFastImageSource *)FFFastImageSource:(id)json;
 + (NSArray<FFFastImageSource *> *)FFFastImageSourceArray:(id)json;
 

package/ios/FastImage/RCTConvert+FFFastImage.m

@@ -3,6 +3,17 @@
 
 @implementation RCTConvert (FFFastImage)
 
+RCT_ENUM_CONVERTER(FFFResizeMode, (@{
+                                     @"cover": @(RCTResizeModeCover),
+                                     @"contain": @(RCTResizeModeContain),
+                                     @"stretch": @(RCTResizeModeStretch),
+                                     @"center": @(RCTResizeModeCenter),
+                                     // objectFit="scale-down": as center on iOS.
+                                     @"scale-down": @(RCTResizeModeCenter),
+                                     @"repeat": @(RCTResizeModeRepeat),
+                                     @"none": @(FFFResizeModeNone),
+                                     }), RCTResizeModeCover, integerValue);
+
 RCT_ENUM_CONVERTER(FFFPriority, (@{
                                    @"low": @(FFFPriorityLow),
                                    @"normal": @(FFFPriorityNormal),

package/package.json

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