react-native-fast-image 10.2.0 → 10.4.0

package/README.md

@@ -71,7 +71,7 @@ npx expo install react-native-fast-image
 
 It has native code, so it needs a [development build](https://docs.expo.dev/develop/development-builds/introduction/) (e.g. `npx expo run:ios`), not Expo Go.
 
-Needs React Native 0.83 or later with the New Architecture (Expo SDK 55 or later), iOS/tvOS 15.1 or later, and Android 7.0 (API 24) or later; on tvOS, it works with [React Native tvOS](https://github.com/react-native-tvos/react-native-tvos). Apps on the legacy architecture or older React Native can use FastImage 9 (`npm install react-native-fast-image@9`). Upgrading from FastImage 9: see [Upgrading from 9.x](docs/upgrading.md).
+Needs React Native 0.83 or later with the New Architecture (Expo SDK 55 or later) and React 19, iOS/tvOS 15.1 or later, and Android 7.0 (API 24) or later; on tvOS, it works with [React Native tvOS](https://github.com/react-native-tvos/react-native-tvos). Apps on the legacy architecture or older React Native can use FastImage 9 (`npm install react-native-fast-image@9`). Upgrading from FastImage 9: see [Upgrading from 9.x](docs/upgrading.md).
 
 To set the cache's size when the app starts, see [Native config](#native-config).
 
@@ -161,6 +161,8 @@ A hint for which images to start loading first when several are waiting: `'high'
 - `'normal'`: the default.
 - `'high'`: e.g. the image the screen is about.
 
+On the web, it's the image's `fetchpriority`.
+
 ---
 
 ##### `source.cache`
@@ -365,6 +367,22 @@ How the image is filtered when it's drawn smaller or larger than its size (like
 
 ---
 
+#### `loading`
+
+**Type:** `'lazy' | 'eager'` · **Default:** `'lazy'` · Web only
+
+Whether the image loads as it nears the screen (`'lazy'`) or at once (`'eager'`).
+
+---
+
+#### `sizes`
+
+**Type:** `string` · **Default:** `'auto, 100vw'` · Web only
+
+With several sources, the width the image is shown at, as the image's [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#sizes), so the browser loads the size that fits. The default is the width the image is laid out at, which needs `loading="lazy"` (otherwise, or in browsers without it, the window's width).
+
+---
+
 #### `paused`
 
 **Type:** `boolean`
@@ -406,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`
@@ -932,14 +964,15 @@ The app needs access to the photo library, which it has if it got the url from t
 
 ## Web
 
-FastImage works on the web with [react-native-web](https://necolas.github.io/react-native-web/). Bundlers pick the web version through the package's `browser` field, or the `.web.js` files next to the native ones.
+FastImage works on the web with [react-native-web](https://necolas.github.io/react-native-web/) and React 19 or later. Bundlers pick the web version through the package's `browser` field, or the `.web.js` files next to the native ones.
 
 Support is minimal:
 
-- Props that work: `source` (a `uri`, a `require()`d image, or several sizes, with `thumbhash` and `blurDataUri`), `placeholder` (and `defaultSource`), `objectFit`, `objectPosition`, `tintColor`, `blurRadius`, `style`, `onLoadStart`, `onLoad`, `onError`, `onLoadEnd`, and View props such as `testID`, accessibility props, `onLayout` and `pointerEvents`.
-- Ignored: `source.headers` (a browser can't send them for an image), `source.priority`, `source.cache`, `source.cacheKey`, `source.memoryCache`, `source.diskCache`, `recyclingKey`, `loop`, `imageRendering`, `paused`, `transition`, `downsample` and `onProgress`.
+- Props that work: `source` (a `uri`, a `require()`d image, or several sizes, with `thumbhash` and `blurDataUri`), `placeholder` (and `defaultSource`), `objectFit`, `objectPosition`, `tintColor`, `blurRadius`, `style`, `source.priority`, the web-only `loading` and `sizes`, `onLoadStart`, `onLoad`, `onError`, `onLoadEnd`, and View props such as `testID`, accessibility props, `onLayout` and `pointerEvents`.
+- Ignored: `source.headers` (a browser can't send them for an image), `source.cache`, `source.cacheKey`, `source.memoryCache`, `source.diskCache`, `recyclingKey`, `loop`, `imageRendering`, `paused`, `transition`, `downsample` and `onProgress`.
 - The image is an `<img>` element that fills the view inside its borders, with `objectFit` and `objectPosition` as its CSS `object-fit` and `object-position`. `tintColor` is an SVG filter and `blurRadius` a CSS `blur()`, and the placeholder is another `<img>`, under the image until it has loaded. A new `source` gets a new `<img>`, so the previous image doesn't stay while it loads (with several sizes, the browser shows it until the new one has loaded).
-- Several sizes are shown with a lazily loaded `<img>` whose `srcset` lists them, with `sizes="auto, 100vw"`: the browser loads the one for the width the image is shown at, in device pixels (usually the smallest that's at least as wide). Browsers that don't support `sizes="auto"` use the viewport's width.
+- Images load lazily unless [`loading`](#loading) is `'eager'`, and `source.priority` `'high'` and `'low'` are the `<img>`'s `fetchpriority`.
+- Several sizes are shown with an `<img>` whose `srcset` lists them, with `sizes="auto, 100vw"` (or [`sizes`](#sizes)): the browser loads the one for the width the image is shown at, in device pixels (usually the smallest that's at least as wide). Browsers that don't support `sizes="auto"`, or an image with `loading="eager"`, use the viewport's width.
 - `FastImage.preload` loads the images into the browser's cache and resolves with a result per source. `clearMemoryCache`, `clearDiskCache` and `configureCache` resolve without doing anything (the browser manages its cache), and `getCachePath` and `writeToCache` resolve with `{ ok: false, error: 'Not supported on the web' }`.
 
 ### ThumbHashes on the web

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

@@ -347,7 +347,7 @@ function builtInTransition() {
 	return resolveTransition(react_native.Platform.OS === "android", NO_TRANSITION);
 }
 let defaultTransition;
-function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, loop, transition, forwardedRef, ...viewProps }) {
+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;
 	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");

package/dist/index.cjs.js.flow

@@ -149,6 +149,9 @@ export type FastImageProps = $ReadOnly<{|
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
     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

@@ -278,16 +278,12 @@ function dataUri(value) {
 }
 //#endregion
 //#region src/index.web.tsx
-var _useId;
 const notSupported = {
 	ok: false,
 	error: "Not supported on the web"
 };
-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, placeholder, 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 }) {
+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;
@@ -297,12 +293,13 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	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 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 [result, setResult] = (0, react.useState)();
 	const ok = result && result.key === key ? result.ok : void 0;
-	const svgId = useSvgId().replace(/[^\w-]/g, "");
+	const svgId = (0, react.useId)().replace(/[^\w-]/g, "");
 	const tintId = `fast-image-tint-${svgId}`;
 	const blurId = `fast-image-blur-${svgId}`;
 	const fit = resolveObjectFit(objectFit, style);
@@ -322,6 +319,9 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	}, defaultUri && showDefault ? /* @__PURE__ */ react.default.createElement(Picture, {
 		key: `default ${defaultUri}`,
 		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,
@@ -330,7 +330,10 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 		key: several ? "sizes" : key,
 		src,
 		srcSet,
-		lazy: !!several,
+		sizes,
+		loading,
+		priority,
+		dynamicRangeLimit,
 		fit,
 		position,
 		filter,
@@ -375,6 +378,14 @@ function thumbhashUri(hash) {
 	if (decode) return decode(hash);
 	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("thumbhash-web", "react-native-fast-image: on the web, a `thumbhash` shows only with `import 'react-native-fast-image/thumbhash'` (it decodes them). Or make it a `blurDataUri` before it reaches the browser (e.g. on your server) with that module's thumbHashToBlurDataUri, which needs no JavaScript in the browser.", "warn");
 }
+function sourcePriority(source) {
+	const values = (Array.isArray(source) ? source : [source]).map((entry) => entry && typeof entry === "object" ? entry.priority : void 0);
+	return [
+		"high",
+		"normal",
+		"low"
+	].find((priority) => values.includes(priority));
+}
 function shared(source, key, preview) {
 	const values = (Array.isArray(source) ? source : [source]).map((entry) => {
 		var _ref;
@@ -429,7 +440,7 @@ const fill = {
 	width: "100%",
 	height: "100%"
 };
-function Picture({ src, srcSet, lazy, 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);
@@ -466,8 +477,9 @@ function Picture({ src, srcSet, lazy, fit, position, filter, hidden, alt, onLoad
 		ref: image,
 		src,
 		srcSet,
-		sizes: srcSet ? "auto, 100vw" : void 0,
-		loading: lazy ? "lazy" : void 0,
+		sizes: srcSet ? sizes !== null && sizes !== void 0 ? sizes : "auto, 100vw" : void 0,
+		loading: loading === "eager" ? void 0 : "lazy",
+		fetchPriority: priority === "high" || priority === "low" ? priority : void 0,
 		alt,
 		draggable: false,
 		style: {
@@ -475,7 +487,8 @@ function Picture({ src, srcSet, lazy, fit, position, filter, hidden, alt, onLoad
 			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

@@ -149,6 +149,9 @@ export type FastImageProps = $ReadOnly<{|
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
     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

@@ -35,6 +35,8 @@ export type Source = {
      * - `'normal'`: the default.
      * - `'high'`: e.g. the image the screen is about.
      *
+     * On the web, it's the image's `fetchpriority`.
+     *
      * @default 'normal'
      */
     priority?: Priority;
@@ -452,6 +454,25 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * @default 'auto'
      */
     imageRendering?: 'auto' | 'smooth' | 'pixelated';
+    /**
+     * Whether the image loads as it nears the screen (`'lazy'`) or at once
+     * (`'eager'`).
+     *
+     * @default 'lazy'
+     * @platform web
+     */
+    loading?: 'lazy' | 'eager';
+    /**
+     * With several sources, the width the image is shown at, as the image's
+     * [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#sizes),
+     * so the browser loads the size that fits. The default is the width the
+     * image is laid out at, which needs `loading="lazy"` (otherwise, or in
+     * browsers without it, the window's width).
+     *
+     * @default 'auto, 100vw'
+     * @platform web
+     */
+    sizes?: string;
     /**
      * Pauses an animated image (GIF, animated WebP, APNG, or animated AVIF) on
      * the frame it's showing; `false` plays it again from there
@@ -512,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

@@ -320,7 +320,7 @@ function builtInTransition() {
 	return resolveTransition(Platform.OS === "android", NO_TRANSITION);
 }
 let defaultTransition;
-function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, loop, transition, forwardedRef, ...viewProps }) {
+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;
 	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");

package/dist/index.js.flow

@@ -149,6 +149,9 @@ export type FastImageProps = $ReadOnly<{|
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
     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

@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, memo, useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { Children, forwardRef, memo, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { Image, PixelRatio, StyleSheet, View } from "react-native";
 import { getAssetByID } from "react-native-web/dist/modules/AssetRegistry";
 //#region src/constants.ts
@@ -251,16 +251,12 @@ function dataUri(value) {
 }
 //#endregion
 //#region src/index.web.tsx
-var _useId;
 const notSupported = {
 	ok: false,
 	error: "Not supported on the web"
 };
-let ids = 0;
-const useCounterId = () => useState(() => `${++ids}`)[0];
-const useSvgId = (_useId = React.useId) !== null && _useId !== void 0 ? _useId : useCounterId;
 const useClientLayoutEffect = globalThis.document === void 0 ? useEffect : useLayoutEffect;
-function FastImageBase({ source, placeholder, 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 }) {
+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;
@@ -270,12 +266,13 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	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 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 [result, setResult] = useState();
 	const ok = result && result.key === key ? result.ok : void 0;
-	const svgId = useSvgId().replace(/[^\w-]/g, "");
+	const svgId = useId().replace(/[^\w-]/g, "");
 	const tintId = `fast-image-tint-${svgId}`;
 	const blurId = `fast-image-blur-${svgId}`;
 	const fit = resolveObjectFit(objectFit, style);
@@ -295,6 +292,9 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 	}, defaultUri && showDefault ? /* @__PURE__ */ React.createElement(Picture, {
 		key: `default ${defaultUri}`,
 		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,
@@ -303,7 +303,10 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadi
 		key: several ? "sizes" : key,
 		src,
 		srcSet,
-		lazy: !!several,
+		sizes,
+		loading,
+		priority,
+		dynamicRangeLimit,
 		fit,
 		position,
 		filter,
@@ -348,6 +351,14 @@ function thumbhashUri(hash) {
 	if (decode) return decode(hash);
 	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("thumbhash-web", "react-native-fast-image: on the web, a `thumbhash` shows only with `import 'react-native-fast-image/thumbhash'` (it decodes them). Or make it a `blurDataUri` before it reaches the browser (e.g. on your server) with that module's thumbHashToBlurDataUri, which needs no JavaScript in the browser.", "warn");
 }
+function sourcePriority(source) {
+	const values = (Array.isArray(source) ? source : [source]).map((entry) => entry && typeof entry === "object" ? entry.priority : void 0);
+	return [
+		"high",
+		"normal",
+		"low"
+	].find((priority) => values.includes(priority));
+}
 function shared(source, key, preview) {
 	const values = (Array.isArray(source) ? source : [source]).map((entry) => {
 		var _ref;
@@ -402,7 +413,7 @@ const fill = {
 	width: "100%",
 	height: "100%"
 };
-function Picture({ src, srcSet, lazy, 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);
@@ -439,8 +450,9 @@ function Picture({ src, srcSet, lazy, fit, position, filter, hidden, alt, onLoad
 		ref: image,
 		src,
 		srcSet,
-		sizes: srcSet ? "auto, 100vw" : void 0,
-		loading: lazy ? "lazy" : void 0,
+		sizes: srcSet ? sizes !== null && sizes !== void 0 ? sizes : "auto, 100vw" : void 0,
+		loading: loading === "eager" ? void 0 : "lazy",
+		fetchPriority: priority === "high" || priority === "low" ? priority : void 0,
 		alt,
 		draggable: false,
 		style: {
@@ -448,7 +460,8 @@ function Picture({ src, srcSet, lazy, fit, position, filter, hidden, alt, onLoad
 			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

@@ -149,6 +149,9 @@ export type FastImageProps = $ReadOnly<{|
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
     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.2.0",
+    "version": "10.4.0",
     "description": "FastImage, performant React Native image component.",
     "keywords": [
         "cache",

package/src/index.js.flow

@@ -149,6 +149,9 @@ export type FastImageProps = $ReadOnly<{|
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
     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

@@ -54,6 +54,8 @@ export type Source = {
      * - `'normal'`: the default.
      * - `'high'`: e.g. the image the screen is about.
      *
+     * On the web, it's the image's `fetchpriority`.
+     *
      * @default 'normal'
      */
     priority?: Priority
@@ -474,6 +476,25 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * @default 'auto'
      */
     imageRendering?: 'auto' | 'smooth' | 'pixelated'
+    /**
+     * Whether the image loads as it nears the screen (`'lazy'`) or at once
+     * (`'eager'`).
+     *
+     * @default 'lazy'
+     * @platform web
+     */
+    loading?: 'lazy' | 'eager'
+    /**
+     * With several sources, the width the image is shown at, as the image's
+     * [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#sizes),
+     * so the browser loads the size that fits. The default is the width the
+     * image is laid out at, which needs `loading="lazy"` (otherwise, or in
+     * browsers without it, the window's width).
+     *
+     * @default 'auto, 100vw'
+     * @platform web
+     */
+    sizes?: string
     /**
      * Pauses an animated image (GIF, animated WebP, APNG, or animated AVIF) on
      * the frame it's showing; `false` plays it again from there
@@ -534,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.
     /**
@@ -811,6 +851,9 @@ function FastImageBase({
     objectPosition,
     loop,
     transition,
+    // Web only.
+    loading: _loading,
+    sizes: _sizes,
     forwardedRef,
     ...viewProps
 }: FastImageProps & { forwardedRef: React.Ref<any> }) {

package/src/index.web.tsx

@@ -11,15 +11,17 @@
 //
 // Works: source (uri, require(), or several sizes: see sizedSources, and
 // thumbhash and blurDataUri), placeholder (and defaultSource), objectFit,
-// objectPosition, tintColor, blurRadius, style,
-// onLoadStart, onLoad, onError, onLoadEnd, and View props (testID,
-// accessibility, onLayout, pointerEvents). The native-only props (cache,
-// priority, headers, transition, downsample, loop, paused, imageRendering,
-// recyclingKey) and onProgress are ignored.
+// objectPosition, tintColor, blurRadius, style, source.priority (as
+// fetchpriority), the web-only loading and sizes, onLoadStart, onLoad,
+// onError, onLoadEnd, and View props (testID, accessibility, onLayout,
+// pointerEvents). The native-only props (cache, headers, transition,
+// downsample, loop, paused, imageRendering, recyclingKey) and onProgress
+// are ignored.
 import React, {
     forwardRef,
     memo,
     useEffect,
+    useId,
     useLayoutEffect,
     useRef,
     useState,
@@ -40,6 +42,7 @@ import type {
     FastImageStaticProperties,
     ObjectFit,
     PreloadResult,
+    Priority,
     Source,
     SourcePlaceholder,
 } from './index'
@@ -52,15 +55,6 @@ const notSupported: CachePathResult = {
     error: 'Not supported on the web',
 }
 
-// An id that's the same on the server and in the browser: React's useId,
-// from React 18 (this package's React types are older), without the
-// characters an SVG id can't have (:r0: in React 18, «r0» in React 19). On
-// React 17, a counter's (which can differ from the server's).
-let ids = 0
-const useCounterId = () => useState(() => `${++ids}`)[0]
-const useSvgId: () => string =
-    (React as unknown as { useId?: () => string }).useId ?? useCounterId
-
 // A layout effect in the browser (it runs before the image can show), and an
 // effect when rendering on a server, where layout effects warn.
 const useClientLayoutEffect =
@@ -86,6 +80,9 @@ function FastImageBase({
     children,
     objectFit,
     objectPosition,
+    loading,
+    sizes,
+    dynamicRangeLimit,
     forwardedRef,
     // On the wrapper, the view the layout and touches are for here (on
     // native, FastImage's only view).
@@ -125,6 +122,7 @@ function FastImageBase({
     // one doesn't stay while it loads; with several sizes, the <img> stays,
     // and the browser shows the previous image until the new one has loaded.
     const key = srcSet ?? src
+    const priority = sourcePriority(source)
     // The source's blurDataUri, or its ThumbHash made into one (with
     // `react-native-fast-image/thumbhash`), shows blurred (see PreviewBlur)
     // in place of `placeholder` (or `placeholder`'s, for a source without its
@@ -144,7 +142,7 @@ function FastImageBase({
     const ok = result && result.key === key ? result.ok : undefined
     // The same on the server and in the browser. React's ids have characters
     // an SVG id can't (:r0: in React 18, «r0» in React 19).
-    const svgId = useSvgId().replace(/[^\w-]/g, '')
+    const svgId = useId().replace(/[^\w-]/g, '')
     const tintId = `fast-image-tint-${svgId}`
     const blurId = `fast-image-blur-${svgId}`
     // objectFit (the prop, then style's).
@@ -179,6 +177,10 @@ function FastImageBase({
                 <Picture
                     key={`default ${defaultUri}`}
                     src={defaultUri}
+                    // 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.
@@ -210,7 +212,10 @@ function FastImageBase({
                     key={several ? 'sizes' : key}
                     src={src}
                     srcSet={srcSet}
-                    lazy={!!several}
+                    sizes={sizes}
+                    loading={loading}
+                    priority={priority}
+                    dynamicRangeLimit={dynamicRangeLimit}
                     fit={fit}
                     position={position}
                     filter={filter}
@@ -257,6 +262,20 @@ function thumbhashUri(hash: string | undefined): string | undefined {
     return undefined
 }
 
+// A source's priority: one source's, or the highest of several sizes'.
+function sourcePriority(
+    source: FastImageProps['source'],
+): Priority | undefined {
+    const values = (Array.isArray(source) ? source : [source]).map((entry) =>
+        entry && typeof entry === 'object'
+            ? (entry as Source).priority
+            : undefined,
+    )
+    return (['high', 'normal', 'low'] as const).find((priority) =>
+        values.includes(priority),
+    )
+}
+
 // The thumbhash or blurDataUri a source shows: its own, or `placeholder`'s
 // (preview) if it has neither. With several sources, the one they all show.
 function shared(
@@ -321,9 +340,9 @@ type PackagerAsset = {
 // Several sizes of an image, as a srcset (each size's width, times its
 // scale), from which the browser loads the one for the image's width in
 // device pixels, usually the smallest at least as wide, as expo-image does.
-// sizes="auto" has the browser use the width the image is laid out at; it
-// only applies to lazy images, and browsers without it use the next value,
-// 100vw (the viewport's width). src is the largest, for browsers without
+// sizes="auto" (the default sizes) has the browser use the width the image
+// is laid out at; it only applies to lazy images, and otherwise, or in
+// browsers without it, the next value, 100vw (the viewport's width). src is the largest, for browsers without
 // srcset.
 function sizedSources(sources: Source[]) {
     const widths = sources
@@ -395,7 +414,10 @@ const fill = {
 function Picture({
     src,
     srcSet,
-    lazy,
+    sizes,
+    loading,
+    priority,
+    dynamicRangeLimit,
     fit,
     position,
     filter,
@@ -406,8 +428,14 @@ function Picture({
 }: {
     src: string
     srcSet?: string
-    // Several sizes load lazily, for sizes="auto" (see sizedSources).
-    lazy?: boolean
+    // The props (see sizedSources for sizes).
+    sizes?: string
+    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
@@ -478,8 +506,12 @@ function Picture({
             ref={image}
             src={src}
             srcSet={srcSet}
-            sizes={srcSet ? 'auto, 100vw' : undefined}
-            loading={lazy ? 'lazy' : undefined}
+            sizes={srcSet ? (sizes ?? 'auto, 100vw') : undefined}
+            loading={loading === 'eager' ? undefined : 'lazy'}
+            // For 'high' and 'low' (the browser's own for 'normal').
+            fetchPriority={
+                priority === 'high' || priority === 'low' ? priority : undefined
+            }
             alt={alt}
             draggable={false}
             style={{
@@ -488,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