@depup/react-native-fast-image 8.6.3-depup.0 → 8.13.1-depup.0

package/dist/index.cjs.js

@@ -1,144 +1,180 @@
-'use strict';
-
-var _extends = require('@babel/runtime/helpers/extends');
-var React = require('react');
-var reactNative = require('react-native');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let react = require("react");
+react = __toESM(react);
+let react_native = require("react-native");
+//#region src/index.tsx
 const resizeMode = {
-  contain: 'contain',
-  cover: 'cover',
-  stretch: 'stretch',
-  center: 'center'
+	contain: "contain",
+	cover: "cover",
+	stretch: "stretch",
+	center: "center"
 };
 const priority = {
-  low: 'low',
-  normal: 'normal',
-  high: 'high'
+	low: "low",
+	normal: "normal",
+	high: "high"
 };
 const cacheControl = {
-  // Ignore headers, use uri as cache key, fetch only if not in cache.
-  immutable: 'immutable',
-  // Respect http headers, no aggressive caching.
-  web: 'web',
-  // Only load from cache.
-  cacheOnly: 'cacheOnly'
+	immutable: "immutable",
+	web: "web",
+	cacheOnly: "cacheOnly"
 };
-
-const resolveDefaultSource = defaultSource => {
-  if (!defaultSource) {
-    return null;
-  }
-
-  if (reactNative.Platform.OS === 'android') {
-    // Android receives a URI string, and resolves into a Drawable using RN's methods.
-    const resolved = reactNative.Image.resolveAssetSource(defaultSource);
-
-    if (resolved) {
-      return resolved.uri;
-    }
-
-    return null;
-  } // iOS or other number mapped assets
-  // In iOS the number is passed, and bridged automatically into a UIImage
-
-
-  return defaultSource;
+const resolveDefaultSource = (defaultSource) => {
+	if (!defaultSource) return null;
+	if (react_native.Platform.OS === "android") {
+		const resolved = react_native.Image.resolveAssetSource(defaultSource);
+		if (resolved) return resolved.uri;
+		return null;
+	}
+	return defaultSource;
 };
-
-function FastImageBase({
-  source,
-  defaultSource,
-  tintColor,
-  onLoadStart,
-  onProgress,
-  onLoad,
-  onError,
-  onLoadEnd,
-  style,
-  fallback,
-  children,
-  // eslint-disable-next-line no-shadow
-  resizeMode = 'cover',
-  forwardedRef,
-  ...props
-}) {
-  if (fallback) {
-    const cleanedSource = { ...source
-    };
-    delete cleanedSource.cache;
-    const resolvedSource = reactNative.Image.resolveAssetSource(cleanedSource);
-    return /*#__PURE__*/React__default['default'].createElement(reactNative.View, {
-      style: [styles.imageContainer, style],
-      ref: forwardedRef
-    }, /*#__PURE__*/React__default['default'].createElement(reactNative.Image, _extends__default['default']({}, props, {
-      style: [reactNative.StyleSheet.absoluteFill, {
-        tintColor
-      }],
-      source: resolvedSource,
-      defaultSource: defaultSource,
-      onLoadStart: onLoadStart,
-      onProgress: onProgress,
-      onLoad: onLoad,
-      onError: onError,
-      onLoadEnd: onLoadEnd,
-      resizeMode: resizeMode
-    })), children);
-  }
-
-  const resolvedSource = reactNative.Image.resolveAssetSource(source);
-  const resolvedDefaultSource = resolveDefaultSource(defaultSource);
-  return /*#__PURE__*/React__default['default'].createElement(reactNative.View, {
-    style: [styles.imageContainer, style],
-    ref: forwardedRef
-  }, /*#__PURE__*/React__default['default'].createElement(FastImageView, _extends__default['default']({}, props, {
-    tintColor: tintColor,
-    style: reactNative.StyleSheet.absoluteFill,
-    source: resolvedSource,
-    defaultSource: resolvedDefaultSource,
-    onFastImageLoadStart: onLoadStart,
-    onFastImageProgress: onProgress,
-    onFastImageLoad: onLoad,
-    onFastImageError: onError,
-    onFastImageLoadEnd: onLoadEnd,
-    resizeMode: resizeMode
-  })), children);
+function tintColorFromStyle(style) {
+	if (Array.isArray(style)) {
+		for (let i = style.length - 1; i >= 0; i--) {
+			const found = tintColorFromStyle(style[i]);
+			if (found !== void 0) return found;
+		}
+		return;
+	}
+	if (typeof style === "number") {
+		const flattened = react_native.StyleSheet.flatten(style);
+		return flattened ? flattened.tintColor : void 0;
+	}
+	return style && typeof style === "object" ? style.tintColor : void 0;
+}
+function loopCount(loop) {
+	if (loop === void 0) return -1;
+	if (loop === true) return 0;
+	if (loop === false) return 1;
+	return Number.isFinite(loop) ? Math.max(1, Math.floor(loop)) : 0;
+}
+function withoutCache(source) {
+	const { cache: _cache, ...rest } = source || {};
+	return rest;
 }
-
-const FastImageMemo = /*#__PURE__*/React.memo(FastImageBase);
-const FastImageComponent = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default['default'].createElement(FastImageMemo, _extends__default['default']({
-  forwardedRef: ref
-}, props)));
-FastImageComponent.displayName = 'FastImage';
+function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, fallback, children, resizeMode = "cover", loop, forwardedRef, onLayout, pointerEvents, ...viewProps }) {
+	const { onClick, ...props } = viewProps;
+	const wrapperProps = {
+		onLayout,
+		onClick,
+		pointerEvents
+	};
+	const imageProps = {
+		...props,
+		pointerEvents: pointerEvents === "box-none" ? "none" : void 0
+	};
+	const resolvedTintColor = tintColor != null ? tintColor : tintColorFromStyle(style);
+	if (fallback) {
+		const cleanedSource = typeof source === "number" ? source : withoutCache(source);
+		const resolvedSource = react_native.Image.resolveAssetSource(cleanedSource);
+		return /* @__PURE__ */ react.default.createElement(react_native.View, {
+			style: [styles.imageContainer, style],
+			...wrapperProps,
+			ref: forwardedRef
+		}, /* @__PURE__ */ react.default.createElement(react_native.Image, {
+			...imageProps,
+			style: [styles.fallbackImage, { tintColor: resolvedTintColor }],
+			source: resolvedSource,
+			defaultSource,
+			onLoadStart,
+			onProgress,
+			onLoad,
+			onError,
+			onLoadEnd,
+			resizeMode
+		}), children);
+	}
+	const resolvedSource = react_native.Image.resolveAssetSource(source);
+	const resolvedDefaultSource = resolveDefaultSource(defaultSource);
+	return /* @__PURE__ */ react.default.createElement(react_native.View, {
+		style: [styles.imageContainer, style],
+		...wrapperProps,
+		ref: forwardedRef
+	}, /* @__PURE__ */ react.default.createElement(FastImageView, {
+		...imageProps,
+		tintColor: resolvedTintColor,
+		loopCount: loopCount(loop),
+		style: react_native.StyleSheet.absoluteFill,
+		source: resolvedSource,
+		defaultSource: resolvedDefaultSource,
+		onFastImageLoadStart: onLoadStart,
+		onFastImageProgress: onProgress,
+		onFastImageLoad: onLoad,
+		onFastImageError: onError,
+		onFastImageLoadEnd: onLoadEnd,
+		resizeMode
+	}), children);
+}
+const FastImageMemo = (0, react.memo)(FastImageBase);
+const FastImageComponent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ react.default.createElement(FastImageMemo, {
+	forwardedRef: ref,
+	...props
+}));
+FastImageComponent.displayName = "FastImage";
+const noResult = {
+	ok: false,
+	error: "No result"
+};
 const FastImage = FastImageComponent;
 FastImage.resizeMode = resizeMode;
 FastImage.cacheControl = cacheControl;
 FastImage.priority = priority;
-
-FastImage.preload = sources => reactNative.NativeModules.FastImageView.preload(sources);
-
-FastImage.clearMemoryCache = () => reactNative.NativeModules.FastImageView.clearMemoryCache();
-
-FastImage.clearDiskCache = () => reactNative.NativeModules.FastImageView.clearDiskCache();
-
-const styles = reactNative.StyleSheet.create({
-  imageContainer: {
-    overflow: 'hidden'
-  }
-}); // Types of requireNativeComponent are not correct.
-
-const FastImageView = reactNative.requireNativeComponent('FastImageView', FastImage, {
-  nativeOnly: {
-    onFastImageLoadStart: true,
-    onFastImageProgress: true,
-    onFastImageLoad: true,
-    onFastImageError: true,
-    onFastImageLoadEnd: true
-  }
+FastImage.preload = (sources) => Promise.resolve(react_native.NativeModules.FastImageView.preload(sources.map((s) => s || {}))).then((results) => sources.map((source, i) => {
+	var _results$i;
+	const uri = source ? source.uri : void 0;
+	const result = (_results$i = results === null || results === void 0 ? void 0 : results[i]) !== null && _results$i !== void 0 ? _results$i : noResult;
+	if (!result.ok) return {
+		...result,
+		uri
+	};
+	return typeof uri === "string" ? {
+		...result,
+		uri
+	} : {
+		ok: false,
+		error: "Invalid source: no uri",
+		uri
+	};
+}));
+FastImage.clearMemoryCache = () => react_native.NativeModules.FastImageView.clearMemoryCache();
+FastImage.clearDiskCache = () => react_native.NativeModules.FastImageView.clearDiskCache();
+const styles = react_native.StyleSheet.create({
+	fallbackImage: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		width: "100%",
+		height: "100%"
+	},
+	imageContainer: { overflow: "hidden" }
 });
-
+const FastImageView = (0, react_native.requireNativeComponent)("FastImageView", FastImage, { nativeOnly: {
+	onFastImageLoadStart: true,
+	onFastImageProgress: true,
+	onFastImageLoad: true,
+	onFastImageError: true,
+	onFastImageLoadEnd: true
+} });
+//#endregion
 module.exports = FastImage;

package/dist/index.cjs.js.flow

@@ -7,9 +7,18 @@ 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,
@@ -40,7 +49,24 @@ export type ResizeModes = $Values<ResizeMode>
 export type Priorities = $Values<Priority>
 export type CacheControls = $Values<CacheControl>
 
-export type PreloadFn = (sources: Array<FastImageSource>) => void
+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,
@@ -50,7 +76,7 @@ export type FastImageSource = {
 
 export type FastImageProps = $ReadOnly<{|
     ...ViewProps,
-    onError?: ?() => void,
+    onError?: ?(event: OnErrorEvent) => void,
     onLoad?: ?(event: OnLoadEvent) => void,
     onLoadEnd?: ?() => void,
     onLoadStart?: ?() => void,
@@ -62,6 +88,11 @@ export type FastImageProps = $ReadOnly<{|
     tintColor?: number | string,
     resizeMode?: ?ResizeModes,
     fallback?: ?boolean,
+    recyclingKey?: ?string,
+    loop?: ?(boolean | number),
+    imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
+    paused?: ?boolean,
+    downsample?: ?boolean,
     testID?: ?string,
 |}>
 

package/dist/index.d.ts

@@ -1,25 +1,26 @@
 import React from 'react';
-import { FlexStyle, LayoutChangeEvent, ShadowStyleIOS, StyleProp, TransformsStyle, ImageRequireSource, AccessibilityProps, ViewProps, ColorValue } from 'react-native';
-export declare type ResizeMode = 'contain' | 'cover' | 'stretch' | 'center';
+import { LayoutChangeEvent, StyleProp, ViewStyle, ImageRequireSource, AccessibilityProps, ViewProps } from 'react-native';
+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";
+    readonly contain: 'contain';
+    readonly cover: 'cover';
+    readonly stretch: 'stretch';
+    readonly center: 'center';
 };
-export declare type Priority = 'low' | 'normal' | 'high';
+export type Priority = 'low' | 'normal' | 'high';
 declare const priority: {
-    readonly low: "low";
-    readonly normal: "normal";
-    readonly high: "high";
+    readonly low: 'low';
+    readonly normal: 'normal';
+    readonly high: 'high';
 };
-declare type Cache = 'immutable' | 'web' | 'cacheOnly';
+export type Cache = 'immutable' | 'web' | 'cacheOnly';
 declare const cacheControl: {
-    readonly immutable: "immutable";
-    readonly web: "web";
-    readonly cacheOnly: "cacheOnly";
+    readonly immutable: 'immutable';
+    readonly web: 'web';
+    readonly cacheOnly: 'cacheOnly';
 };
-export declare type Source = {
+export type Source = {
     uri?: string;
     headers?: {
         [key: string]: string;
@@ -31,6 +32,12 @@ export interface OnLoadEvent {
     nativeEvent: {
         width: number;
         height: number;
+        target?: number;
+    };
+}
+export interface OnErrorEvent {
+    nativeEvent: {
+        error: string;
     };
 }
 export interface OnProgressEvent {
@@ -39,17 +46,18 @@ export interface OnProgressEvent {
         total: number;
     };
 }
-export interface ImageStyle extends FlexStyle, TransformsStyle, ShadowStyleIOS {
+export interface ImageStyle extends ViewStyle {
     backfaceVisibility?: 'visible' | 'hidden';
     borderBottomLeftRadius?: number;
     borderBottomRightRadius?: number;
-    backgroundColor?: string;
-    borderColor?: string;
+    backgroundColor?: ColorValue;
+    borderColor?: ColorValue;
     borderWidth?: number;
     borderRadius?: number;
     borderTopLeftRadius?: number;
     borderTopRightRadius?: number;
-    overlayColor?: string;
+    overlayColor?: ColorValue;
+    tintColor?: ColorValue;
     opacity?: number;
 }
 export interface FastImageProps extends AccessibilityProps, ViewProps {
@@ -57,10 +65,46 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
     defaultSource?: ImageRequireSource;
     resizeMode?: ResizeMode;
     fallback?: boolean;
+    /**
+     * When `source` changes, the image showing stays until the new one has
+     * loaded. For views that get reused for other content, such as rows in
+     * FlashList or recyclerlistview, set this to something that identifies the
+     * content (e.g. the item's id): when it changes, the image is cleared
+     * right away instead, so a reused row doesn't show the previous row's
+     * image. Unlike changing `key`, the view is kept.
+     */
+    recyclingKey?: string | null;
+    /**
+     * How many times an animated image (GIF, animated WebP) plays: the file's
+     * own loop count by default, `true` to loop forever, `false` to play once,
+     * or a number of times. Changing it restarts the animation.
+     */
+    loop?: boolean | number;
+    /**
+     * How the image is filtered when it's drawn smaller or larger than its
+     * size: `'auto'` (default, the platform's usual filtering), `'smooth'`
+     * (iOS only: keeps a large image drawn much smaller from looking jagged
+     * or noisy; uses more memory, see the README) or `'pixelated'` (sharp
+     * pixels, e.g. for pixel art).
+     */
+    imageRendering?: 'auto' | 'smooth' | 'pixelated';
+    /**
+     * Pauses an animated image (GIF, and animated WebP on iOS) on the frame
+     * it's showing; `false` plays it again from there. Each image animates on
+     * its own, so pausing one doesn't pause others showing the same file.
+     */
+    paused?: boolean;
+    /**
+     * 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
+     * you can't get at the right size (if you can, resize them on your server
+     * or with an image CDN instead). See the README.
+     */
+    downsample?: boolean;
     onLoadStart?(): void;
     onProgress?(event: OnProgressEvent): void;
     onLoad?(event: OnLoadEvent): void;
-    onError?(): void;
+    onError?(event: OnErrorEvent): void;
     onLoadEnd?(): void;
     /**
      * onLayout function
@@ -90,14 +134,25 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      */
     children?: React.ReactNode;
 }
+export interface PreloadSuccess {
+    uri: string;
+    ok: true;
+    width: number;
+    height: number;
+}
+export interface PreloadFailure {
+    uri?: string;
+    ok: false;
+    error: string;
+}
+export type PreloadResult = PreloadSuccess | PreloadFailure;
 export interface FastImageStaticProperties {
     resizeMode: typeof resizeMode;
     priority: typeof priority;
     cacheControl: typeof cacheControl;
-    preload: (sources: Source[]) => void;
+    preload: (sources: Source[]) => Promise<PreloadResult[]>;
     clearMemoryCache: () => Promise<void>;
     clearDiskCache: () => Promise<void>;
 }
 declare const FastImage: React.ComponentType<FastImageProps> & FastImageStaticProperties;
 export default FastImage;
-//# sourceMappingURL=index.d.ts.map