react-native-fast-image 8.20.0 → 8.22.0

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;
@@ -202,19 +376,50 @@ class FastImageViewWithUrl extends AppCompatImageView {
         mNeedsReload = true;
     }
 
+    // blurRadius, in pixels (0 is no blur). Part of the request (see
+    // reblur for a change).
+    private float mBlurRadius = 0;
+    private boolean mBlurChanged = false;
+
+    public void setBlurRadius(float blurRadius) {
+        if (blurRadius == mBlurRadius) return;
+        mBlurRadius = blurRadius;
+        mBlurChanged = true;
+    }
+
     // The scale type's options (what into() would apply), or none when
-    // pixelated.
+    // pixelated, and the blur. A blurred animated image shows its first frame,
+    // as on iOS.
     private RequestOptions renderingOptions(Object model) {
+        FastImageBlur blur = mBlurRadius > 0 ? new FastImageBlur(mBlurRadius, getScaleType()) : null;
+        RequestOptions options;
         if (mPixelated) {
             // Decoded as it is, then scaled by the view without filtering (see
             // OwnGifTarget).
-            return new RequestOptions()
+            options = new RequestOptions()
                     .downsample(new FastImageSourceSize.Capture(DownsampleStrategy.NONE, String.valueOf(model)))
                     .dontTransform();
+            if (blur != null) options = options.optionalTransform(blur);
+        } else {
+            options = FastImageSourceSize.scaleTypeOptions(
+                    getScaleType(), FastImageSourceSize.capture(getScaleType(), model), blur);
         }
-        return FastImageSourceSize.scaleTypeOptions(getScaleType(), FastImageSourceSize.capture(getScaleType(), model));
+        return blur != null ? options.dontAnimate() : options;
     }
 
+    // The request the loading one was made from, before renderingOptions, and
+    // its model, to make it again with another blur (see reblur).
+    @Nullable
+    private RequestBuilder<Drawable> mBaseRequest;
+    @Nullable
+    private Object mModel;
+    // Whether the loading image has loaded or failed.
+    private boolean mLoadEnded = false;
+    // Set by reblur: the next load is the same one again, so it doesn't send
+    // onLoadStart (it sends its other events, as the load it replaces would
+    // have).
+    private boolean mRestarting = false;
+
     // The request for the image the view shows once it has loaded, and the one
     // loading. A new source starts with the shown one as a thumbnail, from the
     // cache only, so the image stays until the new one has loaded instead of
@@ -246,15 +451,17 @@ 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;
         }
     }
 
     // The loading image loaded (FastImageRequestListener).
     void onImageLoaded() {
+        mLoadEnded = true;
         mShownRequest = mLoadingRequest;
         mShownWidth = mLoadingWidth;
         mShownHeight = mLoadingHeight;
@@ -267,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();
     }
 
@@ -310,6 +524,34 @@ class FastImageViewWithUrl extends AppCompatImageView {
         into(shown, builder, meanwhile);
     }
 
+    // blurRadius changed, and nothing else that needs a reload: the image
+    // that's showing, blurred again, with no events, as reloadForSize does: it's
+    // decoded again from the cache and blurred on Glide's threads, and the view
+    // keeps the current image until then (or if that fails). A load that
+    // hasn't finished starts again with the new blur, without a second
+    // onLoadStart. Nothing loaded (defaultSource, which isn't blurred, or
+    // nothing): the next load has the new blur.
+    @SuppressLint("CheckResult")
+    private void reblur() {
+        if (requestManager == null || mBaseRequest == null) return;
+        RequestBuilder<Drawable> shown = mShownRequest;
+        if (shown != null && shown == mLoadingRequest) {
+            RequestBuilder<Drawable> request = mBaseRequest.clone().apply(renderingOptions(mModel));
+            RequestBuilder<Drawable> current = fromCache(shown);
+            Drawable meanwhile = shownCopy(shown);
+            mLoadCount++;
+            clearView(requestManager);
+            RequestBuilder<Drawable> builder = request.clone()
+                    .error(current.clone())
+                    .listener(new FastImageRequestListener(null, null, true, false));
+            if (meanwhile == null) builder = builder.thumbnail(current);
+            into(request, builder, meanwhile);
+        } else if (mLoadingRequest != null && !mLoadEnded) {
+            mRestarting = true;
+            mNeedsReload = true;
+        }
+    }
+
     // A copy of the image showing, for the view to show while the next one
     // loads, when it isn't in Glide's memory cache (source.memoryCache false):
     // a thumbnail of it would come from the disk, after the view has cleared,
@@ -335,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;
     }
@@ -346,6 +590,7 @@ class FastImageViewWithUrl extends AppCompatImageView {
     private void into(RequestBuilder<Drawable> request, RequestBuilder<Drawable> builder, @Nullable Drawable meanwhile) {
         final int load = mLoadCount;
         mLoadingRequest = request;
+        mLoadEnded = false;
         mLoadingWidth = 0;
         mLoadingHeight = 0;
         OwnGifTarget target = new OwnGifTarget(meanwhile);
@@ -360,9 +605,16 @@ class FastImageViewWithUrl extends AppCompatImageView {
         builder.into(target);
     }
 
+    // Loading the image that's showing again (at a new size, or with another
+    // blur) failed: the view keeps showing it (FastImageRequestListener).
+    void onQuietLoadFailed() {
+        mLoadEnded = true;
+    }
+
     // The loading image failed (FastImageRequestListener). Glide shows
     // defaultSource then, but not over a thumbnail: show it here, as iOS does.
     void onImageFailed(boolean hadThumbnail) {
+        mLoadEnded = true;
         mShownRequest = null;
         if (!hadThumbnail) return;
         final int load = mLoadCount;
@@ -380,15 +632,26 @@ class FastImageViewWithUrl extends AppCompatImageView {
             @Nonnull FastImageViewManager manager,
             @Nullable RequestManager requestManager,
             @Nonnull Map<String, List<FastImageViewWithUrl>> viewsForUrlsMap) {
+        if (mBlurChanged && !mNeedsReload) {
+            mBlurChanged = false;
+            reblur();
+        }
         if (!mNeedsReload)
             return;
         // Only reload for changes that affect the request (source,
         // defaultSource, resizeMode), not for every prop update.
         mNeedsReload = false;
+        mBlurChanged = false;
+        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;
+        mBaseRequest = null;
+        mModel = null;
 
         // Nothing to show.
         if (mSource == null && mDefaultSource == null) {
@@ -453,7 +716,7 @@ class FastImageViewWithUrl extends AppCompatImageView {
             }
         }
 
-        if (imageSource != null) {
+        if (imageSource != null && !restarting) {
             // This is an orphan even without a load/loadend when only loading a placeholder
             FastImageEvents.send(this, FastImageViewManager.REACT_ON_LOAD_START_EVENT);
         }
@@ -461,7 +724,7 @@ class FastImageViewWithUrl extends AppCompatImageView {
         if (requestManager != null) {
             // Records the image's own size when Glide decodes it, for onLoad.
             Object model = imageSource == null ? null : imageSource.getSourceForLoad();
-            RequestBuilder<Drawable> builder =
+            RequestBuilder<Drawable> base =
                     requestManager
                             // This will make this work for remote and local images. e.g.
                             //    - file:///
@@ -473,14 +736,26 @@ class FastImageViewWithUrl extends AppCompatImageView {
                             .apply(FastImageViewConverter
                                     .getOptions(getContext(), imageSource, mSource)
                                     .placeholder(mDefaultSource) // show until loaded
-                                    .fallback(mDefaultSource)) // null will not be treated as error
-                            // What into() would apply for the scale type, with
-                            // the size capture, for imageRendering.
-                            .apply(renderingOptions(model));
+                                    .fallback(mDefaultSource)); // null will not be treated as error
+            mBaseRequest = model == null ? null : base;
+            mModel = model;
+            // What into() would apply for the scale type, with the size
+            // capture, for imageRendering, and the blur.
+            RequestBuilder<Drawable> builder = base.clone().apply(renderingOptions(model));
             RequestBuilder<Drawable> request = builder.clone();
 
             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/index.cjs.js

@@ -91,11 +91,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 +171,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,7 +123,9 @@ 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.d.ts

@@ -42,6 +42,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 +164,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
@@ -142,6 +178,14 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * or with an image CDN instead). See the README.
      */
     downsample?: boolean;
+    /**
+     * Blurs the image by this radius, in points, like React Native's Image
+     * (the same radius looks about the same on both platforms). `0` (default)
+     * is no blur. For still images or occasional changes, not for animating.
+     * Only the loaded image is blurred, not `defaultSource`. An animated image
+     * shows its first frame, blurred. See the README.
+     */
+    blurRadius?: number;
     onLoadStart?(): void;
     onProgress?(event: OnProgressEvent): void;
     onLoad?(event: OnLoadEvent): void;

package/dist/index.js

@@ -64,11 +64,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 +144,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,7 +123,9 @@ export type FastImageProps = $ReadOnly<{|
     loop?: ?(boolean | number),
     imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
     paused?: ?boolean,
+    transition?: ?(boolean | number | Transition),
     downsample?: ?boolean,
+    blurRadius?: ?number,
     testID?: ?string,
 |}>
 

package/ios/FastImage/FFFastImageView.h

@@ -30,8 +30,16 @@
 @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).
+@property (nonatomic, assign) CGFloat blurRadius;
 
 @end