react-native-fast-image 8.25.0 → 8.27.0

package/dist/index.cjs.js.flow

@@ -104,6 +104,9 @@ export type FastImageSource = {
     cache?: CacheControls,
     cacheKey?: string,
     memoryCache?: boolean,
+    width?: number,
+    height?: number,
+    scale?: number,
 }
 
 export type FastImageProps = $ReadOnly<{|
@@ -114,7 +117,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | number),
+    source?: ?(FastImageSource | Array<FastImageSource> | number),
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/dist/index.cjs.web.js

@@ -55,14 +55,27 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	const result = (0, react.useRef)(void 0);
 	const sent = (0, react.useRef)(Promise.resolve());
 	const image = (0, react.useRef)(null);
-	const uri = typeof source === "object" && source ? source.uri : void 0;
-	const webSource = typeof source === "number" ? source : uri ? { uri } : void 0;
+	const sizes = Array.isArray(source) && source.length > 1 ? source : void 0;
+	const single = Array.isArray(source) ? source[0] : source;
+	const uri = typeof single === "object" && single ? single.uri : void 0;
+	const webSource = typeof single === "number" ? single : uri ? { uri } : void 0;
 	return /* @__PURE__ */ react.default.createElement(react_native.View, {
 		style: [styles.container, style],
 		onLayout,
 		pointerEvents,
 		ref: forwardedRef
-	}, /* @__PURE__ */ react.default.createElement(react_native.Image, {
+	}, sizes ? /* @__PURE__ */ react.default.createElement(react_native.View, {
+		...props,
+		style: styles.image
+	}, /* @__PURE__ */ react.default.createElement(ImageSizes, {
+		sources: sizes,
+		resizeMode: mode,
+		blurRadius,
+		onLoadStart,
+		onLoad,
+		onError,
+		onLoadEnd
+	})) : /* @__PURE__ */ react.default.createElement(react_native.Image, {
 		...props,
 		style: styles.image,
 		source: webSource,
@@ -108,6 +121,68 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 		}
 	}), children);
 }
+function ImageSizes({ sources, resizeMode: mode, blurRadius, onLoadStart, onLoad, onError, onLoadEnd }) {
+	var _largest$uri, _sources$find;
+	const sized = sources.filter((source) => (source === null || source === void 0 ? void 0 : source.uri) && source.width).map((source) => {
+		var _source$width, _source$scale;
+		return {
+			uri: source.uri,
+			width: Math.round(((_source$width = source.width) !== null && _source$width !== void 0 ? _source$width : 0) * ((_source$scale = source.scale) !== null && _source$scale !== void 0 ? _source$scale : 1))
+		};
+	});
+	const largest = sized.reduce((best, source) => !best || source.width > best.width ? source : best, void 0);
+	const src = (_largest$uri = largest === null || largest === void 0 ? void 0 : largest.uri) !== null && _largest$uri !== void 0 ? _largest$uri : (_sources$find = sources.find((source) => source === null || source === void 0 ? void 0 : source.uri)) === null || _sources$find === void 0 ? void 0 : _sources$find.uri;
+	const srcSet = sized.length > 0 ? sized.map((source) => `${source.uri} ${source.width}w`).join(", ") : void 0;
+	(0, react.useEffect)(() => {
+		onLoadStart === null || onLoadStart === void 0 || onLoadStart();
+	}, [src, srcSet]);
+	return /* @__PURE__ */ react.default.createElement("img", {
+		src,
+		srcSet,
+		sizes: srcSet ? "auto, 100vw" : void 0,
+		loading: "lazy",
+		alt: "",
+		draggable: false,
+		style: {
+			position: "absolute",
+			width: "100%",
+			height: "100%",
+			objectFit: OBJECT_FIT[mode !== null && mode !== void 0 ? mode : "cover"],
+			filter: blurRadius ? `blur(${blurRadius}px)` : void 0
+		},
+		onLoad: (event) => {
+			var _picked$width;
+			const image = event.currentTarget;
+			const picked = srcSet ? sized.find((source) => new URL(source.uri, image.currentSrc).href === image.currentSrc) : void 0;
+			const loadedWidth = (_picked$width = picked === null || picked === void 0 ? void 0 : picked.width) !== null && _picked$width !== void 0 ? _picked$width : image.naturalWidth;
+			const loadedHeight = picked ? Math.round(image.naturalHeight * picked.width / image.naturalWidth) : image.naturalHeight;
+			onLoad === null || onLoad === void 0 || onLoad({ nativeEvent: {
+				width: loadedWidth,
+				height: loadedHeight
+			} });
+			onLoadEnd === null || onLoadEnd === void 0 || onLoadEnd({
+				ok: true,
+				width: loadedWidth,
+				height: loadedHeight
+			});
+		},
+		onError: () => {
+			const error = "Failed to load the image";
+			onError === null || onError === void 0 || onError({ nativeEvent: { error } });
+			onLoadEnd === null || onLoadEnd === void 0 || onLoadEnd({
+				ok: false,
+				error
+			});
+		}
+	});
+}
+const OBJECT_FIT = {
+	cover: "cover",
+	contain: "contain",
+	stretch: "fill",
+	center: "scale-down",
+	repeat: "cover"
+};
 const FastImageMemo = (0, react.memo)(FastImageBase);
 const FastImageComponent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ react.default.createElement(FastImageMemo, {
 	forwardedRef: ref,

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

@@ -104,6 +104,9 @@ export type FastImageSource = {
     cache?: CacheControls,
     cacheKey?: string,
     memoryCache?: boolean,
+    width?: number,
+    height?: number,
+    scale?: number,
 }
 
 export type FastImageProps = $ReadOnly<{|
@@ -114,7 +117,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | number),
+    source?: ?(FastImageSource | Array<FastImageSource> | number),
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/dist/index.d.ts

@@ -26,6 +26,14 @@ export type Source = {
      * list scrolled back decodes them again.
      */
     memoryCache?: boolean;
+    /**
+     * With several sources (`source` as an array), the image's size at this
+     * uri in pixels (width and height, times `scale` if given): the view
+     * loads the source closest to its own size.
+     */
+    width?: number;
+    height?: number;
+    scale?: number;
 };
 export type Transition = {
     /**
@@ -116,7 +124,12 @@ export interface ImageStyle extends ViewStyle {
     opacity?: number;
 }
 export interface FastImageProps extends AccessibilityProps, ViewProps {
-    source?: Source | ImageRequireSource;
+    /**
+     * The image: a source, a `require()`d image, or several sources of the
+     * same image at different sizes (each with its `width` and `height` in
+     * pixels), of which the view loads the one closest to its size.
+     */
+    source?: Source | Source[] | ImageRequireSource;
     defaultSource?: ImageRequireSource;
     resizeMode?: ResizeMode;
     fallback?: boolean;

package/dist/index.js

@@ -98,7 +98,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 	};
 	const resolvedTintColor = tintColor != null ? tintColor : tintColorFromStyle(style);
 	if (fallback) {
-		const cleanedSource = typeof source === "number" ? source : withoutCache(source);
+		const cleanedSource = typeof source === "number" ? source : Array.isArray(source) ? source.map(withoutCache) : withoutCache(source);
 		const resolvedSource = Image.resolveAssetSource(cleanedSource);
 		return /* @__PURE__ */ React.createElement(View, {
 			style: [styles.imageContainer, style],
@@ -137,7 +137,9 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 			resizeMode
 		}), children);
 	}
-	const resolvedSource = Image.resolveAssetSource(source);
+	const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
+	const single = Array.isArray(source) ? source[0] : source;
+	const resolvedSource = sources ? void 0 : Image.resolveAssetSource(single);
 	const resolvedDefaultSource = resolveDefaultSource(defaultSource);
 	return /* @__PURE__ */ React.createElement(View, {
 		style: [styles.imageContainer, style],
@@ -150,6 +152,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		...transitionProps(transition),
 		style: StyleSheet.absoluteFill,
 		source: resolvedSource,
+		sources,
 		defaultSource: resolvedDefaultSource,
 		onFastImageLoadStart: onLoadStart,
 		onFastImageProgress: withProgress(onProgress),
@@ -173,8 +176,14 @@ const FastImage = FastImageComponent;
 FastImage.resizeMode = resizeMode;
 FastImage.cacheControl = cacheControl;
 FastImage.priority = priority;
-FastImage.preload = (sources) => Promise.resolve(NativeModules.FastImageView.preload(sources.map((s) => s || {}))).then((results) => sources.map((source, i) => {
+const ONE_SOURCE = "Takes one source, not an array of sizes: pass the size to use";
+FastImage.preload = (sources) => Promise.resolve(NativeModules.FastImageView.preload(sources.map((s) => s && !Array.isArray(s) ? s : {}))).then((results) => sources.map((source, i) => {
 	var _results$i;
+	if (Array.isArray(source)) return {
+		ok: false,
+		error: ONE_SOURCE,
+		uri: void 0
+	};
 	const uri = source ? source.uri : void 0;
 	const result = (_results$i = results === null || results === void 0 ? void 0 : results[i]) !== null && _results$i !== void 0 ? _results$i : noResult;
 	if (!result.ok) return {
@@ -193,8 +202,14 @@ FastImage.preload = (sources) => Promise.resolve(NativeModules.FastImageView.pre
 FastImage.clearMemoryCache = () => NativeModules.FastImageView.clearMemoryCache();
 FastImage.clearDiskCache = () => NativeModules.FastImageView.clearDiskCache();
 FastImage.configureCache = (limits = {}) => Promise.resolve(NativeModules.FastImageView.configureCache(limits));
-FastImage.writeToCache = (source, file) => Promise.resolve(NativeModules.FastImageView.writeToCache(source || {}, file));
-FastImage.getCachePath = (source) => Promise.resolve(NativeModules.FastImageView.getCachePath(source || {}));
+FastImage.writeToCache = (source, file) => Array.isArray(source) ? Promise.resolve({
+	ok: false,
+	error: ONE_SOURCE
+}) : Promise.resolve(NativeModules.FastImageView.writeToCache(source || {}, file));
+FastImage.getCachePath = (source) => Array.isArray(source) ? Promise.resolve({
+	ok: false,
+	error: ONE_SOURCE
+}) : Promise.resolve(NativeModules.FastImageView.getCachePath(source || {}));
 const styles = StyleSheet.create({
 	fallbackImage: {
 		position: "absolute",

package/dist/index.js.flow

@@ -104,6 +104,9 @@ export type FastImageSource = {
     cache?: CacheControls,
     cacheKey?: string,
     memoryCache?: boolean,
+    width?: number,
+    height?: number,
+    scale?: number,
 }
 
 export type FastImageProps = $ReadOnly<{|
@@ -114,7 +117,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | number),
+    source?: ?(FastImageSource | Array<FastImageSource> | number),
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/dist/index.web.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useRef } from "react";
+import React, { forwardRef, memo, useEffect, useRef } from "react";
 import { Image, StyleSheet, View } from "react-native";
 //#region src/constants.ts
 const resizeMode = {
@@ -28,14 +28,27 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	const result = useRef(void 0);
 	const sent = useRef(Promise.resolve());
 	const image = useRef(null);
-	const uri = typeof source === "object" && source ? source.uri : void 0;
-	const webSource = typeof source === "number" ? source : uri ? { uri } : void 0;
+	const sizes = Array.isArray(source) && source.length > 1 ? source : void 0;
+	const single = Array.isArray(source) ? source[0] : source;
+	const uri = typeof single === "object" && single ? single.uri : void 0;
+	const webSource = typeof single === "number" ? single : uri ? { uri } : void 0;
 	return /* @__PURE__ */ React.createElement(View, {
 		style: [styles.container, style],
 		onLayout,
 		pointerEvents,
 		ref: forwardedRef
-	}, /* @__PURE__ */ React.createElement(Image, {
+	}, sizes ? /* @__PURE__ */ React.createElement(View, {
+		...props,
+		style: styles.image
+	}, /* @__PURE__ */ React.createElement(ImageSizes, {
+		sources: sizes,
+		resizeMode: mode,
+		blurRadius,
+		onLoadStart,
+		onLoad,
+		onError,
+		onLoadEnd
+	})) : /* @__PURE__ */ React.createElement(Image, {
 		...props,
 		style: styles.image,
 		source: webSource,
@@ -81,6 +94,68 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 		}
 	}), children);
 }
+function ImageSizes({ sources, resizeMode: mode, blurRadius, onLoadStart, onLoad, onError, onLoadEnd }) {
+	var _largest$uri, _sources$find;
+	const sized = sources.filter((source) => (source === null || source === void 0 ? void 0 : source.uri) && source.width).map((source) => {
+		var _source$width, _source$scale;
+		return {
+			uri: source.uri,
+			width: Math.round(((_source$width = source.width) !== null && _source$width !== void 0 ? _source$width : 0) * ((_source$scale = source.scale) !== null && _source$scale !== void 0 ? _source$scale : 1))
+		};
+	});
+	const largest = sized.reduce((best, source) => !best || source.width > best.width ? source : best, void 0);
+	const src = (_largest$uri = largest === null || largest === void 0 ? void 0 : largest.uri) !== null && _largest$uri !== void 0 ? _largest$uri : (_sources$find = sources.find((source) => source === null || source === void 0 ? void 0 : source.uri)) === null || _sources$find === void 0 ? void 0 : _sources$find.uri;
+	const srcSet = sized.length > 0 ? sized.map((source) => `${source.uri} ${source.width}w`).join(", ") : void 0;
+	useEffect(() => {
+		onLoadStart === null || onLoadStart === void 0 || onLoadStart();
+	}, [src, srcSet]);
+	return /* @__PURE__ */ React.createElement("img", {
+		src,
+		srcSet,
+		sizes: srcSet ? "auto, 100vw" : void 0,
+		loading: "lazy",
+		alt: "",
+		draggable: false,
+		style: {
+			position: "absolute",
+			width: "100%",
+			height: "100%",
+			objectFit: OBJECT_FIT[mode !== null && mode !== void 0 ? mode : "cover"],
+			filter: blurRadius ? `blur(${blurRadius}px)` : void 0
+		},
+		onLoad: (event) => {
+			var _picked$width;
+			const image = event.currentTarget;
+			const picked = srcSet ? sized.find((source) => new URL(source.uri, image.currentSrc).href === image.currentSrc) : void 0;
+			const loadedWidth = (_picked$width = picked === null || picked === void 0 ? void 0 : picked.width) !== null && _picked$width !== void 0 ? _picked$width : image.naturalWidth;
+			const loadedHeight = picked ? Math.round(image.naturalHeight * picked.width / image.naturalWidth) : image.naturalHeight;
+			onLoad === null || onLoad === void 0 || onLoad({ nativeEvent: {
+				width: loadedWidth,
+				height: loadedHeight
+			} });
+			onLoadEnd === null || onLoadEnd === void 0 || onLoadEnd({
+				ok: true,
+				width: loadedWidth,
+				height: loadedHeight
+			});
+		},
+		onError: () => {
+			const error = "Failed to load the image";
+			onError === null || onError === void 0 || onError({ nativeEvent: { error } });
+			onLoadEnd === null || onLoadEnd === void 0 || onLoadEnd({
+				ok: false,
+				error
+			});
+		}
+	});
+}
+const OBJECT_FIT = {
+	cover: "cover",
+	contain: "contain",
+	stretch: "fill",
+	center: "scale-down",
+	repeat: "cover"
+};
 const FastImageMemo = memo(FastImageBase);
 const FastImageComponent = forwardRef((props, ref) => /* @__PURE__ */ React.createElement(FastImageMemo, {
 	forwardedRef: ref,

package/dist/index.web.js.flow

@@ -104,6 +104,9 @@ export type FastImageSource = {
     cache?: CacheControls,
     cacheKey?: string,
     memoryCache?: boolean,
+    width?: number,
+    height?: number,
+    scale?: number,
 }
 
 export type FastImageProps = $ReadOnly<{|
@@ -114,7 +117,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | number),
+    source?: ?(FastImageSource | Array<FastImageSource> | number),
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/ios/FastImage/FFFastImageSource.h

@@ -32,6 +32,9 @@ typedef NS_ENUM(NSInteger, FFFCacheControl) {
 @property (nonatomic) FFFCacheControl cacheControl;
 // The key to cache the image under instead of its url, or nil.
 @property (nonatomic, copy) NSString *cacheKey;
+// With several sources, the image's size at this url in pixels (width ×
+// height × scale²), to pick the one closest to the view's size; 0 if unknown.
+@property (nonatomic) CGFloat pixelCount;
 // Whether the decoded image is kept in the memory cache (`memoryCache`,
 // default YES). Without it, it's only kept on disk: views don't leave it in
 // memory, and preload doesn't decode it.
@@ -61,6 +64,10 @@ typedef NS_ENUM(NSInteger, FFFCacheControl) {
 // which is decoded at about the view's size.
 - (BOOL)isPhotoLibrary;
 
+// The error's message, or for an SVG image that couldn't be decoded because
+// the app doesn't have SDWebImageSVGCoder, what to add.
+- (NSString *)errorMessage:(NSError *)error;
+
 // A photo library image's own size in pixels (for onLoad when it comes from
 // a cache, where the size it was decoded from isn't recorded), or zero.
 - (CGSize)photoPixelSize;

package/ios/FastImage/FFFastImageSource.m

@@ -5,8 +5,12 @@
 #import <SDWebImage/SDWebImageError.h>
 #import <SDWebImage/SDWebImageDownloaderOperation.h>
 #import <SDWebImage/NSData+ImageContentType.h>
+#import <SDWebImage/SDImageCodersManager.h>
 #import <objc/message.h>
 
+// In FFFastImageView.m.
+FOUNDATION_EXTERN NSString *FFFErrorMessage(NSError *error);
+
 static NSUInteger const FFFWebCacheSize = 50 * 1024 * 1024;
 
 // The photo's own size in pixels, looked up by its identifier (the url after
@@ -173,8 +177,41 @@ static CGSize FFFPhotoPixelSize(NSURL *url)
 
 @end
 
+// SDWebImageSVGCoder's coder, when the app has the pod (SVG images): found at
+// runtime, so FastImage doesn't depend on it. Nil otherwise.
+static id<SDImageCoder> FFFSVGCoder;
+
 @implementation FFFastImageSource
 
++ (void)initialize
+{
+    if (self != [FFFastImageSource class]) {
+        return;
+    }
+    // Registered with SDWebImage's coders, as the pod's setup does (unless
+    // the app has already): SDWebImage then picks it for SVG data, including
+    // for FastImage's animated and downsampled image classes. Giving the
+    // coder per load instead (SDWebImageContextImageCoder) would make it the
+    // only coder for everything in that load. So the app's own SDWebImage
+    // use can decode SVG too, which is what the pod is for.
+    Class coderClass = NSClassFromString(@"SDImageSVGCoder");
+    SEL shared = NSSelectorFromString(@"sharedCoder");
+    if (!coderClass || ![coderClass respondsToSelector:shared]) {
+        return;
+    }
+    id coder = ((id (*)(id, SEL))objc_msgSend)(coderClass, shared);
+    if (![coder conformsToProtocol:@protocol(SDImageCoder)]) {
+        return;
+    }
+    FFFSVGCoder = coder;
+    for (id<SDImageCoder> registered in SDImageCodersManager.sharedManager.coders) {
+        if ([registered isKindOfClass:coderClass]) {
+            return;
+        }
+    }
+    [SDImageCodersManager.sharedManager addCoder:coder];
+}
+
 - (instancetype)initWithURL:(NSURL *)url
                    priority:(FFFPriority)priority
                     headers:(NSDictionary *)headers
@@ -216,6 +253,15 @@ static CGSize FFFPhotoPixelSize(NSURL *url)
     return 0;
 }
 
+- (NSString *)errorMessage:(NSError *)error
+{
+    if (!FFFSVGCoder && [error.domain isEqualToString:SDWebImageErrorDomain] && error.code == SDWebImageErrorBadImageData &&
+        [_url.path.lowercaseString hasSuffix:@".svg"]) {
+        return @"SVG images need SDWebImageSVGCoder: add pod 'SDWebImageSVGCoder' to the app's Podfile";
+    }
+    return FFFErrorMessage(error);
+}
+
 - (BOOL)isPhotoLibrary
 {
     return [_url.scheme isEqualToString:@"ph"];

package/ios/FastImage/FFFastImageView.h

@@ -17,6 +17,9 @@
 @property (nonatomic, copy) RCTDirectEventBlock onFastImageLoadEnd;
 @property (nonatomic, assign) RCTResizeMode resizeMode;
 @property (nonatomic, strong) FFFastImageSource *source;
+// Several sources (2 or more) of the same image at different sizes: the view
+// loads the one whose size is closest to its own.
+@property (nonatomic, copy) NSArray<FFFastImageSource *> *sources;
 @property (nonatomic, strong) UIImage *defaultSource;
 @property (nonatomic, strong) UIColor *imageColor;
 // When it changes, the next image doesn't replace the current one: the view