react-native-fast-image 8.21.0 → 8.23.0

package/README.md

@@ -212,6 +212,27 @@ Pauses an animated image (GIF, and animated WebP on iOS) on the frame it's showi
 
 ---
 
+### `transition?: boolean | number | Transition`
+
+Fades the image in when it loads. Off by default. `true` uses the platform's usual fade, a number is the duration in milliseconds, or pass an object:
+
+- `duration`: milliseconds; 0 is no fade. Defaults to the platform's usual length: 300 ms on Android, 250 ms on iOS.
+- `betweenImages` (default `false`): also fade between images. By default an image fades in when it appears over nothing (or over `defaultSource`), and a new `source` replaces the image that's showing at once, once it has loaded. With `true`, the new image cross-dissolves from the one showing (for a gallery or an avatar that changes, say).
+- `skipOnCacheHit`: which images show at once, without the fade:
+    - `'memory'` (default): images from the memory cache, so a list scrolled back up shows images it already loaded at once. Images from the disk cache fade in.
+    - `'all'`: images from the memory or disk cache: images that download fade in, and local files and bundled images usually only the first time they load (the disk cache usually keeps them too).
+    - `'none'`: every image fades in.
+
+Downloads, local files (`file://`, `content://`) and bundled images (`require()`) fade in. In lists that reuse views (e.g. FlashList), set `recyclingKey`, so a reused view starts empty and its image fades in, instead of showing the previous item's image until it loads.
+
+```jsx
+<FastImage source={{ uri }} transition />
+<FastImage source={{ uri }} transition={500} />
+<FastImage source={{ uri }} transition={{ betweenImages: true, skipOnCacheHit: 'none' }} />
+```
+
+---
+
 ### `downsample?: boolean`
 
 iOS only. Decodes a large image at about the size it's shown at, instead of at full size, so it takes much less memory.
@@ -465,6 +486,16 @@ On Android, if your app has its own `AppGlideModule` (see [Are you using Glide a
 
 Images with `cache: 'web'` are kept in their own HTTP cache instead, up to 50 MB on each platform, which these limits don't change.
 
+## Web
+
+With [react-native-web](https://necolas.github.io/react-native-web/), FastImage shows images with the web's `Image`. 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`, or a `require()`d image), `defaultSource`, `resizeMode`, `tintColor`, `blurRadius`, `style`, children, `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`, `recyclingKey`, `loop`, `imageRendering`, `paused`, `transition`, `downsample`, `fallback` and `onProgress`.
+- `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' }`.
+
 ## Troubleshooting
 
 If you have any problems using this library try the steps in [troubleshooting](docs/troubleshooting.md) and see if they fix it.

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

@@ -105,6 +105,21 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
         view.setBlurRadius(PixelUtil.toPixelFromDIP(blurRadius));
     }
 
+    @ReactProp(name = "transitionDuration")
+    public void setTransitionDuration(FastImageViewWithUrl view, int transitionDuration) {
+        view.setTransitionDuration(transitionDuration);
+    }
+
+    @ReactProp(name = "transitionBetweenImages")
+    public void setTransitionBetweenImages(FastImageViewWithUrl view, boolean betweenImages) {
+        view.setTransitionBetweenImages(betweenImages);
+    }
+
+    @ReactProp(name = "transitionSkipOnCacheHit")
+    public void setTransitionSkipOnCacheHit(FastImageViewWithUrl view, @Nullable String skipOnCacheHit) {
+        view.setTransitionSkipOnCacheHit(skipOnCacheHit);
+    }
+
     @ReactProp(name = "paused")
     public void setPaused(FastImageViewWithUrl view, boolean paused) {
         view.setPaused(paused);

package/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java

@@ -2,9 +2,16 @@ package com.dylanvann.fastimage;
 
 import static com.dylanvann.fastimage.FastImageRequestListener.REACT_ON_ERROR_EVENT;
 
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.ValueAnimator;
 import android.annotation.SuppressLint;
 import android.content.Context;
 import android.graphics.Bitmap;
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.graphics.PorterDuff;
+import android.graphics.PorterDuffXfermode;
 import android.graphics.drawable.BitmapDrawable;
 import android.graphics.drawable.Drawable;
 
@@ -13,15 +20,20 @@ import androidx.annotation.Nullable;
 import androidx.appcompat.widget.AppCompatImageView;
 import androidx.core.view.ViewCompat;
 
+import com.bumptech.glide.GenericTransitionOptions;
 import com.bumptech.glide.RequestBuilder;
 import com.bumptech.glide.RequestManager;
+import com.bumptech.glide.load.DataSource;
 import com.bumptech.glide.load.model.GlideUrl;
 import com.bumptech.glide.load.resource.bitmap.DownsampleStrategy;
+import com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions;
 import com.bumptech.glide.load.resource.gif.GifDrawable;
 import com.bumptech.glide.request.RequestOptions;
 import com.bumptech.glide.request.target.DrawableImageViewTarget;
 import com.bumptech.glide.request.target.SizeReadyCallback;
+import com.bumptech.glide.request.transition.NoTransition;
 import com.bumptech.glide.request.transition.Transition;
+import com.bumptech.glide.request.transition.TransitionFactory;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
@@ -88,6 +100,168 @@ class FastImageViewWithUrl extends AppCompatImageView {
     // Pauses GIFs on the frame they're showing (the view's own animation).
     private boolean mPaused = false;
 
+    // The `transition` prop (from the next load): 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).
+    private int mTransitionDuration = 0;
+    private boolean mTransitionBetweenImages = false;
+    private String mTransitionSkipOnCacheHit = "memory";
+
+    public void setTransitionDuration(int transitionDuration) {
+        mTransitionDuration = Math.max(0, transitionDuration);
+    }
+
+    public void setTransitionBetweenImages(boolean betweenImages) {
+        mTransitionBetweenImages = betweenImages;
+    }
+
+    public void setTransitionSkipOnCacheHit(@Nullable String skipOnCacheHit) {
+        mTransitionSkipOnCacheHit = skipOnCacheHit == null ? "memory" : skipOnCacheHit;
+    }
+
+    // Fades a loaded image in, unless it's from a cache that skipOnCacheHit
+    // skips, as Glide's and Coil's cross-fades and Fresco decide: from the
+    // memory cache it shows at once (by default), and from the disk cache
+    // too with 'all'. Downloads, local files and bundled images fade.
+    private final class FadeFactory implements TransitionFactory<Drawable> {
+        private final int duration;
+        private final String skipOnCacheHit;
+
+        FadeFactory(int duration, String skipOnCacheHit) {
+            this.duration = duration;
+            this.skipOnCacheHit = skipOnCacheHit;
+        }
+
+        @Override
+        public Transition<Drawable> build(DataSource dataSource, boolean isFirstResource) {
+            if (skips(dataSource)) return NoTransition.get();
+            return new Transition<Drawable>() {
+                @Override
+                public boolean transition(Drawable current, ViewAdapter adapter) {
+                    startFade(duration);
+                    // The target shows the image as usual.
+                    return false;
+                }
+            };
+        }
+
+        private boolean skips(DataSource dataSource) {
+            if (skipOnCacheHit.equals("none")) return false;
+            if (dataSource == DataSource.MEMORY_CACHE) return true;
+            // Glide also keeps a local file's or bundled image's decoded
+            // image in its disk cache (at the size it was decoded at, and not
+            // for GIFs), so with 'all' they usually only fade the first time.
+            boolean disk = dataSource == DataSource.DATA_DISK_CACHE || dataSource == DataSource.RESOURCE_DISK_CACHE;
+            return disk && skipOnCacheHit.equals("all");
+        }
+    }
+
+    // A fade in progress: what the view showed (null if nothing), drawn
+    // fading out while the view's image fades in, as a cross-dissolve on iOS.
+    // Drawn here rather than with Glide's DrawableCrossFadeTransition, whose
+    // TransitionDrawable stretches both images to one size and stays in the
+    // view after the fade, still drawing (and animating) the previous image.
+    @Nullable
+    private ValueAnimator mFade;
+    @Nullable
+    private Bitmap mFadeFrom;
+    private float mFadeProgress = 1f;
+    private final Paint mFadeFromPaint = new Paint(Paint.FILTER_BITMAP_FLAG);
+    private final Paint mFadeInPaint = new Paint();
+
+    {
+        // The two add up to a cross-dissolve: from * (1 - t) + image * t.
+        mFadeInPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.ADD));
+    }
+
+    private void startFade(int duration) {
+        int width = getWidth();
+        int height = getHeight();
+        if (width <= 0 || height <= 0) return;
+        // What the view shows now, including a fade in progress.
+        Bitmap from = null;
+        if (getDrawable() != null) {
+            try {
+                from = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
+                onDraw(new Canvas(from));
+            } catch (OutOfMemoryError | RuntimeException e) {
+                // Out of memory, or a hardware bitmap (Android 8+; an app's
+                // Glide module can enable them), which a software canvas
+                // can't draw: fade in over nothing instead.
+                if (from != null) from.recycle();
+                from = null;
+            }
+        }
+        endFade();
+        mFadeFrom = from;
+        mFadeProgress = 0f;
+        final ValueAnimator fade = ValueAnimator.ofFloat(0f, 1f);
+        fade.setDuration(duration);
+        fade.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
+            @Override
+            public void onAnimationUpdate(ValueAnimator animation) {
+                mFadeProgress = (float) animation.getAnimatedValue();
+                invalidate();
+            }
+        });
+        fade.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationEnd(Animator animation) {
+                if (mFade == fade) endFade();
+            }
+        });
+        mFade = fade;
+        fade.start();
+    }
+
+    // Shows the image on its own (the fade ends, another starts, or the view
+    // is detached).
+    private void endFade() {
+        ValueAnimator fade = mFade;
+        mFade = null;
+        if (fade != null) fade.cancel();
+        if (mFadeFrom != null) {
+            mFadeFrom.recycle();
+            mFadeFrom = null;
+        }
+        mFadeProgress = 1f;
+        invalidate();
+    }
+
+    @SuppressWarnings("deprecation")
+    @Override
+    protected void onDraw(Canvas canvas) {
+        if (mFade == null) {
+            super.onDraw(canvas);
+            return;
+        }
+        int width = getWidth();
+        int height = getHeight();
+        int alpha = Math.round(255 * mFadeProgress);
+        if (mFadeFrom == null) {
+            // Fading in over nothing: one layer.
+            int count = canvas.saveLayerAlpha(0, 0, width, height, alpha, Canvas.ALL_SAVE_FLAG);
+            super.onDraw(canvas);
+            canvas.restoreToCount(count);
+            return;
+        }
+        // Canvas.ALL_SAVE_FLAG: the saveLayer without flags is API 21+.
+        int count = canvas.saveLayer(0, 0, width, height, null, Canvas.ALL_SAVE_FLAG);
+        mFadeFromPaint.setAlpha(255 - alpha);
+        canvas.drawBitmap(mFadeFrom, 0, 0, mFadeFromPaint);
+        mFadeInPaint.setAlpha(alpha);
+        canvas.saveLayer(0, 0, width, height, mFadeInPaint, Canvas.ALL_SAVE_FLAG);
+        super.onDraw(canvas);
+        canvas.restoreToCount(count);
+    }
+
+    @Override
+    protected void onDetachedFromWindow() {
+        endFade();
+        super.onDetachedFromWindow();
+    }
+
     public void setPaused(boolean paused) {
         if (paused == mPaused) return;
         mPaused = paused;
@@ -277,9 +451,10 @@ class FastImageViewWithUrl extends AppCompatImageView {
         mRecyclingKey = recyclingKey;
         if (changed) {
             // No thumbnail of the current image, so Glide clears the view to
-            // defaultSource (or nothing) while the next one loads. Reload even
-            // if the source is the same.
+            // defaultSource (or nothing) while the next one loads, nor a fade
+            // from it. Reload even if the source is the same.
             mShownRequest = null;
+            endFade();
             mNeedsReload = true;
         }
     }
@@ -299,6 +474,13 @@ class FastImageViewWithUrl extends AppCompatImageView {
     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
         super.onSizeChanged(w, h, oldw, oldh);
+        // During a fade, what the view showed was drawn at the old size: the
+        // image fades in over nothing instead.
+        if (mFadeFrom != null && (w != mFadeFrom.getWidth() || h != mFadeFrom.getHeight())) {
+            mFadeFrom.recycle();
+            mFadeFrom = null;
+            invalidate();
+        }
         reloadIfResized();
     }
 
@@ -395,7 +577,9 @@ class FastImageViewWithUrl extends AppCompatImageView {
     // it was loaded at: the key it's in Glide's memory cache under.
     @SuppressLint("CheckResult")
     private RequestBuilder<Drawable> fromCache(RequestBuilder<Drawable> shown) {
-        RequestBuilder<Drawable> request = shown.clone().onlyRetrieveFromCache(true);
+        // Never fades: it's the image the view showed.
+        RequestBuilder<Drawable> request = shown.clone().onlyRetrieveFromCache(true)
+                .transition(GenericTransitionOptions.<Drawable>withNoTransition());
         if (mShownWidth > 0 && mShownHeight > 0) request = request.override(mShownWidth, mShownHeight);
         return request;
     }
@@ -461,6 +645,8 @@ class FastImageViewWithUrl extends AppCompatImageView {
         boolean restarting = mRestarting;
         mRestarting = false;
         mLoadCount++;
+        // A fade in progress carries on, as on iOS: into the next image if it
+        // shows at once, and a next image that fades starts from it.
         RequestBuilder<Drawable> shownRequest = mShownRequest;
         mShownRequest = null;
         mLoadingRequest = null;
@@ -560,6 +746,16 @@ class FastImageViewWithUrl extends AppCompatImageView {
 
             if (model == null) meanwhile = null;
             boolean thumbnail = shownRequest != null && model != null && meanwhile == null;
+            // After the clone: loading the image that's showing again (at a
+            // new size, or with another blur) doesn't fade it in again. Over a
+            // loaded image (a new source) only with betweenImages: otherwise it
+            // replaces it at once, as Glide, Coil and Fresco fade an image in
+            // from nothing and never between images.
+            boolean replacing = shownRequest != null && model != null;
+            if (mTransitionDuration > 0 && (!replacing || mTransitionBetweenImages)) {
+                builder = builder.transition(DrawableTransitionOptions.with(
+                        new FadeFactory(mTransitionDuration, mTransitionSkipOnCacheHit)));
+            }
             if (thumbnail) {
                 builder = builder.thumbnail(fromCache(shownRequest));
             }

package/dist/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const resizeMode: {
+    readonly contain: 'contain';
+    readonly cover: 'cover';
+    readonly stretch: 'stretch';
+    readonly center: 'center';
+};
+export declare const priority: {
+    readonly low: 'low';
+    readonly normal: 'normal';
+    readonly high: 'high';
+};
+export declare const cacheControl: {
+    readonly immutable: 'immutable';
+    readonly web: 'web';
+    readonly cacheOnly: 'cacheOnly';
+};

package/dist/index.cjs.js

@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 let react = require("react");
 react = __toESM(react);
 let react_native = require("react-native");
-//#region src/index.tsx
+//#region src/constants.ts
 const resizeMode = {
 	contain: "contain",
 	cover: "cover",
@@ -44,6 +44,8 @@ const cacheControl = {
 	web: "web",
 	cacheOnly: "cacheOnly"
 };
+//#endregion
+//#region src/index.tsx
 const resolveDefaultSource = (defaultSource) => {
 	if (!defaultSource) return null;
 	if (react_native.Platform.OS === "android") {
@@ -91,11 +93,24 @@ function withProgress(onProgress) {
 		onProgress(event);
 	});
 }
+const DEFAULT_FADE_MS = react_native.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 = (0, react.useRef)(void 0);
 	const wrapperProps = {
@@ -158,6 +173,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		...imageProps,
 		tintColor: resolvedTintColor,
 		loopCount: loopCount(loop),
+		...transitionProps(transition),
 		style: react_native.StyleSheet.absoluteFill,
 		source: resolvedSource,
 		defaultSource: resolvedDefaultSource,

package/dist/index.cjs.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.cjs.web.js

@@ -0,0 +1,193 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+//#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/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 = (0, react.useRef)(void 0);
+	const sent = (0, react.useRef)(Promise.resolve());
+	const image = (0, react.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.default.createElement(react_native.View, {
+		style: [styles.container, style],
+		onLayout,
+		pointerEvents,
+		ref: forwardedRef
+	}, /* @__PURE__ */ react.default.createElement(react_native.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 = (0, react.memo)(FastImageBase);
+const FastImageComponent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ react.default.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) => {
+		react_native.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 react_native.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 = react_native.StyleSheet.create({
+	container: { overflow: "hidden" },
+	image: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		width: "100%",
+		height: "100%"
+	}
+});
+const FastImageWithRef = FastImageComponent;
+const FastImageBackground = (0, react.forwardRef)(({ style, imageStyle, imageRef, children, ...props }, ref) => /* @__PURE__ */ react.default.createElement(react_native.View, {
+	style,
+	ref
+}, /* @__PURE__ */ react.default.createElement(FastImageWithRef, {
+	...props,
+	style: [react_native.StyleSheet.absoluteFill, imageStyle],
+	ref: imageRef
+}), children));
+FastImageBackground.displayName = "FastImageBackground";
+//#endregion
+exports.FastImageBackground = FastImageBackground;
+exports.default = FastImage;