react-native-fast-image 10.3.0 → 10.4.0

package/README.md

@@ -424,6 +424,20 @@ If you control the images, serve them at the size they're shown (resized on your
 
 ---
 
+#### `dynamicRangeLimit`
+
+**Type:** `'standard' | 'constrained' | 'no-limit'` · iOS, Web only
+
+How bright HDR photos (e.g. photos taken on an iPhone) can be, on displays that support it:
+
+- `'standard'`: in standard range, like the rest of the screen.
+- `'constrained'`: in HDR, their highlights brighter than the rest of the screen but held below the display's peak, e.g. for images among other content (a feed).
+- `'no-limit'`: in full HDR, e.g. for a full-screen photo viewer.
+
+Not set, iOS shows them in standard range, and the web as the browser does by default (usually HDR). On iOS and tvOS 17 and later; Android shows them in standard range. On the web it's CSS's `dynamic-range-limit`.
+
+---
+
 #### `blurRadius`
 
 **Type:** `number` · **Default:** `0`

package/android/src/main/java/com/fastimage/FastImageViewManager.java

@@ -389,6 +389,12 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl>
         view.setDownsample(downsample);
     }
 
+    // iOS only: Android shows an HDR photo (a gain map) in HDR only when its
+    // whole window is in HDR color mode.
+    @Override
+    public void setDynamicRangeLimit(FastImageViewWithUrl view, @Nullable String dynamicRangeLimit) {
+    }
+
     // Which events JS has a handler for (FastImageEvents); with onProgress,
     // the view gets its download's progress (see onDownloadProgress).
     @Override

package/dist/index.cjs.js.flow

@@ -151,6 +151,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.cjs.web.js

@@ -283,7 +283,7 @@ const notSupported = {
 	error: "Not supported on the web"
 };
 const useClientLayoutEffect = globalThis.document === void 0 ? react.useEffect : react.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 }) {
+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;
 	if (typeof __DEV__ !== "undefined" && __DEV__) warnIfChildren(children);
 	const { accessibilityLabel, "aria-label": ariaLabel, resizeMode: _resizeMode, ...viewProps } = props;
@@ -321,6 +321,7 @@ 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,
@@ -332,6 +333,7 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 		sizes,
 		loading,
 		priority,
+		dynamicRangeLimit,
 		fit,
 		position,
 		filter,
@@ -438,7 +440,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 = (0, react.useRef)(null);
 	const mounted = (0, react.useRef)(true);
 	const handled = (0, react.useRef)(void 0);
@@ -485,7 +487,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.cjs.web.js.flow

@@ -151,6 +151,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.d.ts

@@ -533,6 +533,25 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * @default true
      */
     downsample?: boolean;
+    /**
+     * How bright HDR photos (e.g. photos taken on an iPhone) can be, on
+     * displays that support it:
+     *
+     * - `'standard'`: in standard range, like the rest of the screen.
+     * - `'constrained'`: in HDR, their highlights brighter than the rest of
+     *   the screen but held below the display's peak, e.g. for images among
+     *   other content (a feed).
+     * - `'no-limit'`: in full HDR, e.g. for a full-screen photo viewer.
+     *
+     * Not set, iOS shows them in standard range, and the web as the browser
+     * does by default (usually HDR). On iOS and tvOS 17 and later; Android
+     * shows them in standard range. On the web it's CSS's
+     * `dynamic-range-limit`.
+     *
+     * @platform ios
+     * @platform web
+     */
+    dynamicRangeLimit?: 'standard' | 'constrained' | 'no-limit';
     /**
      * Blurs the image by this radius, in points (the same radius looks about
      * the same on iOS and Android). `0` is no blur.

package/dist/index.js.flow

@@ -151,6 +151,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

@@ -256,7 +256,7 @@ 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 }) {
+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;
 	if (typeof __DEV__ !== "undefined" && __DEV__) warnIfChildren(children);
 	const { accessibilityLabel, "aria-label": ariaLabel, resizeMode: _resizeMode, ...viewProps } = props;
@@ -294,6 +294,7 @@ 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,
@@ -305,6 +306,7 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 		sizes,
 		loading,
 		priority,
+		dynamicRangeLimit,
 		fit,
 		position,
 		filter,
@@ -411,7 +413,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 +460,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

@@ -151,6 +151,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/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

@@ -59,6 +59,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

package/ios/FastImage/FFFastImageView.m

@@ -4,6 +4,7 @@
 #import <React/RCTUtils.h>
 #import <SDWebImage/SDWebImageError.h>
 #import <SDWebImage/SDImageTransformer.h>
+#import <SDWebImage/SDImageCodersManager.h>
 #import "FFFDownsampledImage.h"
 #import "FFFThumbHash.h"
 #import "FFFBoxBlur.h"
@@ -73,6 +74,9 @@
 // source's), and whether that's the source's (hashImage).
 @property(nonatomic, assign) BOOL showsPlaceholder;
 @property(nonatomic, assign) BOOL showsHash;
+// dynamicRangeLimit switched between HDR and SDR: the image is decoded again,
+// quietly (see reloadForDynamicRange).
+@property(nonatomic, assign) BOOL needsDynamicRangeReload;
 
 @end
 
@@ -643,6 +647,14 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     if (image.size.width <= 0 || image.size.height <= 0) {
         return image;
     }
+    // Blurred in standard range (the bitmap below has 8 bits per channel): an
+    // HDR image (dynamicRangeLimit) tone mapped to it, rather than its
+    // highlights clipped.
+    if (@available(iOS 17.0, tvOS 17.0, *)) {
+        if (image.isHighDynamicRange) {
+            image = [image imageRestrictedToStandardDynamicRange];
+        }
+    }
     double fullWidth = MAX(1, round(image.size.width * image.scale * scale));
     double fullHeight = MAX(1, round(image.size.height * image.scale * scale));
     // At most the image's larger side (a larger box looks the same, and an
@@ -798,6 +810,33 @@ NSString *FFFErrorMessage(NSError *error)
     }
 }
 
+- (void) setDynamicRangeLimit: (NSString*)dynamicRangeLimit {
+    if (_dynamicRangeLimit == dynamicRangeLimit || [_dynamicRangeLimit isEqualToString: dynamicRangeLimit]) {
+        return;
+    }
+    BOOL decodedToHDR = [self decodesToHDR];
+    _dynamicRangeLimit = [dynamicRangeLimit copy];
+    if (@available(iOS 17.0, tvOS 17.0, *)) {
+        // Constrained: the highlights brighter than SDR white, but not as
+        // bright as the display can go, as Apple suggests for images among
+        // other content.
+        self.preferredImageDynamicRange = [_dynamicRangeLimit isEqualToString: @"no-limit"] ? UIImageDynamicRangeHigh
+            : [_dynamicRangeLimit isEqualToString: @"constrained"] ? UIImageDynamicRangeConstrainedHigh
+            : [_dynamicRangeLimit isEqualToString: @"standard"] ? UIImageDynamicRangeStandard
+            : UIImageDynamicRangeUnspecified;
+    }
+    // Decoded again only to switch between HDR and SDR.
+    if ([self decodesToHDR] != decodedToHDR) {
+        self.needsDynamicRangeReload = YES;
+    }
+}
+
+// Whether HDR images are decoded to HDR (dynamicRangeLimit constrained or
+// no-limit), rather than to SDR, their standard range version.
+- (BOOL) decodesToHDR {
+    return [_dynamicRangeLimit isEqualToString: @"constrained"] || [_dynamicRangeLimit isEqualToString: @"no-limit"];
+}
+
 - (void) setPlaceholder: (UIImage*)placeholder {
     if (_placeholder != placeholder) {
         _placeholder = placeholder;
@@ -865,11 +904,36 @@ NSString *FFFErrorMessage(NSError *error)
             return;
         }
         [self reloadImage];
+    } else if (self.needsDynamicRangeReload) {
+        [self reloadForDynamicRange];
     } else {
         [self reloadIfResized];
     }
 }
 
+// The same image decoded again for a dynamicRangeLimit between HDR and SDR,
+// as a resize is (reloadIfResized): without events once it has loaded, and
+// the image showing stays if the load fails. A display setting shouldn't
+// look like a new load.
+- (void) reloadForDynamicRange {
+    self.needsDynamicRangeReload = NO;
+    // Nothing to load, it failed, or it waits for the view's size: the next
+    // load decodes as asked.
+    if (!_source || self.hasErrored || self.waitsForSize) {
+        return;
+    }
+    // A data uri is decoded at once, with its events (see reloadImage).
+    if ([[_source.url absoluteString] hasPrefix: @"data:image"]) {
+        [self reloadImage];
+        return;
+    }
+    SDWebImageOptions options = [self loadOptions];
+    if (self.showsLoadedImage) {
+        options |= SDWebImageDelayPlaceholder;
+    }
+    [self downloadImage: _source options: options context: [self loadContext] events: !self.hasCompleted];
+}
+
 // Whether images are decoded at about the view's size (downsample, and always
 // for photo library images, which are large and usually shown small: Photos
 // makes them at the size asked for). Not for `none`, which shows it at its own
@@ -938,6 +1002,7 @@ NSString *FFFErrorMessage(NSError *error)
 
 - (void) reloadImage {
     _needsReload = NO;
+    self.needsDynamicRangeReload = NO;
     self.waitsForSize = NO;
     self.loadsSwitchedSource = self.switchesSource;
     self.switchesSource = NO;
@@ -961,7 +1026,12 @@ NSString *FFFErrorMessage(NSError *error)
                 self.onFastImageLoadStart(@{});
             }
             // Use SDWebImage API to support external format like WebP images
-            UIImage* image = [UIImage sd_imageWithData: [NSData dataWithContentsOfURL: _source.url]];
+            // (as sd_imageWithData does), decoded to HDR or SDR as a
+            // download is (see contextForSource).
+            UIImage* image = [[SDImageCodersManager sharedManager] decodedImageWithData: [NSData dataWithContentsOfURL: _source.url] options: @{
+                SDImageCoderDecodeScaleFactor: @1,
+                SDImageCoderDecodeToHDR: @([self decodesToHDR]),
+            }];
             if (!image) {
                 // Not decodable: fail like a remote image, showing the
                 // placeholder.
@@ -1070,10 +1140,15 @@ NSString *FFFErrorMessage(NSError *error)
     context[SDWebImageContextDownloadRequestModifier] = source.requestModifier;
     context[SDWebImageContextImageLoader] = source.imageLoader;
     context[SDWebImageContextCacheKeyFilter] = source.cacheKeyFilter;
+    if (@available(iOS 17.0, tvOS 17.0, *)) {
+        // An HDR image (e.g. a photo with a gain map) decoded to HDR, or to
+        // SDR, its standard range version.
+        context[SDWebImageContextImageDecodeToHDR] = @([self decodesToHDR]);
+    }
     if (CGSizeEqualToSize(box, CGSizeZero)) {
         [FFFDownsampledImage addFullSizeToContext: context];
         [self applyCacheOptions: context source: source fullSize: YES];
-        [FFFDownsampledImage forgetSmallerFullSizeImageForURL: source.url context: context];
+        [FFFDownsampledImage forgetUnusableImageForURL: source.url context: context];
         return context;
     }
     [FFFDownsampledImage addToContext: context box: box cover: cover];
@@ -1085,6 +1160,7 @@ NSString *FFFErrorMessage(NSError *error)
         context[SDWebImageContextOriginalQueryCacheType] = @(SDImageCacheTypeNone);
     }
     [self applyCacheOptions: context source: source fullSize: NO];
+    [FFFDownsampledImage forgetUnusableImageForURL: source.url context: context];
     return context;
 }
 

package/ios/FastImage/FFFastImageViewComponentView.mm

@@ -287,6 +287,9 @@ typedef NS_OPTIONS(int32_t, FFFEvent) {
     if (all || oldViewProps.downsample != newViewProps.downsample) {
         view.downsample = newViewProps.downsample;
     }
+    if (all || oldViewProps.dynamicRangeLimit != newViewProps.dynamicRangeLimit) {
+        view.dynamicRangeLimit = FFFString(newViewProps.dynamicRangeLimit);
+    }
     if (all || oldViewProps.blurRadius != newViewProps.blurRadius) {
         view.blurRadius = newViewProps.blurRadius;
     }

package/package.json

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

package/src/index.js.flow

@@ -151,6 +151,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/src/index.tsx

@@ -555,6 +555,25 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * @default true
      */
     downsample?: boolean
+    /**
+     * How bright HDR photos (e.g. photos taken on an iPhone) can be, on
+     * displays that support it:
+     *
+     * - `'standard'`: in standard range, like the rest of the screen.
+     * - `'constrained'`: in HDR, their highlights brighter than the rest of
+     *   the screen but held below the display's peak, e.g. for images among
+     *   other content (a feed).
+     * - `'no-limit'`: in full HDR, e.g. for a full-screen photo viewer.
+     *
+     * Not set, iOS shows them in standard range, and the web as the browser
+     * does by default (usually HDR). On iOS and tvOS 17 and later; Android
+     * shows them in standard range. On the web it's CSS's
+     * `dynamic-range-limit`.
+     *
+     * @platform ios
+     * @platform web
+     */
+    dynamicRangeLimit?: 'standard' | 'constrained' | 'no-limit'
     // The radius is converted from points to the bitmap's pixels on both
     // platforms, so it matches React Native's Image.
     /**

package/src/index.web.tsx

@@ -82,6 +82,7 @@ function FastImageBase({
     objectPosition,
     loading,
     sizes,
+    dynamicRangeLimit,
     forwardedRef,
     // On the wrapper, the view the layout and touches are for here (on
     // native, FastImage's only view).
@@ -179,6 +180,7 @@ function FastImageBase({
                     // Loaded when the image is (a data uri needs no request).
                     loading={loading}
                     priority={priority}
+                    dynamicRangeLimit={dynamicRangeLimit}
                     // A source's placeholder stands for an image whose size
                     // isn't known yet: as contain for scale-down and none,
                     // which show an image at its own size.
@@ -213,6 +215,7 @@ function FastImageBase({
                     sizes={sizes}
                     loading={loading}
                     priority={priority}
+                    dynamicRangeLimit={dynamicRangeLimit}
                     fit={fit}
                     position={position}
                     filter={filter}
@@ -414,6 +417,7 @@ function Picture({
     sizes,
     loading,
     priority,
+    dynamicRangeLimit,
     fit,
     position,
     filter,
@@ -429,6 +433,9 @@ function Picture({
     loading?: 'lazy' | 'eager'
     // source.priority, as the <img>'s fetchpriority.
     priority?: Priority
+    // The prop, as CSS's dynamic-range-limit (the browser's default when
+    // not set).
+    dynamicRangeLimit?: 'standard' | 'constrained' | 'no-limit'
     fit: ObjectFit
     // objectPosition, as CSS.
     position: string
@@ -513,6 +520,8 @@ function Picture({
                 objectPosition: position,
                 filter,
                 opacity: hidden ? 0 : undefined,
+                // Not in React's CSS types yet.
+                ...({ dynamicRangeLimit } as object),
             }}
             onLoad={(event) =>
                 loaded(event.currentTarget as unknown as LoadedImage)

package/src/specs/FastImageViewNativeComponent.ts

@@ -70,6 +70,9 @@ export interface NativeProps extends ViewProps {
     transitionBetweenImages?: boolean
     transitionSkipOnCacheHit?: string
     downsample?: CodegenTypes.WithDefault<boolean, true>
+    // standard, constrained or no-limit ('' when not set). iOS and tvOS 17+
+    // (Android ignores it).
+    dynamicRangeLimit?: string
     blurRadius?: CodegenTypes.Float
     // The events JS has a handler for, as bits: 1 onFastImageLoadStart,
     // 2 onFastImageProgress, 4 onFastImageLoad, 8 onFastImageError, 16