react-native-fast-image 10.1.1 → 10.3.0

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;
@@ -111,6 +113,32 @@ export type Source = {
      * @default true
      */
     diskCache?: boolean;
+    /**
+     * A [ThumbHash](https://evanw.github.io/thumbhash/) of the image, shown
+     * blurred while the image loads, and if it fails to load. It's a short
+     * string you make when the image is uploaded (e.g. with the `thumbhash`
+     * package) and send with the image's url.
+     *
+     * On the web, it needs `import 'react-native-fast-image/thumbhash'` (see
+     * [ThumbHashes on the web](#thumbhashes-on-the-web)).
+     *
+     * @example
+     * ```jsx
+     * <FastImage source={{ uri: photo.url, thumbhash: photo.thumbhash }} />
+     * ```
+     */
+    thumbhash?: string;
+    /**
+     * A tiny version of the image (e.g. 8 to 20 px) as a data uri, shown
+     * blurred while the image loads, and if it fails to load. On the web it
+     * shows without any JavaScript, e.g. in a server-rendered page.
+     *
+     * @example
+     * ```jsx
+     * <FastImage source={{ uri: photo.url, blurDataUri: photo.lqip }} />
+     * ```
+     */
+    blurDataUri?: string;
     /**
      * With several sources (`source` as an array), the image's width at this
      * uri, in pixels (times `scale`, if given).
@@ -124,6 +152,8 @@ export type Source = {
     /** With several sources, the scale `width` and `height` are multiplied by. */
     scale?: number;
 };
+/** A `thumbhash` or `blurDataUri` as `placeholder`. */
+export type SourcePlaceholder = Pick<Source, 'thumbhash' | 'blurDataUri'>;
 /** How the image fades in: see [`transition`](#transition). */
 export type Transition = {
     /**
@@ -135,7 +165,7 @@ export type Transition = {
     /**
      * Also fades between images: a new `source` replacing an image that's
      * showing cross-dissolves from it. Otherwise only an image that appears
-     * over nothing (or over `defaultSource`) fades in, and a new source
+     * over nothing (or over a placeholder) fades in, and a new source
      * replaces the image showing at once, once it has loaded.
      * @default false
      */
@@ -303,14 +333,29 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      */
     source?: Source | Source[] | ImageRequireSource;
     /**
-     * An asset loaded with `require(...)`, shown while the first image loads,
-     * and if an image fails to load. When `source` changes, the previous image
-     * shows while the new one loads instead (see `source` and
-     * `recyclingKey`).
+     * A placeholder shown while the image loads, and if it fails to load:
+     *
+     * - An image loaded with `require()`: `placeholder={require('./gray.png')}`.
+     * - A data uri: `placeholder="data:image/png;base64,…"`.
+     * - The name of an image bundled with the app (an iOS asset catalog image
+     *   or an Android drawable): `placeholder="gray"`.
+     * - A [ThumbHash](#sourcethumbhash), shown blurred:
+     *   `placeholder={{ thumbhash }}`.
+     * - A tiny image as a data uri, shown blurred:
+     *   `placeholder={{ blurDataUri }}`.
+     *
+     * A source's own `thumbhash` or `blurDataUri` is shown instead, if it has
+     * one.
      *
-     * On Android, `defaultSource` doesn't show in debug builds: there the dev
-     * server serves `require()`d images, and `defaultSource` is only loaded
-     * from the app's resources.
+     * Notes:
+     *
+     * - A url isn't loaded: it's ignored, with a warning in development.
+     * - On Android, a `require()`d image doesn't show in debug builds, where
+     *   the dev server serves it. Release builds show it.
+     */
+    placeholder?: ImageRequireSource | string | SourcePlaceholder;
+    /**
+     * @deprecated Use `placeholder`, which does the same.
      */
     defaultSource?: ImageRequireSource;
     /**
@@ -353,8 +398,8 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      *   `{ right: 10, bottom: '20%' }`. A missing axis is centered.
      *
      * Points are dp on Android. An invalid value is ignored (the image is
-     * centered), with a warning in development. `defaultSource` is placed
-     * the same way.
+     * centered), with a warning in development. Placeholders are placed the
+     * same way.
      *
      * @default '50% 50%'
      * @example
@@ -367,7 +412,7 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * For views that get reused for other content, such as rows in FlashList
      * or recyclerlistview. Set it to something that identifies the content,
      * e.g. the item's id. When it changes, the image is cleared right away (to
-     * `defaultSource`, or blank) instead of staying until the new one has
+     * `placeholder`, or blank) instead of staying until the new one has
      * loaded. Unlike changing `key`, this keeps the view, which is what list
      * recycling is for.
      *
@@ -409,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
@@ -477,7 +541,7 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * blurring a photo behind a sheet). Each change blurs the image again on
      * the CPU, so don't animate it.
      *
-     * - Only the loaded image is blurred, not `defaultSource`.
+     * - Only the loaded image is blurred, not a placeholder.
      * - An animated image (GIF, animated WebP, APNG or AVIF) shows its first frame,
      *   blurred, and doesn't animate.
      * - With `tintColor`, the blurred image is tinted.
@@ -559,7 +623,7 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
     style?: StyleProp<ImageStyle>;
     /**
      * If supplied, changes the color of all the non-transparent pixels to the
-     * given color.
+     * given color, including the placeholder.
      */
     tintColor?: ColorValue;
     /**

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, memo } from "react";
+import React, { Children, forwardRef, memo, useMemo } from "react";
 import { Image, Platform, StyleSheet, TurboModuleRegistry, View, codegenNativeComponent } from "react-native";
 //#region src/constants.ts
 const resizeMode = {
@@ -233,10 +233,39 @@ var FastImageViewNativeComponent_default = codegenNativeComponent("FastImageView
 //#region src/specs/NativeFastImageModule.ts
 var NativeFastImageModule_default = TurboModuleRegistry.get("FastImageModule");
 //#endregion
+//#region src/placeholders.ts
+function isImageName(value) {
+	return !/^[a-z][a-z\d+.-]*:/i.test(value) && !value.startsWith("/");
+}
+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");
+}
+//#endregion
 //#region src/index.tsx
-const resolveDefaultSource = (defaultSource) => {
-	if (!defaultSource) return null;
-	const resolved = Image.resolveAssetSource(defaultSource);
+function withoutPlaceholders(source) {
+	if (!hasSourcePlaceholder(source)) return source;
+	const { thumbhash: _thumbhash, blurDataUri: _blurDataUri, ...rest } = source;
+	return rest;
+}
+function sourcePlaceholder(source) {
+	if (!source || typeof source !== "object") return "";
+	const { thumbhash, blurDataUri } = source;
+	return thumbhash || dataUri(blurDataUri) || "";
+}
+const resolvePlaceholder = (placeholder) => {
+	if (typeof placeholder === "string") {
+		if (isImageName(placeholder)) return Platform.OS === "android" ? placeholder : { uri: placeholder };
+		const uri = dataUri(placeholder);
+		if (!uri) return null;
+		return Platform.OS === "android" ? uri : { uri };
+	}
+	if (!placeholder) return null;
+	const resolved = Image.resolveAssetSource(placeholder);
 	if (!resolved) return null;
 	return Platform.OS === "android" ? resolved.uri : resolved;
 };
@@ -291,7 +320,7 @@ function builtInTransition() {
 	return resolveTransition(Platform.OS === "android", NO_TRANSITION);
 }
 let defaultTransition;
-function FastImageBase({ source, 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");
@@ -299,10 +328,18 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 	const resolvedTintColor = tintColor != null ? tintColor : fromStyle(style, "tintColor");
 	const fit = resolveObjectFit(objectFit, style);
 	const position = objectPositionOrCentered(objectPosition);
-	const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
-	const single = Array.isArray(source) ? source[0] : source;
-	const resolvedSource = sources ? void 0 : Image.resolveAssetSource(single);
-	const resolvedDefaultSource = resolveDefaultSource(defaultSource);
+	const shared = hasSourcePlaceholder(placeholder) ? sourcePlaceholder(placeholder) : "";
+	const { resolvedSource, sources, sourcePlaceholders } = useMemo(() => {
+		const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
+		const single = Array.isArray(source) ? source[0] : source;
+		const placeholders = (sources !== null && sources !== void 0 ? sources : [single]).map((entry) => sourcePlaceholder(entry) || shared);
+		return {
+			resolvedSource: sources ? void 0 : Image.resolveAssetSource(withoutPlaceholders(single)),
+			sources: (sources === null || sources === void 0 ? void 0 : sources.some(hasSourcePlaceholder)) ? sources.map(withoutPlaceholders) : sources,
+			sourcePlaceholders: placeholders.some(Boolean) ? placeholders : void 0
+		};
+	}, [source, shared]);
+	const resolvedPlaceholder = resolvePlaceholder(hasSourcePlaceholder(placeholder) ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
 	return /* @__PURE__ */ React.createElement(FastImageViewNativeComponent_default, {
 		...props,
 		ref: forwardedRef,
@@ -312,7 +349,8 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		...resolveTransition(transition, (_defaultTransition = defaultTransition) !== null && _defaultTransition !== void 0 ? _defaultTransition : builtInTransition()),
 		source: resolvedSource,
 		sources,
-		defaultSource: resolvedDefaultSource,
+		sourcePlaceholders,
+		placeholder: resolvedPlaceholder,
 		onFastImageLoadStart: onLoadStart,
 		onFastImageProgress: onProgress,
 		handledEvents: handledEvents({

package/dist/index.js.flow

@@ -110,6 +110,11 @@ export type PreloadResult = PreloadSuccess | PreloadFailure
 export type PreloadFn = (
     sources: Array<FastImageSource>,
 ) => Promise<Array<PreloadResult>>
+export type SourcePlaceholder = {
+    thumbhash?: string,
+    blurDataUri?: string,
+}
+
 export type FastImageSource = {
     uri?: string,
     headers?: Object,
@@ -118,6 +123,8 @@ export type FastImageSource = {
     cacheKey?: string,
     memoryCache?: boolean,
     diskCache?: boolean,
+    thumbhash?: string,
+    blurDataUri?: string,
     width?: number,
     height?: number,
     scale?: number,
@@ -132,6 +139,8 @@ export type FastImageProps = $ReadOnly<{|
     onProgress?: ?(event: OnProgressEvent) => void,
 
     source?: ?(FastImageSource | Array<FastImageSource> | number),
+    placeholder?: ?(number | string | SourcePlaceholder),
+    // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,
 
     tintColor?: number | string,
@@ -140,6 +149,8 @@ export type FastImageProps = $ReadOnly<{|
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
     imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
+    loading?: ?('lazy' | 'eager'),
+    sizes?: ?string,
     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
@@ -240,17 +240,24 @@ function cssPosition({ x, y }) {
 	return `${axis(x)} ${axis(y)}`;
 }
 //#endregion
+//#region src/placeholders.ts
+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");
+}
+//#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, 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, 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;
 	const label = ariaLabel || accessibilityLabel || void 0;
@@ -259,10 +266,15 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	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 defaultUri = resolveUri(defaultSource);
+	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 tintId = `fast-image-tint-${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);
 	const position = cssPosition(objectPositionOrCentered(objectPosition));
 	const filter = [blurRadius ? `blur(${blurRadius}px)` : "", tintColor ? `url(#${tintId})` : ""].filter(Boolean).join(" ") || void 0;
@@ -280,15 +292,19 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	}, defaultUri && showDefault ? /* @__PURE__ */ React.createElement(Picture, {
 		key: `default ${defaultUri}`,
 		src: defaultUri,
-		fit,
+		loading,
+		priority,
+		fit: blurUri && (fit === "scale-down" || fit === "none") ? "contain" : fit,
 		position,
-		filter,
+		filter: blurUri ? [`url(#${blurId})`, tintColor ? `url(#${tintId})` : ""].filter(Boolean).join(" ") : filter,
 		alt: key ? "" : label !== null && label !== void 0 ? label : ""
 	}) : null, key && src ? /* @__PURE__ */ React.createElement(Picture, {
 		key: several ? "sizes" : key,
 		src,
 		srcSet,
-		lazy: !!several,
+		sizes,
+		loading,
+		priority,
 		fit,
 		position,
 		filter,
@@ -325,7 +341,29 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	}) : null, tintColor ? /* @__PURE__ */ React.createElement(TintFilter, {
 		id: tintId,
 		color: tintColor
-	}) : null);
+	}) : null, blurUri && showDefault ? /* @__PURE__ */ React.createElement(PreviewBlur, { id: blurId }) : null);
+}
+function thumbhashUri(hash) {
+	if (!hash) return void 0;
+	const decode = globalThis[Symbol.for("react-native-fast-image/thumbhash")];
+	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;
+		const own = entry && typeof entry === "object" ? entry : void 0;
+		return (_ref = (own === null || own === void 0 ? void 0 : own.thumbhash) || dataUri(own === null || own === void 0 ? void 0 : own.blurDataUri) ? own : preview) === null || _ref === void 0 ? void 0 : _ref[key];
+	});
+	return values.every((value) => value && value === values[0]) ? values[0] : void 0;
 }
 function resolveUri(source) {
 	let uri;
@@ -373,7 +411,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, fit, position, filter, hidden, alt, onLoad, onError }) {
 	const image = useRef(null);
 	const mounted = useRef(true);
 	const handled = useRef(void 0);
@@ -410,8 +448,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: {
@@ -437,6 +476,20 @@ function TintFilter({ id, color }) {
 		operator: "in"
 	}))));
 }
+function PreviewBlur({ id }) {
+	return /* @__PURE__ */ React.createElement("svg", { style: tintStyle }, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", {
+		id,
+		x: "0",
+		y: "0",
+		width: "1",
+		height: "1",
+		primitiveUnits: "objectBoundingBox",
+		colorInterpolationFilters: "sRGB"
+	}, /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "0.06" }), /* @__PURE__ */ React.createElement("feComponentTransfer", null, /* @__PURE__ */ React.createElement("feFuncA", {
+		type: "table",
+		tableValues: "0 1 1 1 1"
+	})))));
+}
 const tintStyle = {
 	position: "absolute",
 	width: 0,

package/dist/index.web.js.flow

@@ -110,6 +110,11 @@ export type PreloadResult = PreloadSuccess | PreloadFailure
 export type PreloadFn = (
     sources: Array<FastImageSource>,
 ) => Promise<Array<PreloadResult>>
+export type SourcePlaceholder = {
+    thumbhash?: string,
+    blurDataUri?: string,
+}
+
 export type FastImageSource = {
     uri?: string,
     headers?: Object,
@@ -118,6 +123,8 @@ export type FastImageSource = {
     cacheKey?: string,
     memoryCache?: boolean,
     diskCache?: boolean,
+    thumbhash?: string,
+    blurDataUri?: string,
     width?: number,
     height?: number,
     scale?: number,
@@ -132,6 +139,8 @@ export type FastImageProps = $ReadOnly<{|
     onProgress?: ?(event: OnProgressEvent) => void,
 
     source?: ?(FastImageSource | Array<FastImageSource> | number),
+    placeholder?: ?(number | string | SourcePlaceholder),
+    // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,
 
     tintColor?: number | string,
@@ -140,6 +149,8 @@ export type FastImageProps = $ReadOnly<{|
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
     imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
+    loading?: ?('lazy' | 'eager'),
+    sizes?: ?string,
     paused?: ?boolean,
     transition?: ?(boolean | number | Transition),
     downsample?: ?boolean,

package/dist/placeholders.d.ts

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

package/dist/specs/FastImageViewNativeComponent.d.ts

@@ -21,7 +21,8 @@ type LoadEndEvent = Readonly<{
 export interface NativeProps extends ViewProps {
     source?: CodegenTypes.UnsafeMixed;
     sources?: CodegenTypes.UnsafeMixed;
-    defaultSource?: CodegenTypes.UnsafeMixed;
+    placeholder?: CodegenTypes.UnsafeMixed;
+    sourcePlaceholders?: ReadonlyArray<string>;
     objectFit?: CodegenTypes.WithDefault<string, 'cover'>;
     objectPositionX?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.5>;
     objectPositionXOffset?: CodegenTypes.Float;