react-native-fast-image 9.3.6 → 10.0.0

package/dist/index.cjs.web.js

@@ -62,13 +62,6 @@ function fromStyle(style, key) {
 	}
 	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,
@@ -76,11 +69,202 @@ const FITS = {
 	none: true,
 	"scale-down": true
 };
-function resolveObjectFit(objectFit, style, resizeMode) {
-	var _RESIZE_MODE_FIT$resi;
+function resolveObjectFit(objectFit, style) {
 	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";
+	return fit && FITS[fit] === true ? fit : "cover";
+}
+//#endregion
+//#region src/warnings.ts
+const warned = /* @__PURE__ */ new Set();
+function warnOnce(key, message, level) {
+	if (!warned.has(key)) {
+		warned.add(key);
+		console[level](message);
+	}
+}
+function warnIfChildren(children) {
+	if (react.Children.toArray(children).length > 0) warnOnce("children", "react-native-fast-image: FastImage doesn't render children (since 10.0): use FastImageBackground for content over an image.", "error");
+}
+//#endregion
+//#region src/objectPosition.ts
+const START = {
+	fraction: 0,
+	offset: 0
+};
+const CENTER = {
+	fraction: .5,
+	offset: 0
+};
+const END = {
+	fraction: 1,
+	offset: 0
+};
+/** The default, `50% 50%`. */
+const CENTERED = {
+	x: CENTER,
+	y: CENTER
+};
+const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i;
+function length(text) {
+	const lower = text.toLowerCase();
+	if (lower.endsWith("%")) {
+		const number = lower.slice(0, -1);
+		return NUMBER.test(number) ? {
+			fraction: Number(number) / 100,
+			offset: 0
+		} : null;
+	}
+	if (lower.endsWith("px")) {
+		const number = lower.slice(0, -2);
+		return NUMBER.test(number) ? {
+			fraction: 0,
+			offset: Number(number)
+		} : null;
+	}
+	return NUMBER.test(lower) && Number(lower) === 0 ? START : null;
+}
+function token(text) {
+	const lower = text.toLowerCase();
+	if (lower === "left" || lower === "right" || lower === "top" || lower === "bottom" || lower === "center") return { keyword: lower };
+	const axis = length(text);
+	return axis ? { length: axis } : null;
+}
+const X = {
+	left: START,
+	center: CENTER,
+	right: END
+};
+const Y = {
+	top: START,
+	center: CENTER,
+	bottom: END
+};
+const x = (t) => "length" in t ? t.length : X[t.keyword];
+const y = (t) => "length" in t ? t.length : Y[t.keyword];
+function fromEdge(edge, axis) {
+	return edge === "left" || edge === "top" ? axis : {
+		fraction: 1 - axis.fraction,
+		offset: -axis.offset || 0
+	};
+}
+function parse(text) {
+	const tokens = [];
+	for (const part of text.trim().split(/\s+/)) {
+		const t = token(part);
+		if (!t) return null;
+		tokens.push(t);
+	}
+	if (tokens.length === 1) {
+		const [a] = tokens;
+		if ("keyword" in a && (a.keyword === "top" || a.keyword === "bottom")) return {
+			x: CENTER,
+			y: Y[a.keyword]
+		};
+		return {
+			x: x(a),
+			y: CENTER
+		};
+	}
+	if (tokens.length === 2) {
+		const [a, b] = tokens;
+		const ax = x(a);
+		const by = y(b);
+		if (ax && by) return {
+			x: ax,
+			y: by
+		};
+		if ("keyword" in a && "keyword" in b) {
+			const bx = X[b.keyword];
+			const ay = Y[a.keyword];
+			if (bx && ay) return {
+				x: bx,
+				y: ay
+			};
+		}
+		return null;
+	}
+	if (tokens.length === 4) {
+		const [a, b, c, d] = tokens;
+		if (!("keyword" in a && "length" in b && "keyword" in c && "length" in d)) return null;
+		const horizontal = (k) => k === "left" || k === "right";
+		const vertical = (k) => k === "top" || k === "bottom";
+		if (horizontal(a.keyword) && vertical(c.keyword)) return {
+			x: fromEdge(a.keyword, b.length),
+			y: fromEdge(c.keyword, d.length)
+		};
+		if (vertical(a.keyword) && horizontal(c.keyword)) return {
+			x: fromEdge(c.keyword, d.length),
+			y: fromEdge(a.keyword, b.length)
+		};
+	}
+	return null;
+}
+const parsed = /* @__PURE__ */ new Map();
+function objectLength(value) {
+	if (typeof value === "number") return Number.isFinite(value) ? {
+		fraction: 0,
+		offset: value
+	} : null;
+	return typeof value === "string" && value.endsWith("%") ? length(value) : null;
+}
+/**
+* The position for objectPosition, or null if it isn't valid. A string is
+* CSS's syntax; an object has one of `top` and `bottom` and one of `left`
+* and `right`, each in points or a percentage, and a missing axis is
+* centered. Unset is centered.
+*/
+function resolveObjectPosition(position) {
+	if (position == null) return CENTERED;
+	if (typeof position === "string") {
+		let result = parsed.get(position);
+		if (result === void 0) {
+			result = parse(position);
+			if (parsed.size < 100) parsed.set(position, result);
+		}
+		return result;
+	}
+	if (typeof position !== "object") return null;
+	const edges = position;
+	const axis = (start, end) => {
+		const hasStart = edges[start] != null;
+		const hasEnd = edges[end] != null;
+		if (hasStart && hasEnd) return null;
+		if (!hasStart && !hasEnd) return CENTER;
+		const edge = hasStart ? start : end;
+		const value = objectLength(edges[edge]);
+		return value && fromEdge(edge, value);
+	};
+	const resolvedX = axis("left", "right");
+	const resolvedY = axis("top", "bottom");
+	return resolvedX && resolvedY ? {
+		x: resolvedX,
+		y: resolvedY
+	} : null;
+}
+const round = (n) => Math.round(n * 1e6) / 1e6;
+/**
+* The position for objectPosition, or centered if it isn't valid (as CSS
+* ignores it), with a warning in development.
+*/
+function objectPositionOrCentered(position) {
+	const resolved = resolveObjectPosition(position);
+	if (resolved) return resolved;
+	if (typeof __DEV__ !== "undefined" && __DEV__) {
+		const value = JSON.stringify(position);
+		warnOnce(`objectPosition ${value}`, `react-native-fast-image: objectPosition ${value} isn't a position, so the image is centered. Use CSS's syntax with px or % (e.g. 'right 10px bottom 20%'), or { top | bottom, left | right } in points or percentages.`, "warn");
+	}
+	return CENTERED;
+}
+/** The position as CSS (for the web version's object-position). */
+function cssPosition({ x, y }) {
+	const axis = ({ fraction, offset }) => {
+		const percent = round(fraction * 100);
+		const px = round(offset);
+		if (px === 0) return `${percent}%`;
+		if (percent === 0) return `${px}px`;
+		return `calc(${percent}% ${px < 0 ? "-" : "+"} ${Math.abs(px)}px)`;
+	};
+	return `${axis(x)} ${axis(y)}`;
 }
 //#endregion
 //#region src/index.web.tsx
@@ -93,8 +277,9 @@ 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;
+function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadStart, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, forwardedRef, onLayout, pointerEvents, recyclingKey: _recyclingKey, loop: _loop, imageRendering: _imageRendering, paused: _paused, transition: _transition, downsample: _downsample, onProgress: _onProgress, ...props }) {
+	if (typeof __DEV__ !== "undefined" && __DEV__) warnIfChildren(children);
+	const { accessibilityLabel, "aria-label": ariaLabel, resizeMode: _resizeMode, ...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;
@@ -105,8 +290,8 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	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 fit = resolveObjectFit(objectFit, style);
+	const position = cssPosition(objectPositionOrCentered(objectPosition));
 	const filter = [blurRadius ? `blur(${blurRadius}px)` : "", tintColor ? `url(#${tintId})` : ""].filter(Boolean).join(" ") || void 0;
 	const showDefault = !!defaultUri && ok !== true;
 	useClientLayoutEffect(() => {
@@ -123,6 +308,7 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 		key: `default ${defaultUri}`,
 		src: defaultUri,
 		fit,
+		position,
 		filter,
 		alt: key ? "" : label !== null && label !== void 0 ? label : ""
 	}) : null, key && src ? /* @__PURE__ */ react.default.createElement(Picture, {
@@ -131,6 +317,7 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 		srcSet,
 		lazy: !!several,
 		fit,
+		position,
 		filter,
 		hidden: ok === false,
 		alt: label !== null && label !== void 0 ? label : "",
@@ -165,7 +352,7 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	}) : null, tintColor ? /* @__PURE__ */ react.default.createElement(TintFilter, {
 		id: tintId,
 		color: tintColor
-	}) : null, children);
+	}) : null);
 }
 function resolveUri(source) {
 	let uri;
@@ -213,14 +400,10 @@ const fill = {
 	width: "100%",
 	height: "100%"
 };
-function Picture({ src, srcSet, lazy, fit, filter, hidden, alt, onLoad, onError }) {
-	const repeat = fit === "repeat";
+function Picture({ src, srcSet, lazy, fit, position, filter, hidden, alt, onLoad, onError }) {
 	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;
@@ -230,10 +413,6 @@ function Picture({ src, srcSet, lazy, fit, filter, hidden, alt, onLoad, onError
 			sources,
 			file
 		};
-		setNatural({
-			width: target.naturalWidth,
-			height: target.naturalHeight
-		});
 		const done = () => {
 			if (mounted.current) onLoad === null || onLoad === void 0 || onLoad(target);
 		};
@@ -254,21 +433,7 @@ function Picture({ src, srcSet, lazy, fit, filter, hidden, alt, onLoad, onError
 			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", {
+	return /* @__PURE__ */ react.default.createElement("img", {
 		ref: image,
 		src,
 		srcSet,
@@ -278,9 +443,10 @@ function Picture({ src, srcSet, lazy, fit, filter, hidden, alt, onLoad, onError
 		draggable: false,
 		style: {
 			...fill,
-			objectFit: repeat ? "cover" : fit,
-			filter: repeat ? void 0 : filter,
-			opacity: repeat || hidden ? 0 : void 0
+			objectFit: fit,
+			objectPosition: position,
+			filter,
+			opacity: hidden ? 0 : void 0
 		},
 		onLoad: (event) => loaded(event.currentTarget),
 		onError: (event) => {
@@ -288,23 +454,6 @@ function Picture({ src, srcSet, lazy, fit, filter, hidden, alt, onLoad, onError
 			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);
-}
-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", {
@@ -339,9 +488,9 @@ function getSize(uri) {
 	});
 }
 const FastImage = FastImageComponent;
-FastImage.resizeMode = resizeMode;
 FastImage.cacheControl = cacheControl;
 FastImage.priority = priority;
+FastImage.resizeMode = resizeMode;
 FastImage.preload = (sources) => Promise.all(sources.map((source) => {
 	const uri = source ? source.uri : void 0;
 	if (typeof uri !== "string" || !uri) return Promise.resolve({
@@ -362,6 +511,7 @@ FastImage.preload = (sources) => Promise.all(sources.map((source) => {
 FastImage.clearMemoryCache = () => Promise.resolve(notSupported);
 FastImage.clearDiskCache = () => Promise.resolve(notSupported);
 FastImage.configureCache = () => Promise.resolve({});
+FastImage.setDefaults = () => {};
 FastImage.writeToCache = () => Promise.resolve(notSupported);
 FastImage.getCachePath = () => Promise.resolve(notSupported);
 const styles = react_native.StyleSheet.create({ container: { overflow: "hidden" } });

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

@@ -1,25 +1,23 @@
 // @flow
 
-import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'
-import type { SyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes'
+import type { NativeSyntheticEvent, ViewProps } from 'react-native'
 
-export type OnLoadEvent = SyntheticEvent<
+export type OnLoadEvent = NativeSyntheticEvent<
     $ReadOnly<{
         width: number,
         height: number,
-        // The view's React tag. Missing on Android with the legacy architecture.
-        // TODO: make it required once the New Architecture is the minimum.
+        // The view's React tag (on iOS and Android; not on the web).
         target?: number,
     }>,
 >
 
-export type OnErrorEvent = SyntheticEvent<
+export type OnErrorEvent = NativeSyntheticEvent<
     $ReadOnly<{|
         error: string,
     |}>,
 >
 
-export type OnProgressEvent = SyntheticEvent<
+export type OnProgressEvent = NativeSyntheticEvent<
     $ReadOnly<{|
         loaded: number,
         total: number,
@@ -28,6 +26,12 @@ export type OnProgressEvent = SyntheticEvent<
     |}>,
 >
 
+export type Priority = $ReadOnly<{|
+    low: 'low',
+    normal: 'normal',
+    high: 'high',
+|}>
+
 export type ResizeMode = $ReadOnly<{|
     contain: 'contain',
     cover: 'cover',
@@ -36,20 +40,22 @@ export type ResizeMode = $ReadOnly<{|
     repeat: 'repeat',
 |}>
 
-export type Priority = $ReadOnly<{|
-    low: 'low',
-    normal: 'normal',
-    high: 'high',
-|}>
-
 export type CacheControl = $ReadOnly<{|
     immutable: 'immutable',
     web: 'web',
     cacheOnly: 'cacheOnly',
 |}>
 
-export type ResizeModes = $Values<ResizeMode>
 export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+export type PositionLength = number | string
+export type ObjectPosition =
+    | string
+    | $ReadOnly<{|
+          top?: PositionLength,
+          bottom?: PositionLength,
+          left?: PositionLength,
+          right?: PositionLength,
+      |}>
 export type Priorities = $Values<Priority>
 export type CacheControls = $Values<CacheControl>
 
@@ -82,6 +88,10 @@ export type Transition = $ReadOnly<{|
     skipOnCacheHit?: ?('none' | 'memory' | 'all'),
 |}>
 
+export type FastImageDefaults = $ReadOnly<{|
+    transition?: ?(boolean | number | Transition),
+|}>
+
 export type PreloadSuccess = {|
     uri: string,
     ok: true,
@@ -125,9 +135,7 @@ export type FastImageProps = $ReadOnly<{|
 
     tintColor?: number | string,
     objectFit?: ?ObjectFit,
-    // Deprecated: use objectFit.
-    resizeMode?: ?ResizeModes,
-    fallback?: ?boolean,
+    objectPosition?: ?ObjectPosition,
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
     imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
@@ -136,6 +144,9 @@ export type FastImageProps = $ReadOnly<{|
     downsample?: ?boolean,
     blurRadius?: ?number,
     testID?: ?string,
+    // FastImage is a single native view, which doesn't take children (since
+    // 10.0): use FastImageBackground.
+    children?: "FastImage doesn't take children: use FastImageBackground for content over an image",
 |}>
 
 export type FastImageBackgroundProps = $ReadOnly<{|
@@ -148,14 +159,19 @@ export type FastImageBackgroundProps = $ReadOnly<{|
 declare export var FastImageBackground: React$ComponentType<FastImageBackgroundProps>
 
 declare export default class FastImage extends React$Component<FastImageProps> {
+    // Deprecated: removed in 10.0, and a resizeMode prop is ignored; use
+    // objectFit. Kept so code that reads it doesn't throw.
     static resizeMode: ResizeMode;
+    // Deprecated: use the strings instead, e.g. priority: 'high'.
     static priority: Priority;
+    // Deprecated: use the strings instead, e.g. cache: 'immutable'.
     static cacheControl: CacheControl;
     static preload: PreloadFn;
     static clearMemoryCache: () => Promise<ClearCacheResult>;
     static clearDiskCache: () => Promise<ClearCacheResult>;
     static getCachePath: (source: FastImageSource) => Promise<CachePathResult>;
     static configureCache: (limits?: CacheLimits) => Promise<CacheState>;
+    static setDefaults: (defaults: FastImageDefaults) => void;
     static writeToCache: (
         source: FastImageSource,
         file: string,