react-native-fast-image 9.2.2 → 9.3.1

package/dist/index.cjs.web.js

@@ -27,6 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 let react = require("react");
 react = __toESM(react);
 let react_native = require("react-native");
+let react_native_web_dist_modules_AssetRegistry = require("react-native-web/dist/modules/AssetRegistry");
 //#region src/constants.ts
 const resizeMode = {
 	contain: "contain",
@@ -46,142 +47,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 = react_native.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 = (0, react.useRef)(void 0);
-	const sent = (0, react.useRef)(Promise.resolve());
-	const image = (0, react.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 = () => (0, react.useState)(() => `${++ids}`)[0];
+const useSvgId = (_useId = react.default.useId) !== null && _useId !== void 0 ? _useId : useCounterId;
+const useClientLayoutEffect = globalThis.document === void 0 ? react.useEffect : react.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] = (0, react.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.default.createElement(react_native.View, {
+		...viewProps,
+		"aria-label": label,
 		style: [styles.container, style],
 		onLayout,
 		pointerEvents,
 		ref: forwardedRef
-	}, 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,
-		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.default.createElement(Picture, {
+		key: `default ${defaultUri}`,
+		src: defaultUri,
+		fit,
+		filter,
+		alt: key ? "" : label !== null && label !== void 0 ? label : ""
+	}) : null, key && src ? /* @__PURE__ */ react.default.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.default.createElement(TintFilter, {
+		id: tintId,
+		color: tintColor
+	}) : null, children);
+}
+function resolveUri(source) {
+	let uri;
+	if (typeof source === "number") {
+		var _asset$scales$;
+		const asset = (0, react_native_web_dist_modules_AssetRegistry.getAssetByID)(source);
+		if (!asset) return void 0;
+		const scale = asset.scales.reduce((best, scale) => Math.abs(scale - react_native.PixelRatio.get()) < Math.abs(best - react_native.PixelRatio.get()) ? scale : best, (_asset$scales$ = asset.scales[0]) !== null && _asset$scales$ !== void 0 ? _asset$scales$ : 1);
+		const 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 = (0, react.useRef)(null);
+	const tiles = (0, react.useRef)(null);
+	const mounted = (0, react.useRef)(true);
+	const handled = (0, react.useRef)(void 0);
+	const [natural, setNatural] = (0, react.useState)();
+	const [box, setBox] = (0, react.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);
+	};
 	(0, react.useEffect)(() => {
-		onLoadStart === null || onLoadStart === void 0 || onLoadStart();
-	}, [src, srcSet]);
-	return /* @__PURE__ */ react.default.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.default.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.default.createElement(react.default.Fragment, null, repeat ? /* @__PURE__ */ react.default.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.default.createElement("svg", { style: tintStyle }, /* @__PURE__ */ react.default.createElement("defs", null, /* @__PURE__ */ react.default.createElement("filter", { id }, /* @__PURE__ */ react.default.createElement("feFlood", {
+		floodColor: String(color),
+		key: String(color)
+	}), /* @__PURE__ */ react.default.createElement("feComposite", {
+		in2: "SourceAlpha",
+		operator: "in"
+	}))));
+}
+const tintStyle = {
+	position: "absolute",
+	width: 0,
+	height: 0,
+	visibility: "hidden"
 };
 const FastImageMemo = (0, react.memo)(FastImageBase);
 const FastImageComponent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ react.default.createElement(FastImageMemo, {
@@ -189,24 +327,6 @@ const FastImageComponent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */
 	...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) => {
 		react_native.Image.getSize(uri, (width, height) => resolve({
@@ -244,16 +364,7 @@ FastImage.clearDiskCache = () => Promise.resolve(notSupported);
 FastImage.configureCache = () => Promise.resolve({});
 FastImage.writeToCache = () => Promise.resolve(notSupported);
 FastImage.getCachePath = () => Promise.resolve(notSupported);
-const styles = react_native.StyleSheet.create({
-	container: { overflow: "hidden" },
-	image: {
-		position: "absolute",
-		top: 0,
-		left: 0,
-		width: "100%",
-		height: "100%"
-	}
-});
+const styles = react_native.StyleSheet.create({ container: { overflow: "hidden" } });
 const FastImageWithRef = FastImageComponent;
 const FastImageBackground = (0, react.forwardRef)(({ style, imageStyle, imageRef, children, ...props }, ref) => /* @__PURE__ */ react.default.createElement(react_native.View, {
 	style,

package/dist/index.cjs.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/index.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { ColorValue, View, StyleProp, ViewStyle, ImageRequireSource, AccessibilityProps, ViewProps } from 'react-native';
 import { cacheControl, priority, resizeMode } from './constants';
+/** How the image fits the view: see [`objectFit`](#objectfit). */
+export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 /** How the image fits the view: see [`resizeMode`](#resizemode). */
 export type ResizeMode = 'contain' | 'cover' | 'stretch' | 'center' | 'repeat';
 /** An image's load priority: see [`source.priority`](#sourcepriority). */
@@ -234,6 +236,7 @@ export interface OnProgressEvent {
 export interface ImageStyle extends ViewStyle {
     overlayColor?: ColorValue;
     tintColor?: ColorValue;
+    objectFit?: ObjectFit;
 }
 export interface FastImageProps extends AccessibilityProps, ViewProps {
     /**
@@ -287,22 +290,46 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      */
     defaultSource?: ImageRequireSource;
     /**
-     * How the image fills the view.
+     * How the image fits the view, as CSS's `object-fit` does.
      *
-     * - `'contain'`: scales it uniformly (keeping its aspect ratio) so all of
-     *   it fits in the view (minus padding).
      * - `'cover'`: scales it uniformly (keeping its aspect ratio) so it covers
      *   the view (minus padding), cropping what doesn't fit.
-     * - `'stretch'`: scales its width and height separately to fill the view,
+     * - `'contain'`: scales it uniformly (keeping its aspect ratio) so all of
+     *   it fits in the view (minus padding).
+     * - `'fill'`: scales its width and height separately to fill the view,
      *   which can change its aspect ratio.
-     * - `'center'`: centers it at its own size, scaled down uniformly to fit
-     *   if it's larger than the view.
+     * - `'none'`: shows it at its own size, centered, cropped if it's larger
+     *   than the view.
+     * - `'scale-down'`: shows it at its own size, centered, or scaled down
+     *   uniformly to fit if it's larger than the view (the smaller of `'none'`
+     *   and `'contain'`).
+     *
+     * An image's own size is its size in pixels, as points (dp on Android),
+     * as CSS counts an image's pixels: a 300 × 200 image is 300 × 200 points.
+     * A bundled image (`require()`) is its size in points.
+     *
+     * It can also be set in `style`; the prop wins. Either one overrides
+     * `resizeMode`.
+     *
+     * @default 'cover'
+     */
+    objectFit?: ObjectFit;
+    /**
+     * How the image fills the view.
+     *
+     * - `'contain'`: as `objectFit="contain"`.
+     * - `'cover'`: as `objectFit="cover"`.
+     * - `'stretch'`: as `objectFit="fill"`.
+     * - `'center'`: as `objectFit="scale-down"`, except that on Android an
+     *   image smaller than the view is shown at its size in pixels on the
+     *   screen, so smaller than on iOS and the web.
      * - `'repeat'`: repeats it 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.
      *
      * @default 'cover'
+     * @deprecated Use `objectFit` instead.
      */
     resizeMode?: ResizeMode;
     /**
@@ -539,6 +566,9 @@ export interface PreloadFailure {
  */
 export type PreloadResult = PreloadSuccess | PreloadFailure;
 export interface FastImageStaticProperties {
+    /**
+     * @deprecated Use the `objectFit` prop instead of `resizeMode`.
+     */
     resizeMode: typeof resizeMode;
     priority: typeof priority;
     cacheControl: typeof cacheControl;

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: use objectFit.
     resizeMode?: ?ResizeModes,
     fallback?: ?boolean,
     recyclingKey?: ?string,