react-native-fast-image 10.3.0 → 10.5.0

package/dist/index.js

@@ -234,8 +234,14 @@ var FastImageViewNativeComponent_default = codegenNativeComponent("FastImageView
 var NativeFastImageModule_default = TurboModuleRegistry.get("FastImageModule");
 //#endregion
 //#region src/placeholders.ts
+const SCHEME = /^[a-z][a-z\d+.-]*:/i;
 function isImageName(value) {
-	return !/^[a-z][a-z\d+.-]*:/i.test(value) && !value.startsWith("/");
+	return !SCHEME.test(value) && !value.startsWith("/");
+}
+function placeholderSource(value) {
+	const uri = typeof value === "string" ? value : value && typeof value === "object" ? value.uri : void 0;
+	if (typeof uri !== "string" || !/^https?:/i.test(uri)) return void 0;
+	return typeof value === "string" ? { uri } : value;
 }
 function hasSourcePlaceholder(value) {
 	return !!value && typeof value === "object" && ("thumbhash" in value || "blurDataUri" in value);
@@ -243,7 +249,7 @@ function hasSourcePlaceholder(value) {
 function dataUri(value) {
 	if (typeof value !== "string" || value === "") return void 0;
 	if (/^data:/i.test(value)) return value;
-	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("placeholder-url", `react-native-fast-image: \`placeholder\` and \`blurDataUri\` don't load urls: "${value.slice(0, 60)}" is ignored. Use a data uri (data:image/…), or for \`placeholder\`, a require()d image or the name of an image bundled with the app.`, "warn");
+	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("placeholder-url", `react-native-fast-image: \`blurDataUri\` takes a data uri (data:image/…): "${value.slice(0, 60)}" is ignored. For a placeholder loaded from a url, use \`placeholder\`.`, "warn");
 }
 //#endregion
 //#region src/index.tsx
@@ -321,7 +327,7 @@ function builtInTransition() {
 }
 let defaultTransition;
 function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, loop, transition, loading: _loading, sizes: _sizes, forwardedRef, ...viewProps }) {
-	var _props$recyclingKey, _defaultTransition;
+	var _placeholderSource, _props$recyclingKey, _defaultTransition;
 	const { fallback, resizeMode: _resizeMode, ...props } = viewProps;
 	if (__DEV__ && fallback !== void 0) warnOnce("fallback", "react-native-fast-image: `fallback` was removed in 10.0, and does nothing: images always load natively. Remove it, or use React Native's Image for those images.", "warn");
 	if (__DEV__) warnIfChildren(children);
@@ -339,7 +345,7 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadSt
 			sourcePlaceholders: placeholders.some(Boolean) ? placeholders : void 0
 		};
 	}, [source, shared]);
-	const resolvedPlaceholder = resolvePlaceholder(hasSourcePlaceholder(placeholder) ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
+	const resolvedPlaceholder = (_placeholderSource = placeholderSource(placeholder)) !== null && _placeholderSource !== void 0 ? _placeholderSource : resolvePlaceholder(hasSourcePlaceholder(placeholder) ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
 	return /* @__PURE__ */ React.createElement(FastImageViewNativeComponent_default, {
 		...props,
 		ref: forwardedRef,

package/dist/index.js.flow

@@ -110,6 +110,13 @@ export type PreloadResult = PreloadSuccess | PreloadFailure
 export type PreloadFn = (
     sources: Array<FastImageSource>,
 ) => Promise<Array<PreloadResult>>
+export type PlaceholderSource = {
+    uri?: string,
+    headers?: Object,
+    cacheKey?: string,
+    cache?: CacheControls,
+}
+
 export type SourcePlaceholder = {
     thumbhash?: string,
     blurDataUri?: string,
@@ -139,7 +146,7 @@ export type FastImageProps = $ReadOnly<{|
     onProgress?: ?(event: OnProgressEvent) => void,
 
     source?: ?(FastImageSource | Array<FastImageSource> | number),
-    placeholder?: ?(number | string | SourcePlaceholder),
+    placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,
 
@@ -151,6 +158,7 @@ export type FastImageProps = $ReadOnly<{|
     imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
     loading?: ?('lazy' | 'eager'),
     sizes?: ?string,
+    dynamicRangeLimit?: ?('standard' | 'constrained' | 'no-limit'),
     paused?: ?boolean,
     transition?: ?(boolean | number | Transition),
     downsample?: ?boolean,

package/dist/index.web.js

@@ -241,13 +241,18 @@ function cssPosition({ x, y }) {
 }
 //#endregion
 //#region src/placeholders.ts
+function placeholderSource(value) {
+	const uri = typeof value === "string" ? value : value && typeof value === "object" ? value.uri : void 0;
+	if (typeof uri !== "string" || !/^https?:/i.test(uri)) return void 0;
+	return typeof value === "string" ? { uri } : value;
+}
 function hasSourcePlaceholder(value) {
 	return !!value && typeof value === "object" && ("thumbhash" in value || "blurDataUri" in value);
 }
 function dataUri(value) {
 	if (typeof value !== "string" || value === "") return void 0;
 	if (/^data:/i.test(value)) return value;
-	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("placeholder-url", `react-native-fast-image: \`placeholder\` and \`blurDataUri\` don't load urls: "${value.slice(0, 60)}" is ignored. Use a data uri (data:image/…), or for \`placeholder\`, a require()d image or the name of an image bundled with the app.`, "warn");
+	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("placeholder-url", `react-native-fast-image: \`blurDataUri\` takes a data uri (data:image/…): "${value.slice(0, 60)}" is ignored. For a placeholder loaded from a url, use \`placeholder\`.`, "warn");
 }
 //#endregion
 //#region src/index.web.tsx
@@ -256,8 +261,8 @@ const notSupported = {
 	error: "Not supported on the web"
 };
 const useClientLayoutEffect = globalThis.document === void 0 ? useEffect : useLayoutEffect;
-function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadius, onLoadStart, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, loading, sizes, forwardedRef, onLayout, pointerEvents, recyclingKey: _recyclingKey, loop: _loop, imageRendering: _imageRendering, paused: _paused, transition: _transition, downsample: _downsample, onProgress: _onProgress, ...props }) {
-	var _resolveUri;
+function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadius, onLoadStart, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, loading, sizes, dynamicRangeLimit, forwardedRef, onLayout, pointerEvents, recyclingKey: _recyclingKey, loop: _loop, imageRendering: _imageRendering, paused: _paused, transition: _transition, downsample: _downsample, onProgress: _onProgress, ...props }) {
+	var _resolveUri, _placeholderSource;
 	if (typeof __DEV__ !== "undefined" && __DEV__) warnIfChildren(children);
 	const { accessibilityLabel, "aria-label": ariaLabel, resizeMode: _resizeMode, ...viewProps } = props;
 	const label = ariaLabel || accessibilityLabel || void 0;
@@ -269,7 +274,9 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	const priority = sourcePriority(source);
 	const preview = hasSourcePlaceholder(placeholder) ? placeholder : void 0;
 	const blurUri = (_resolveUri = resolveUri(dataUri(shared(source, "blurDataUri", preview)))) !== null && _resolveUri !== void 0 ? _resolveUri : thumbhashUri(shared(source, "thumbhash", preview));
-	const defaultUri = blurUri !== null && blurUri !== void 0 ? blurUri : resolveUri(preview ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
+	const urlPlaceholder = (_placeholderSource = placeholderSource(placeholder)) === null || _placeholderSource === void 0 ? void 0 : _placeholderSource.uri;
+	const [failedPlaceholder, setFailedPlaceholder] = useState();
+	const defaultUri = blurUri !== null && blurUri !== void 0 ? blurUri : resolveUri(preview || urlPlaceholder ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
 	const [result, setResult] = useState();
 	const ok = result && result.key === key ? result.ok : void 0;
 	const svgId = useId().replace(/[^\w-]/g, "");
@@ -278,7 +285,7 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	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;
+	const showDefault = ok !== true;
 	useClientLayoutEffect(() => {
 		if (key) onLoadStart === null || onLoadStart === void 0 || onLoadStart();
 	}, [key]);
@@ -294,10 +301,23 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 		src: defaultUri,
 		loading,
 		priority,
+		dynamicRangeLimit,
 		fit: blurUri && (fit === "scale-down" || fit === "none") ? "contain" : fit,
 		position,
 		filter: blurUri ? [`url(#${blurId})`, tintColor ? `url(#${tintId})` : ""].filter(Boolean).join(" ") : filter,
 		alt: key ? "" : label !== null && label !== void 0 ? label : ""
+	}) : null, urlPlaceholder && showDefault ? /* @__PURE__ */ React.createElement(Picture, {
+		key: `placeholder ${urlPlaceholder}`,
+		src: urlPlaceholder,
+		loading,
+		priority: "high",
+		dynamicRangeLimit,
+		fit: fit === "scale-down" || fit === "none" ? "contain" : fit,
+		position,
+		filter: tintColor ? `url(#${tintId})` : void 0,
+		hidden: failedPlaceholder === urlPlaceholder,
+		onError: () => setFailedPlaceholder(urlPlaceholder),
+		alt: ""
 	}) : null, key && src ? /* @__PURE__ */ React.createElement(Picture, {
 		key: several ? "sizes" : key,
 		src,
@@ -305,6 +325,7 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 		sizes,
 		loading,
 		priority,
+		dynamicRangeLimit,
 		fit,
 		position,
 		filter,
@@ -411,7 +432,7 @@ const fill = {
 	width: "100%",
 	height: "100%"
 };
-function Picture({ src, srcSet, sizes, loading, priority, fit, position, filter, hidden, alt, onLoad, onError }) {
+function Picture({ src, srcSet, sizes, loading, priority, dynamicRangeLimit, fit, position, filter, hidden, alt, onLoad, onError }) {
 	const image = useRef(null);
 	const mounted = useRef(true);
 	const handled = useRef(void 0);
@@ -458,7 +479,8 @@ function Picture({ src, srcSet, sizes, loading, priority, fit, position, filter,
 			objectFit: fit,
 			objectPosition: position,
 			filter,
-			opacity: hidden ? 0 : void 0
+			opacity: hidden ? 0 : void 0,
+			dynamicRangeLimit
 		},
 		onLoad: (event) => loaded(event.currentTarget),
 		onError: (event) => {

package/dist/index.web.js.flow

@@ -110,6 +110,13 @@ export type PreloadResult = PreloadSuccess | PreloadFailure
 export type PreloadFn = (
     sources: Array<FastImageSource>,
 ) => Promise<Array<PreloadResult>>
+export type PlaceholderSource = {
+    uri?: string,
+    headers?: Object,
+    cacheKey?: string,
+    cache?: CacheControls,
+}
+
 export type SourcePlaceholder = {
     thumbhash?: string,
     blurDataUri?: string,
@@ -139,7 +146,7 @@ export type FastImageProps = $ReadOnly<{|
     onProgress?: ?(event: OnProgressEvent) => void,
 
     source?: ?(FastImageSource | Array<FastImageSource> | number),
-    placeholder?: ?(number | string | SourcePlaceholder),
+    placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,
 
@@ -151,6 +158,7 @@ export type FastImageProps = $ReadOnly<{|
     imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
     loading?: ?('lazy' | 'eager'),
     sizes?: ?string,
+    dynamicRangeLimit?: ?('standard' | 'constrained' | 'no-limit'),
     paused?: ?boolean,
     transition?: ?(boolean | number | Transition),
     downsample?: ?boolean,

package/dist/placeholders.d.ts

@@ -1,4 +1,5 @@
-import type { SourcePlaceholder } from './index';
+import type { PlaceholderSource, SourcePlaceholder } from './index';
 export declare function isImageName(value: string): boolean;
+export declare function placeholderSource(value: unknown): PlaceholderSource | undefined;
 export declare function hasSourcePlaceholder(value: unknown): value is SourcePlaceholder;
 export declare function dataUri(value: unknown): string | undefined;

package/dist/specs/FastImageViewNativeComponent.d.ts

@@ -37,6 +37,7 @@ export interface NativeProps extends ViewProps {
     transitionBetweenImages?: boolean;
     transitionSkipOnCacheHit?: string;
     downsample?: CodegenTypes.WithDefault<boolean, true>;
+    dynamicRangeLimit?: string;
     blurRadius?: CodegenTypes.Float;
     handledEvents?: CodegenTypes.Int32;
     onFastImageLoadStart?: CodegenTypes.DirectEventHandler<LoadStartEvent>;

package/ios/FastImage/FFFDownsampledImage.h

@@ -25,12 +25,15 @@
 // 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;
+// Drops the memory cache's image for a load (call it before the load) when
+// the load can't use it, so it decodes the file from the disk cache:
+// - for a full-size load (a view that doesn't downsample, or a preload), a
+//   smaller image: SDWebImage puts an image it decoded smaller from the disk
+//   cache, for a view that downsamples, under the full-size image's key too
+//   (SDWebImageManager writes what its original cache query finds back
+//   there), which would show blurry, or be a preload's size.
+// - one decoded the other way, to HDR or SDR (dynamicRangeLimit), since
+//   SDWebImage's memory cache key is the same for both.
++ (void) forgetUnusableImageForURL: (NSURL*)url context: (SDWebImageContext*)context;
 
 @end

package/ios/FastImage/FFFDownsampledImage.m

@@ -77,7 +77,7 @@ static CGSize FFFPixelSize(NSData* data) {
     return [sourceSize isKindOfClass: [FFFSourceSize class]] ? ((FFFSourceSize*) sourceSize).size : CGSizeZero;
 }
 
-+ (void) forgetSmallerFullSizeImageForURL: (NSURL*)url context: (SDWebImageContext*)context {
++ (void) forgetUnusableImageForURL: (NSURL*)url context: (SDWebImageContext*)context {
     SDWebImageManager* manager = [SDWebImageManager sharedManager];
     if (!url || ![manager.imageCache isKindOfClass: [SDImageCache class]] || ![manager respondsToSelector: @selector(cacheKeyForURL:context:)]) {
         return;
@@ -85,12 +85,34 @@ static CGSize FFFPixelSize(NSData* data) {
     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)) {
+    if (image && ([self isSmallerFullSizeImage: image context: context] || [self isOtherDynamicRange: image context: context])) {
         [cache removeImageFromMemoryForKey: key];
     }
 }
 
+// A smaller image under a full-size load's key.
++ (BOOL) isSmallerFullSizeImage: (UIImage*)image context: (SDWebImageContext*)context {
+    if (context[SDWebImageContextImageThumbnailPixelSize]) {
+        return NO;
+    }
+    CGSize fullSize = [self sourceSizeOfImage: image];
+    return fullSize.width > 0 && fullSize.height > 0 && !CGSizeEqualToSize(image.size, fullSize);
+}
+
+// An image decoded to SDR for an HDR load, or to HDR for an SDR load. Only
+// images SDWebImage decoded say how: not a photo library's, or an app's own
+// loader's, which are kept. One decoded to HDR that came out SDR (most images
+// have no HDR) is the same as an SDR decode, and an HDR file decoded without
+// asking is HDR either way (e.g. an HDR10 HEIC on iOS 15 and 16).
++ (BOOL) isOtherDynamicRange: (UIImage*)image context: (SDWebImageContext*)context {
+    if (!image.sd_decodeOptions) {
+        return NO;
+    }
+    BOOL wantsHDR = [context[SDWebImageContextImageDecodeToHDR] boolValue];
+    BOOL decodedToHDR = [image.sd_decodeOptions[SDImageCoderDecodeToHDR] boolValue];
+    return wantsHDR ? !decodedToHDR : decodedToHDR && image.sd_isHighDynamicRange;
+}
+
 - (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/FFFastImageModule.mm

@@ -305,7 +305,7 @@ static NSDictionary *FFFFile(NSString *path)
             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];
+            [FFFDownsampledImage forgetUnusableImageForURL: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/FFFastImageView.h

@@ -34,6 +34,10 @@ typedef NS_ENUM(NSInteger, FFFObjectFit) {
 @property (nonatomic, copy) NSArray<FFFastImageSource *> *sources;
 // The `placeholder` prop.
 @property (nonatomic, strong) UIImage *placeholder;
+// `placeholder` as a url (a source): loaded apart from the
+// image, at a high priority (or only from the cache, with cache cacheOnly),
+// it shows over the other placeholders once it has.
+@property (nonatomic, strong) FFFastImageSource *placeholderSource;
 // The `sourcePlaceholders` prop, by the source's index (an empty string for
 // none; one for a single source): the picked source's ThumbHash or
 // blurDataUri (a data uri) shows instead of placeholder. JS sends them apart
@@ -59,6 +63,10 @@ typedef NS_ENUM(NSInteger, FFFObjectFit) {
 @property (nonatomic, copy) NSString *transitionSkipOnCacheHit;
 // Decodes images at about the view's size instead of at full size.
 @property (nonatomic, assign) BOOL downsample;
+// The dynamicRangeLimit prop: standard, constrained or no-limit (nil when
+// not set). With constrained and no-limit, HDR images are decoded to HDR and
+// shown in HDR (iOS and tvOS 17+).
+@property (nonatomic, copy) NSString *dynamicRangeLimit;
 // Blurs the loaded image by this radius, in points (0 is no blur).
 @property (nonatomic, assign) CGFloat blurRadius;
 // objectPosition, as CSS computes it: on each axis the image's left or top