react-native-fast-image 8.21.0 → 8.23.0

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

@@ -0,0 +1,154 @@
+// @flow
+
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'
+import type { SyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes'
+
+export type OnLoadEvent = SyntheticEvent<
+    $ReadOnly<{
+        width: number,
+        height: number,
+        // The view's React tag. Missing on Android with the legacy architecture.
+        // TODO: make it required once the New Architecture is the minimum.
+        target?: number,
+    }>,
+>
+
+export type OnErrorEvent = SyntheticEvent<
+    $ReadOnly<{|
+        error: string,
+    |}>,
+>
+
+export type OnProgressEvent = SyntheticEvent<
+    $ReadOnly<{|
+        loaded: number,
+        total: number,
+        // loaded / total, from 0 to 1.
+        progress: number,
+    |}>,
+>
+
+export type ResizeMode = $ReadOnly<{|
+    contain: 'contain',
+    cover: 'cover',
+    stretch: 'stretch',
+    center: 'center',
+|}>
+
+export type Priority = $ReadOnly<{|
+    low: 'low',
+    normal: 'normal',
+    high: 'high',
+|}>
+
+export type CacheControl = $ReadOnly<{|
+    immutable: 'immutable',
+    web: 'web',
+    cacheOnly: 'cacheOnly',
+|}>
+
+export type ResizeModes = $Values<ResizeMode>
+export type Priorities = $Values<Priority>
+export type CacheControls = $Values<CacheControl>
+
+export type LoadResult =
+    | {| ok: true, width: number, height: number |}
+    | {| ok: false, error: string |}
+
+export type CacheLimits = {|
+    maxDiskSize?: ?number,
+    maxDiskAge?: ?number,
+    maxMemorySize?: ?number,
+|}
+
+export type CacheState = {|
+    maxDiskSize?: number,
+    maxDiskAge?: number,
+    maxMemorySize?: number,
+    diskSize?: number,
+|}
+
+export type CachePathResult =
+    | {| ok: true, path: string |}
+    | {| ok: false, error: string |}
+
+export type Transition = $ReadOnly<{|
+    duration?: ?number,
+    betweenImages?: ?boolean,
+    skipOnCacheHit?: ?('none' | 'memory' | 'all'),
+|}>
+
+export type PreloadSuccess = {|
+    uri: string,
+    ok: true,
+    width: number,
+    height: number,
+|}
+
+export type PreloadFailure = {|
+    uri?: string,
+    ok: false,
+    error: string,
+|}
+
+export type PreloadResult = PreloadSuccess | PreloadFailure
+
+export type PreloadFn = (
+    sources: Array<FastImageSource>,
+) => Promise<Array<PreloadResult>>
+export type FastImageSource = {
+    uri?: string,
+    headers?: Object,
+    priority?: Priorities,
+    cache?: CacheControls,
+    cacheKey?: string,
+    memoryCache?: boolean,
+}
+
+export type FastImageProps = $ReadOnly<{|
+    ...ViewProps,
+    onError?: ?(event: OnErrorEvent) => void,
+    onLoad?: ?(event: OnLoadEvent) => void,
+    onLoadEnd?: ?(result: LoadResult) => void,
+    onLoadStart?: ?() => void,
+    onProgress?: ?(event: OnProgressEvent) => void,
+
+    source?: ?(FastImageSource | number),
+    defaultSource?: ?number,
+
+    tintColor?: number | string,
+    resizeMode?: ?ResizeModes,
+    fallback?: ?boolean,
+    recyclingKey?: ?string,
+    loop?: ?(boolean | number),
+    imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
+    paused?: ?boolean,
+    transition?: ?(boolean | number | Transition),
+    downsample?: ?boolean,
+    blurRadius?: ?number,
+    testID?: ?string,
+|}>
+
+export type FastImageBackgroundProps = $ReadOnly<{|
+    ...FastImageProps,
+    imageStyle?: $PropertyType<ViewProps, 'style'>,
+    imageRef?: React$Ref<any>,
+    children?: React$Node,
+|}>
+
+declare export var FastImageBackground: React$ComponentType<FastImageBackgroundProps>
+
+declare export default class FastImage extends React$Component<FastImageProps> {
+    static resizeMode: ResizeMode;
+    static priority: Priority;
+    static cacheControl: CacheControl;
+    static preload: PreloadFn;
+    static clearMemoryCache: () => Promise<void>;
+    static clearDiskCache: () => Promise<void>;
+    static getCachePath: (source: FastImageSource) => Promise<CachePathResult>;
+    static configureCache: (limits?: CacheLimits) => Promise<CacheState>;
+    static writeToCache: (
+        source: FastImageSource,
+        file: string,
+    ) => Promise<CachePathResult>;
+}

package/dist/index.d.ts

@@ -1,25 +1,10 @@
 import React from 'react';
 import { LayoutChangeEvent, StyleProp, ViewStyle, ImageRequireSource, AccessibilityProps, ViewProps } from 'react-native';
+import { cacheControl, priority, resizeMode } from './constants';
 type ColorValue = NonNullable<ViewStyle['backgroundColor']>;
 export type ResizeMode = 'contain' | 'cover' | 'stretch' | 'center';
-declare const resizeMode: {
-    readonly contain: 'contain';
-    readonly cover: 'cover';
-    readonly stretch: 'stretch';
-    readonly center: 'center';
-};
 export type Priority = 'low' | 'normal' | 'high';
-declare const priority: {
-    readonly low: 'low';
-    readonly normal: 'normal';
-    readonly high: 'high';
-};
 export type Cache = 'immutable' | 'web' | 'cacheOnly';
-declare const cacheControl: {
-    readonly immutable: 'immutable';
-    readonly web: 'web';
-    readonly cacheOnly: 'cacheOnly';
-};
 export type Source = {
     uri?: string;
     headers?: {
@@ -42,6 +27,35 @@ export type Source = {
      */
     memoryCache?: boolean;
 };
+export type Transition = {
+    /**
+     * How long the fade takes, in milliseconds; 0 means no fade. Defaults to
+     * the platform's usual length: 300 ms on Android, 250 ms on iOS.
+     */
+    duration?: number;
+    /**
+     * 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
+     * replaces the image showing at once, once it has loaded.
+     * @default false
+     */
+    betweenImages?: boolean;
+    /**
+     * Skips the fade for an image from a cache, so images already loaded
+     * show at once, e.g. in a list scrolled back up or a reused row.
+     *
+     * - `'memory'`: skips it for images from the memory cache.
+     * - `'all'`: skips it for images from the memory or disk cache too, so
+     *   images that download fade in, and local files and bundled images
+     *   usually only the first time (the disk cache usually keeps them too).
+     * - `'none'`: always fades.
+     *
+     * Downloads, local files and bundled images (`require()`) fade in.
+     * @default 'memory'
+     */
+    skipOnCacheHit?: 'none' | 'memory' | 'all' | null;
+};
 export interface OnLoadEvent {
     nativeEvent: {
         width: number;
@@ -135,6 +149,13 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * its own, so pausing one doesn't pause others showing the same file.
      */
     paused?: boolean;
+    /**
+     * Fades the image in when it loads: `true` for the platform's usual fade,
+     * a duration in milliseconds, or a `Transition` (default: no fade). An
+     * image fades in when it appears over nothing (see `betweenImages`),
+     * unless it's from the memory cache (see `skipOnCacheHit`).
+     */
+    transition?: boolean | number | Transition | null;
     /**
      * iOS only. Decodes a large image at about the size it's shown at, so it
      * takes much less memory. For images much larger than their views that

package/dist/index.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, memo, useRef } from "react";
 import { Image, NativeModules, Platform, StyleSheet, View, requireNativeComponent } from "react-native";
-//#region src/index.tsx
+//#region src/constants.ts
 const resizeMode = {
 	contain: "contain",
 	cover: "cover",
@@ -17,6 +17,8 @@ const cacheControl = {
 	web: "web",
 	cacheOnly: "cacheOnly"
 };
+//#endregion
+//#region src/index.tsx
 const resolveDefaultSource = (defaultSource) => {
 	if (!defaultSource) return null;
 	if (Platform.OS === "android") {
@@ -64,11 +66,24 @@ function withProgress(onProgress) {
 		onProgress(event);
 	});
 }
+const DEFAULT_FADE_MS = Platform.OS === "ios" ? 250 : 300;
+function transitionProps(transition) {
+	var _transition$duration;
+	const { duration, betweenImages, skipOnCacheHit } = typeof transition === "number" ? { duration: transition } : typeof transition === "object" && transition ? {
+		...transition,
+		duration: (_transition$duration = transition.duration) !== null && _transition$duration !== void 0 ? _transition$duration : DEFAULT_FADE_MS
+	} : { duration: transition ? DEFAULT_FADE_MS : 0 };
+	return {
+		transitionDuration: typeof duration === "number" && duration > 0 ? duration : 0,
+		transitionBetweenImages: !!betweenImages,
+		transitionSkipOnCacheHit: skipOnCacheHit || "memory"
+	};
+}
 function withoutCache(source) {
 	const { cache: _cache, ...rest } = source || {};
 	return rest;
 }
-function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, fallback, children, resizeMode = "cover", loop, forwardedRef, onLayout, pointerEvents, ...viewProps }) {
+function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, fallback, children, resizeMode = "cover", loop, transition, forwardedRef, onLayout, pointerEvents, ...viewProps }) {
 	const { onClick, ...props } = viewProps;
 	const fallbackResult = useRef(void 0);
 	const wrapperProps = {
@@ -131,6 +146,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		...imageProps,
 		tintColor: resolvedTintColor,
 		loopCount: loopCount(loop),
+		...transitionProps(transition),
 		style: StyleSheet.absoluteFill,
 		source: resolvedSource,
 		defaultSource: resolvedDefaultSource,

package/dist/index.js.flow

@@ -72,6 +72,12 @@ export type CachePathResult =
     | {| ok: true, path: string |}
     | {| ok: false, error: string |}
 
+export type Transition = $ReadOnly<{|
+    duration?: ?number,
+    betweenImages?: ?boolean,
+    skipOnCacheHit?: ?('none' | 'memory' | 'all'),
+|}>
+
 export type PreloadSuccess = {|
     uri: string,
     ok: true,
@@ -117,6 +123,7 @@ export type FastImageProps = $ReadOnly<{|
     loop?: ?(boolean | number),
     imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
     paused?: ?boolean,
+    transition?: ?(boolean | number | Transition),
     downsample?: ?boolean,
     blurRadius?: ?number,
     testID?: ?string,

package/dist/index.web.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { FastImageBackgroundProps, FastImageProps, FastImageStaticProperties } from './index';
+export type * from './index';
+declare const FastImage: React.ComponentType<FastImageProps> & FastImageStaticProperties;
+export declare const FastImageBackground: React.ComponentType<FastImageBackgroundProps>;
+export default FastImage;

package/dist/index.web.js

@@ -0,0 +1,165 @@
+import React, { forwardRef, memo, useRef } from "react";
+import { Image, StyleSheet, View } from "react-native";
+//#region src/constants.ts
+const resizeMode = {
+	contain: "contain",
+	cover: "cover",
+	stretch: "stretch",
+	center: "center"
+};
+const priority = {
+	low: "low",
+	normal: "normal",
+	high: "high"
+};
+const cacheControl = {
+	immutable: "immutable",
+	web: "web",
+	cacheOnly: "cacheOnly"
+};
+//#endregion
+//#region src/index.web.tsx
+const notSupported = {
+	ok: false,
+	error: "Not supported on the web"
+};
+function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadStart, onLoad, onError, onLoadEnd, style, children, resizeMode: mode = "cover", forwardedRef, onLayout, pointerEvents, fallback: _fallback, recyclingKey: _recyclingKey, loop: _loop, imageRendering: _imageRendering, paused: _paused, transition: _transition, downsample: _downsample, onProgress: _onProgress, ...props }) {
+	const result = useRef(void 0);
+	const sent = useRef(Promise.resolve());
+	const image = useRef(null);
+	const uri = typeof source === "object" && source ? source.uri : void 0;
+	const webSource = typeof source === "number" ? source : uri ? { uri } : void 0;
+	return /* @__PURE__ */ React.createElement(View, {
+		style: [styles.container, style],
+		onLayout,
+		pointerEvents,
+		ref: forwardedRef
+	}, /* @__PURE__ */ React.createElement(Image, {
+		...props,
+		style: styles.image,
+		source: webSource,
+		defaultSource,
+		resizeMode: mode,
+		tintColor,
+		blurRadius,
+		ref: image,
+		onLoadStart,
+		onLoad: (event) => {
+			var _event$nativeEvent;
+			sent.current = loadedSize(event === null || event === void 0 || (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.target, image.current, uri).then(({ width, height }) => {
+				result.current = {
+					ok: true,
+					width,
+					height
+				};
+				onLoad === null || onLoad === void 0 || onLoad({ nativeEvent: {
+					width,
+					height
+				} });
+			});
+		},
+		onError: (event) => {
+			var _event$nativeEvent$er, _event$nativeEvent2;
+			const error = String((_event$nativeEvent$er = event === null || event === void 0 || (_event$nativeEvent2 = event.nativeEvent) === null || _event$nativeEvent2 === void 0 ? void 0 : _event$nativeEvent2.error) !== null && _event$nativeEvent$er !== void 0 ? _event$nativeEvent$er : "Failed to load the image");
+			result.current = {
+				ok: false,
+				error
+			};
+			sent.current = Promise.resolve();
+			onError === null || onError === void 0 || onError({ nativeEvent: { error } });
+		},
+		onLoadEnd: () => {
+			sent.current.then(() => {
+				var _result$current;
+				onLoadEnd === null || onLoadEnd === void 0 || onLoadEnd((_result$current = result.current) !== null && _result$current !== void 0 ? _result$current : {
+					ok: false,
+					error: "Failed to load the image"
+				});
+				result.current = void 0;
+			});
+		}
+	}), children);
+}
+const FastImageMemo = memo(FastImageBase);
+const FastImageComponent = forwardRef((props, ref) => /* @__PURE__ */ React.createElement(FastImageMemo, {
+	forwardedRef: ref,
+	...props
+}));
+FastImageComponent.displayName = "FastImage";
+async function loadedSize(loaded, view, uri) {
+	var _view$querySelector;
+	if (loaded === null || loaded === void 0 ? void 0 : loaded.naturalWidth) return {
+		width: loaded.naturalWidth,
+		height: loaded.naturalHeight
+	};
+	await new Promise((resolve) => setTimeout(resolve, 0));
+	const shown = view === null || view === void 0 || (_view$querySelector = view.querySelector) === null || _view$querySelector === void 0 ? void 0 : _view$querySelector.call(view, "img");
+	if (shown === null || shown === void 0 ? void 0 : shown.naturalWidth) return {
+		width: shown.naturalWidth,
+		height: shown.naturalHeight
+	};
+	const src = uri !== null && uri !== void 0 ? uri : shown === null || shown === void 0 ? void 0 : shown.src;
+	return src ? getSize(src) : {
+		width: 0,
+		height: 0
+	};
+}
+function getSize(uri) {
+	return new Promise((resolve) => {
+		Image.getSize(uri, (width, height) => resolve({
+			width,
+			height
+		}), () => resolve({
+			width: 0,
+			height: 0
+		}));
+	});
+}
+const FastImage = FastImageComponent;
+FastImage.resizeMode = resizeMode;
+FastImage.cacheControl = cacheControl;
+FastImage.priority = priority;
+FastImage.preload = (sources) => Promise.all(sources.map((source) => {
+	const uri = source ? source.uri : void 0;
+	if (typeof uri !== "string" || !uri) return Promise.resolve({
+		ok: false,
+		error: "Invalid source: no uri",
+		uri
+	});
+	return Image.prefetch(uri).then(() => getSize(uri).then((size) => ({
+		ok: true,
+		uri,
+		...size
+	})), () => ({
+		ok: false,
+		error: "Failed to load the image",
+		uri
+	}));
+}));
+FastImage.clearMemoryCache = () => Promise.resolve();
+FastImage.clearDiskCache = () => Promise.resolve();
+FastImage.configureCache = () => Promise.resolve({});
+FastImage.writeToCache = () => Promise.resolve(notSupported);
+FastImage.getCachePath = () => Promise.resolve(notSupported);
+const styles = StyleSheet.create({
+	container: { overflow: "hidden" },
+	image: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		width: "100%",
+		height: "100%"
+	}
+});
+const FastImageWithRef = FastImageComponent;
+const FastImageBackground = forwardRef(({ style, imageStyle, imageRef, children, ...props }, ref) => /* @__PURE__ */ React.createElement(View, {
+	style,
+	ref
+}, /* @__PURE__ */ React.createElement(FastImageWithRef, {
+	...props,
+	style: [StyleSheet.absoluteFill, imageStyle],
+	ref: imageRef
+}), children));
+FastImageBackground.displayName = "FastImageBackground";
+//#endregion
+export { FastImageBackground, FastImage as default };

package/dist/index.web.js.flow

@@ -0,0 +1,154 @@
+// @flow
+
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'
+import type { SyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes'
+
+export type OnLoadEvent = SyntheticEvent<
+    $ReadOnly<{
+        width: number,
+        height: number,
+        // The view's React tag. Missing on Android with the legacy architecture.
+        // TODO: make it required once the New Architecture is the minimum.
+        target?: number,
+    }>,
+>
+
+export type OnErrorEvent = SyntheticEvent<
+    $ReadOnly<{|
+        error: string,
+    |}>,
+>
+
+export type OnProgressEvent = SyntheticEvent<
+    $ReadOnly<{|
+        loaded: number,
+        total: number,
+        // loaded / total, from 0 to 1.
+        progress: number,
+    |}>,
+>
+
+export type ResizeMode = $ReadOnly<{|
+    contain: 'contain',
+    cover: 'cover',
+    stretch: 'stretch',
+    center: 'center',
+|}>
+
+export type Priority = $ReadOnly<{|
+    low: 'low',
+    normal: 'normal',
+    high: 'high',
+|}>
+
+export type CacheControl = $ReadOnly<{|
+    immutable: 'immutable',
+    web: 'web',
+    cacheOnly: 'cacheOnly',
+|}>
+
+export type ResizeModes = $Values<ResizeMode>
+export type Priorities = $Values<Priority>
+export type CacheControls = $Values<CacheControl>
+
+export type LoadResult =
+    | {| ok: true, width: number, height: number |}
+    | {| ok: false, error: string |}
+
+export type CacheLimits = {|
+    maxDiskSize?: ?number,
+    maxDiskAge?: ?number,
+    maxMemorySize?: ?number,
+|}
+
+export type CacheState = {|
+    maxDiskSize?: number,
+    maxDiskAge?: number,
+    maxMemorySize?: number,
+    diskSize?: number,
+|}
+
+export type CachePathResult =
+    | {| ok: true, path: string |}
+    | {| ok: false, error: string |}
+
+export type Transition = $ReadOnly<{|
+    duration?: ?number,
+    betweenImages?: ?boolean,
+    skipOnCacheHit?: ?('none' | 'memory' | 'all'),
+|}>
+
+export type PreloadSuccess = {|
+    uri: string,
+    ok: true,
+    width: number,
+    height: number,
+|}
+
+export type PreloadFailure = {|
+    uri?: string,
+    ok: false,
+    error: string,
+|}
+
+export type PreloadResult = PreloadSuccess | PreloadFailure
+
+export type PreloadFn = (
+    sources: Array<FastImageSource>,
+) => Promise<Array<PreloadResult>>
+export type FastImageSource = {
+    uri?: string,
+    headers?: Object,
+    priority?: Priorities,
+    cache?: CacheControls,
+    cacheKey?: string,
+    memoryCache?: boolean,
+}
+
+export type FastImageProps = $ReadOnly<{|
+    ...ViewProps,
+    onError?: ?(event: OnErrorEvent) => void,
+    onLoad?: ?(event: OnLoadEvent) => void,
+    onLoadEnd?: ?(result: LoadResult) => void,
+    onLoadStart?: ?() => void,
+    onProgress?: ?(event: OnProgressEvent) => void,
+
+    source?: ?(FastImageSource | number),
+    defaultSource?: ?number,
+
+    tintColor?: number | string,
+    resizeMode?: ?ResizeModes,
+    fallback?: ?boolean,
+    recyclingKey?: ?string,
+    loop?: ?(boolean | number),
+    imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
+    paused?: ?boolean,
+    transition?: ?(boolean | number | Transition),
+    downsample?: ?boolean,
+    blurRadius?: ?number,
+    testID?: ?string,
+|}>
+
+export type FastImageBackgroundProps = $ReadOnly<{|
+    ...FastImageProps,
+    imageStyle?: $PropertyType<ViewProps, 'style'>,
+    imageRef?: React$Ref<any>,
+    children?: React$Node,
+|}>
+
+declare export var FastImageBackground: React$ComponentType<FastImageBackgroundProps>
+
+declare export default class FastImage extends React$Component<FastImageProps> {
+    static resizeMode: ResizeMode;
+    static priority: Priority;
+    static cacheControl: CacheControl;
+    static preload: PreloadFn;
+    static clearMemoryCache: () => Promise<void>;
+    static clearDiskCache: () => Promise<void>;
+    static getCachePath: (source: FastImageSource) => Promise<CachePathResult>;
+    static configureCache: (limits?: CacheLimits) => Promise<CacheState>;
+    static writeToCache: (
+        source: FastImageSource,
+        file: string,
+    ) => Promise<CachePathResult>;
+}

package/ios/FastImage/FFFastImageView.h

@@ -30,6 +30,12 @@
 @property (nonatomic, copy) NSString *imageRendering;
 // Pauses animated images on the frame they're showing.
 @property (nonatomic, assign) BOOL paused;
+// The `transition` prop: how long a loaded image takes to fade in, in
+// milliseconds (0 for no fade), whether it also fades over a loaded image
+// (a new source), and which cache hits show at once (none, memory or all).
+@property (nonatomic, assign) double transitionDuration;
+@property (nonatomic, assign) BOOL transitionBetweenImages;
+@property (nonatomic, copy) NSString *transitionSkipOnCacheHit;
 // Decodes images at about the view's size instead of at full size.
 @property (nonatomic, assign) BOOL downsample;
 // Blurs the loaded image by this radius, in points (0 is no blur).