react-native-fast-image 8.20.0 → 8.21.0

package/README.md

@@ -222,6 +222,22 @@ Decoding a smaller copy can take a little longer, so use it where the memory mat
 
 ---
 
+### `blurRadius?: number`
+
+Blurs the image by this radius, in points, like React Native's `Image` (the same radius looks about the same on iOS and Android). `0` **(Default)** is no blur.
+
+It's for still images, or a radius that changes now and then (e.g. blurring a photo behind a sheet). Each change blurs the image again on the CPU, so don't animate it.
+
+- Only the loaded image is blurred, not `defaultSource`.
+- An animated image (GIF, animated WebP) shows its first frame, blurred, and doesn't animate.
+- With `tintColor`, the blurred image is tinted.
+- The image is blurred at about the size it's shown at, off the main thread. The cached file stays the original image, so `getCachePath` and other views of it aren't affected.
+- Changing it blurs the image that's showing again, without sending the load events again.
+
+To animate a blur, or to blur an animated image, use React Native's `filter` style instead, which the GPU draws: `style={{ filter: [{ blur: 6 }] }}`. It needs the New Architecture. React Native's docs list `blur` for Android 12+ only; on iOS it's behind an experimental React Native feature flag (`enableSwiftUIBasedFilters`, SwiftUI-based filters).
+
+---
+
 ### `onLoadStart?: () => void`
 
 Called when the image starts to load.

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

@@ -0,0 +1,213 @@
+package com.dylanvann.fastimage;
+
+import android.graphics.Bitmap;
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.graphics.PorterDuff;
+import android.graphics.PorterDuffXfermode;
+import android.widget.ImageView;
+
+import androidx.annotation.NonNull;
+
+import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
+import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;
+import com.bumptech.glide.request.target.Target;
+
+import java.nio.IntBuffer;
+import java.nio.charset.Charset;
+import java.security.MessageDigest;
+
+// Blurs the image (blurRadius), as React Native's Image does on iOS: three box
+// blurs, close to a Gaussian blur, with the box size worked out from the radius
+// (in pixels) as the SVG spec describes and halved, as React Native does. So a
+// radius looks the same on both platforms. It runs after the scale type's crop
+// or fit, on the image at about the size the view shows it (a blurred image
+// needs no more detail), on Glide's threads. Part of the request's key, so
+// blurred and unblurred views of one image don't share a cached image; the
+// cached file stays the original.
+final class FastImageBlur extends BitmapTransformation {
+    private static final String ID = "com.dylanvann.fastimage.FastImageBlur";
+    private static final byte[] ID_BYTES = ID.getBytes(Charset.forName("UTF-8"));
+
+    // In pixels on screen.
+    private final float radius;
+    private final ImageView.ScaleType scaleType;
+
+    FastImageBlur(float radius, ImageView.ScaleType scaleType) {
+        this.radius = radius;
+        this.scaleType = scaleType;
+    }
+
+    @Override
+    protected Bitmap transform(@NonNull BitmapPool pool, @NonNull Bitmap toTransform, int outWidth, int outHeight) {
+        int width = toTransform.getWidth();
+        int height = toTransform.getHeight();
+        if (outWidth == Target.SIZE_ORIGINAL) outWidth = width;
+        if (outHeight == Target.SIZE_ORIGINAL) outHeight = height;
+        // How many pixels on screen a pixel of the bitmap takes.
+        float shownScale = shownScale(width, height, outWidth, outHeight);
+        // Blurred at the size it's shown at, or at its own size if it's shown
+        // larger.
+        float scale = Math.min(shownScale, 1);
+        int blurredWidth = Math.max(1, Math.round(width * scale));
+        int blurredHeight = Math.max(1, Math.round(height * scale));
+        int boxSize = boxSize(radius * scale / shownScale, Math.max(blurredWidth, blurredHeight));
+        if (boxSize <= 1 && scale == 1) return toTransform;
+
+        Bitmap result = pool.get(blurredWidth, blurredHeight, Bitmap.Config.ARGB_8888);
+        result.setDensity(toTransform.getDensity());
+        Canvas canvas = new Canvas(result);
+        canvas.scale(blurredWidth / (float) width, blurredHeight / (float) height);
+        canvas.drawBitmap(toTransform, 0, 0, new Paint(Paint.FILTER_BITMAP_FLAG));
+        canvas.setBitmap(null);
+        if (boxSize > 1) blur(pool, result, boxSize);
+        return result;
+    }
+
+    // Pixels on screen per pixel of the bitmap, for the view's scale type.
+    private float shownScale(int width, int height, int outWidth, int outHeight) {
+        if (width <= 0 || height <= 0 || outWidth <= 0 || outHeight <= 0) return 1;
+        float x = outWidth / (float) width;
+        float y = outHeight / (float) height;
+        if (scaleType == null) return 1;
+        switch (scaleType) {
+            case CENTER_CROP:
+                return Math.max(x, y);
+            case FIT_CENTER:
+            case FIT_START:
+            case FIT_END:
+                return Math.min(x, y);
+            case FIT_XY:
+                return (float) Math.sqrt(x * y);
+            case CENTER_INSIDE:
+                return Math.min(Math.min(x, y), 1);
+            default:
+                return 1;
+        }
+    }
+
+    // React Native's (RCTImageBlurUtils) for a radius in pixels: odd, so it's
+    // centered. At most the image's larger side (a larger box looks the same,
+    // and an absurd radius would overflow).
+    private static int boxSize(float radius, int max) {
+        double size = Math.floor((radius * 3 * Math.sqrt(2 * Math.PI) / 4 + 0.5) / 2);
+        return (int) Math.min(size, max) | 1;
+    }
+
+    // Blurs the bitmap, on its premultiplied pixels (as stored), each byte a
+    // channel. A large box blurs a copy 2, 4 or 8 times smaller instead (each
+    // pixel the average of a block), with a box that much smaller, of at least
+    // 11 pixels, drawn back at full size: away from the edges that matches
+    // blurring at full size within a few levels of 255 (about as much as a
+    // slightly different radius changes it), for a quarter to a sixty-fourth of
+    // the work.
+    private static void blur(BitmapPool pool, Bitmap bitmap, int boxSize) {
+        int width = bitmap.getWidth();
+        int height = bitmap.getHeight();
+        int[] pixels = new int[width * height];
+        IntBuffer buffer = IntBuffer.wrap(pixels);
+        bitmap.copyPixelsToBuffer(buffer);
+        int factor = boxSize >= 88 ? 8 : boxSize >= 44 ? 4 : boxSize >= 22 ? 2 : 1;
+        if (factor == 1) {
+            blur(pixels, width, height, boxSize);
+            buffer.rewind();
+            bitmap.copyPixelsFromBuffer(buffer);
+            return;
+        }
+        int smallWidth = (width + factor - 1) / factor;
+        int smallHeight = (height + factor - 1) / factor;
+        int[] small = shrink(pixels, width, height, factor, smallWidth, smallHeight);
+        blur(small, smallWidth, smallHeight, Math.round((boxSize / (float) factor - 1) / 2) * 2 + 1);
+        Bitmap copy = pool.get(smallWidth, smallHeight, Bitmap.Config.ARGB_8888);
+        copy.copyPixelsFromBuffer(IntBuffer.wrap(small));
+        Canvas canvas = new Canvas(bitmap);
+        canvas.scale(factor, factor);
+        Paint paint = new Paint(Paint.FILTER_BITMAP_FLAG);
+        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
+        canvas.drawBitmap(copy, 0, 0, paint);
+        canvas.setBitmap(null);
+        pool.put(copy);
+    }
+
+    // Three box blurs, each across then down, with the edges extended.
+    private static void blur(int[] pixels, int width, int height, int boxSize) {
+        int[] other = new int[width * height];
+        int radius = boxSize / 2;
+        for (int i = 0; i < 3; i++) {
+            for (int y = 0; y < height; y++) boxBlur(pixels, other, y * width, 1, width, radius);
+            for (int x = 0; x < width; x++) boxBlur(other, pixels, x, width, height, radius);
+        }
+    }
+
+    // A copy factor times smaller: each pixel the average of a factor × factor
+    // block (smaller at the right and bottom edges).
+    private static int[] shrink(int[] pixels, int width, int height, int factor, int smallWidth, int smallHeight) {
+        int[] small = new int[smallWidth * smallHeight];
+        for (int sy = 0; sy < smallHeight; sy++) {
+            for (int sx = 0; sx < smallWidth; sx++) {
+                int a = 0, b = 0, c = 0, d = 0, n = 0;
+                for (int y = sy * factor; y < Math.min(height, (sy + 1) * factor); y++) {
+                    for (int x = sx * factor; x < Math.min(width, (sx + 1) * factor); x++) {
+                        int pixel = pixels[y * width + x];
+                        a += pixel >>> 24;
+                        b += (pixel >> 16) & 0xff;
+                        c += (pixel >> 8) & 0xff;
+                        d += pixel & 0xff;
+                        n++;
+                    }
+                }
+                int half = n / 2;
+                small[sy * smallWidth + sx] = ((a + half) / n) << 24 | ((b + half) / n) << 16
+                        | ((c + half) / n) << 8 | ((d + half) / n);
+            }
+        }
+        return small;
+    }
+
+    // Averages each pixel of a row or column (count pixels from start, step
+    // apart) with the radius pixels on each side.
+    private static void boxBlur(int[] from, int[] to, int start, int step, int count, int radius) {
+        int size = 2 * radius + 1;
+        int half = size / 2;
+        int a = 0, b = 0, c = 0, d = 0;
+        for (int i = -radius; i <= radius; i++) {
+            int pixel = from[start + clamp(i, count) * step];
+            a += pixel >>> 24;
+            b += (pixel >> 16) & 0xff;
+            c += (pixel >> 8) & 0xff;
+            d += pixel & 0xff;
+        }
+        for (int i = 0; i < count; i++) {
+            to[start + i * step] = ((a + half) / size) << 24 | ((b + half) / size) << 16
+                    | ((c + half) / size) << 8 | ((d + half) / size);
+            int added = from[start + clamp(i + radius + 1, count) * step];
+            int removed = from[start + clamp(i - radius, count) * step];
+            a += (added >>> 24) - (removed >>> 24);
+            b += ((added >> 16) & 0xff) - ((removed >> 16) & 0xff);
+            c += ((added >> 8) & 0xff) - ((removed >> 8) & 0xff);
+            d += (added & 0xff) - (removed & 0xff);
+        }
+    }
+
+    private static int clamp(int i, int count) {
+        return i < 0 ? 0 : i >= count ? count - 1 : i;
+    }
+
+    @Override
+    public boolean equals(Object o) {
+        return o instanceof FastImageBlur
+                && ((FastImageBlur) o).radius == radius
+                && ((FastImageBlur) o).scaleType == scaleType;
+    }
+
+    @Override
+    public int hashCode() {
+        return ID.hashCode() * 31 + Float.floatToIntBits(radius) * 31 + (scaleType == null ? 0 : scaleType.ordinal());
+    }
+
+    @Override
+    public void updateDiskCacheKey(@NonNull MessageDigest messageDigest) {
+        messageDigest.update(ID_BYTES);
+        messageDigest.update((radius + "," + scaleType).getBytes(Charset.forName("UTF-8")));
+    }
+}

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

@@ -34,7 +34,12 @@ public class FastImageRequestListener implements RequestListener<Drawable> {
 
     @Override
     public boolean onLoadFailed(@androidx.annotation.Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
-        if (!events) return false;
+        if (!events) {
+            if (target instanceof ImageViewTarget) {
+                ((FastImageViewWithUrl) ((ImageViewTarget) target).getView()).onQuietLoadFailed();
+            }
+            return false;
+        }
         FastImageOkHttpProgressGlideModule.forget(key);
         if (!(target instanceof ImageViewTarget)) {
             return false;

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

@@ -14,7 +14,12 @@ import androidx.annotation.Nullable;
 
 import com.bumptech.glide.Glide;
 import com.bumptech.glide.load.ImageHeaderParserUtils;
+import com.bumptech.glide.load.MultiTransformation;
+import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;
+import com.bumptech.glide.load.resource.bitmap.CenterCrop;
+import com.bumptech.glide.load.resource.bitmap.CenterInside;
 import com.bumptech.glide.load.resource.bitmap.DownsampleStrategy;
+import com.bumptech.glide.load.resource.bitmap.FitCenter;
 import com.bumptech.glide.load.resource.gif.GifDrawable;
 import com.bumptech.glide.request.RequestOptions;
 
@@ -82,27 +87,37 @@ final class FastImageSourceSize {
 
     // What RequestBuilder.into(ImageView) applies for the view's scale type
     // (it leaves a transformation that's already set alone), with the
-    // downsample strategy it implies wrapped by capture.
-    static RequestOptions scaleTypeOptions(@Nullable ImageView.ScaleType scaleType, Capture capture) {
+    // downsample strategy it implies wrapped by capture, and then blur if it
+    // isn't null.
+    static RequestOptions scaleTypeOptions(@Nullable ImageView.ScaleType scaleType, Capture capture, @Nullable FastImageBlur blur) {
         RequestOptions options = new RequestOptions();
+        BitmapTransformation transformation = null;
         if (scaleType != null) {
             switch (scaleType) {
                 case CENTER_CROP:
                     options = options.optionalCenterCrop();
+                    transformation = new CenterCrop();
                     break;
                 case CENTER_INSIDE:
                 case FIT_XY:
                     options = options.optionalCenterInside();
+                    transformation = new CenterInside();
                     break;
                 case FIT_CENTER:
                 case FIT_START:
                 case FIT_END:
                     options = options.optionalFitCenter();
+                    transformation = new FitCenter();
                     break;
                 default:
                     break;
             }
         }
+        if (blur != null) {
+            options = transformation == null
+                    ? options.optionalTransform(blur)
+                    : options.optionalTransform(new MultiTransformation<>(transformation, blur));
+        }
         return options.downsample(capture);
     }
 

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

@@ -22,6 +22,7 @@ import com.facebook.react.uimanager.LayoutShadowNode;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper;
 
@@ -99,6 +100,11 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
         view.setImageRendering(imageRendering);
     }
 
+    @ReactProp(name = "blurRadius")
+    public void setBlurRadius(FastImageViewWithUrl view, float blurRadius) {
+        view.setBlurRadius(PixelUtil.toPixelFromDIP(blurRadius));
+    }
+
     @ReactProp(name = "paused")
     public void setPaused(FastImageViewWithUrl view, boolean paused) {
         view.setPaused(paused);

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

@@ -202,19 +202,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
@@ -255,6 +286,7 @@ class FastImageViewWithUrl extends AppCompatImageView {
 
     // The loading image loaded (FastImageRequestListener).
     void onImageLoaded() {
+        mLoadEnded = true;
         mShownRequest = mLoadingRequest;
         mShownWidth = mLoadingWidth;
         mShownHeight = mLoadingHeight;
@@ -310,6 +342,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,
@@ -346,6 +406,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 +421,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 +448,24 @@ 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++;
         RequestBuilder<Drawable> shownRequest = mShownRequest;
         mShownRequest = null;
         mLoadingRequest = null;
+        mBaseRequest = null;
+        mModel = null;
 
         // Nothing to show.
         if (mSource == null && mDefaultSource == null) {
@@ -453,7 +530,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 +538,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,10 +550,12 @@ 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;

package/dist/index.cjs.js.flow

@@ -118,6 +118,7 @@ export type FastImageProps = $ReadOnly<{|
     imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
     paused?: ?boolean,
     downsample?: ?boolean,
+    blurRadius?: ?number,
     testID?: ?string,
 |}>
 

package/dist/index.d.ts

@@ -142,6 +142,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.flow

@@ -118,6 +118,7 @@ export type FastImageProps = $ReadOnly<{|
     imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
     paused?: ?boolean,
     downsample?: ?boolean,
+    blurRadius?: ?number,
     testID?: ?string,
 |}>
 

package/ios/FastImage/FFFastImageView.h

@@ -32,6 +32,8 @@
 @property (nonatomic, assign) BOOL paused;
 // 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
 

package/ios/FastImage/FFFastImageView.m

@@ -5,6 +5,7 @@
 #import <SDWebImage/SDWebImageError.h>
 #import <SDWebImage/SDImageTransformer.h>
 #import "FFFDownsampledImage.h"
+#import <Accelerate/Accelerate.h>
 
 @interface FFFastImageView ()
 
@@ -16,9 +17,15 @@
 
 @property(nonatomic, strong) NSDictionary* onLoadEvent;
 @property(nonatomic, strong) NSDictionary* onErrorEvent;
-// The image before tinting, kept while a tint is applied so the tint can be
-// changed or removed. nil when there's no tint (super.image is untinted).
-@property(nonatomic, strong) UIImage* untintedImage;
+// The image before tinting and blurring, kept while either is applied so they
+// can be changed or removed. nil when neither is (super.image is the image).
+@property(nonatomic, strong) UIImage* originalImage;
+// Counts images set, so a blur that finishes can tell if it's still current.
+@property(nonatomic, assign) NSUInteger imageCount;
+// The view's size when the image showing was blurred.
+@property(nonatomic, assign) CGSize blurredForSize;
+// The blurred image showing (untinted), so a tint change can re-show it.
+@property(nonatomic, strong) UIImage* blurredImage;
 // Whether the current load was already restarted after the app came back
 // from the background (see downloadImage:).
 @property(nonatomic, assign) BOOL retriedAfterBackground;
@@ -41,6 +48,8 @@
 // When the app last went to the background (CACurrentMediaTime), or 0.
 static CFTimeInterval FFFEnteredBackgroundAt = 0;
 
+static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, BOOL downscale);
+
 @implementation FFFastImageView
 
 + (void) initialize {
@@ -128,6 +137,10 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
     if (_resizeMode != resizeMode) {
         _resizeMode = resizeMode;
         [self updateContentMode];
+        // The blur is made for the size the image is shown at.
+        if ([self blurs: self.originalImage]) {
+            [self setImage: self.originalImage];
+        }
     }
 }
 
@@ -153,6 +166,7 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
 - (void) layoutSubviews {
     [super layoutSubviews];
     [self updateContentMode];
+    [self blurAgainIfResized];
     if (self.waitsForSize) {
         if ([self hasSize]) {
             [self reloadImage];
@@ -198,8 +212,16 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
 
 - (void) setImageColor: (UIColor*)imageColor {
     _imageColor = imageColor;
-    // Re-apply to the untinted image, so the tint can change or be removed.
-    UIImage* image = self.untintedImage ?: super.image;
+    // A blurred image is a still image: show it with the new tint, without
+    // blurring it again.
+    if ([self blurs: self.originalImage]) {
+        if (self.blurredImage) {
+            [self showImage: self.blurredImage];
+        }
+        return;
+    }
+    // Re-apply to the original image, so the tint can change or be removed.
+    UIImage* image = self.originalImage ?: super.image;
     if (image) {
         // SDAnimatedImageView ignores the image it already shows, which would
         // keep an animated image's frames as they were tinted.
@@ -215,14 +237,26 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
 }
 
 - (void) setImage: (UIImage*)image {
-    // Tinted as React Native's Image does it: UIKit draws a template image in
-    // the view's tintColor, so no tinted copy of the image is made.
-    // SDAnimatedImageView draws the frames of an animated image itself,
-    // without the tint, so each frame is tinted as it's decoded (source-in,
-    // as the template is), or, before SDWebImage 5.20, the first frame shows.
+    self.imageCount++;
+    if ([self blurs: image]) {
+        self.originalImage = image;
+        self.blurredImage = nil;
+        [self blurImage: image];
+        return;
+    }
+    self.originalImage = image && self.imageColor ? image : nil;
+    self.blurredImage = nil;
+    [self showImage: image];
+}
+
+// Shows the image, tinted as React Native's Image does it: UIKit draws a
+// template image in the view's tintColor, so no tinted copy of the image is
+// made. SDAnimatedImageView draws the frames of an animated image itself,
+// without the tint, so each frame is tinted as it's decoded (source-in, as the
+// template is), or, before SDWebImage 5.20, the first frame shows.
+- (void) showImage: (UIImage*)image {
     UIColor* tint = image ? self.imageColor : nil;
     BOOL animated = [image conformsToProtocol: @protocol(SDAnimatedImage)] && [(id<SDAnimatedImage>)image animatedImageFrameCount] > 1;
-    self.untintedImage = tint ? image : nil;
     self.tintColor = tint;
     if ([self tintsFrames]) {
         [self setValue: tint && animated ? [SDImageTintTransformer transformerWithColor: tint] : nil forKey: @"animationTransformer"];
@@ -247,6 +281,179 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
     [self updateContentMode];
 }
 
+- (void) setBlurRadius: (CGFloat)blurRadius {
+    if (_blurRadius == blurRadius) {
+        return;
+    }
+    _blurRadius = blurRadius;
+    // Re-apply to the original image, so the blur can change or be removed.
+    UIImage* image = self.originalImage ?: super.image;
+    if (image) {
+        [self setImage: image];
+    }
+}
+
+// Whether the image is blurred: a loaded image, not defaultSource (as with
+// React Native's Image, and on Android).
+- (BOOL) blurs: (UIImage*)image {
+    return _blurRadius > 0 && image && image != _defaultSource;
+}
+
+// Blurs the image off the main thread, and shows it (tinted as any image) unless
+// another image was set meanwhile. Until then the view keeps showing what it
+// showed: never the image without the blur. An animated image shows its first
+// frame.
+- (void) blurImage: (UIImage*)image {
+    // Not laid out yet (an image from the memory cache is set before the
+    // view's first layout): it's blurred for its size once it has one
+    // (blurAgainIfResized), instead of twice.
+    if (![self hasSize]) {
+        self.blurredForSize = CGSizeZero;
+        return;
+    }
+    CGFloat screenScale = self.window.screen.scale ?: [UIScreen mainScreen].scale;
+    // How many pixels on screen a pixel of the image takes.
+    CGFloat shownScale = [self shownScale: image] * screenScale / image.scale;
+    // Blurred at the size it's shown at (a blurred image needs no more
+    // detail), or at its own size if it's shown larger.
+    CGFloat scale = MIN(shownScale, 1);
+    // The radius in pixels of the image that's blurred.
+    CGFloat radius = _blurRadius * screenScale * scale / shownScale;
+    // Pixelated images are drawn larger without smoothing, so a smaller copy
+    // would show its pixels.
+    BOOL downscale = ![_imageRendering isEqualToString: @"pixelated"];
+    NSUInteger count = self.imageCount;
+    self.blurredForSize = self.bounds.size;
+    __weak typeof(self) weakSelf = self;
+    dispatch_async(dispatch_get_global_queue(QOS_CLASS_USER_INITIATED, 0), ^{
+        UIImage* blurred = FFFBlurredImage(image, scale, radius, downscale);
+        dispatch_async(dispatch_get_main_queue(), ^{
+            [weakSelf showBlurredImage: blurred count: count];
+        });
+    });
+}
+
+- (void) showBlurredImage: (UIImage*)image count: (NSUInteger)count {
+    if (self.imageCount == count) {
+        self.blurredImage = image;
+        [self showImage: image];
+    }
+}
+
+// Points on screen per point of the image, for the view's size and
+// resizeMode, or 1 before the view has a size.
+- (CGFloat) shownScale: (UIImage*)image {
+    CGSize size = image.size;
+    CGSize view = self.bounds.size;
+    if (size.width <= 0 || size.height <= 0 || view.width <= 0 || view.height <= 0) {
+        return 1;
+    }
+    CGFloat x = view.width / size.width;
+    CGFloat y = view.height / size.height;
+    switch (_resizeMode) {
+        case RCTResizeModeCover:
+            return MAX(x, y);
+        case RCTResizeModeContain:
+            return MIN(x, y);
+        case RCTResizeModeStretch:
+            return sqrt(x * y);
+        case RCTResizeModeCenter:
+            return MIN(MIN(x, y), 1);
+        default:
+            return 1;
+    }
+}
+
+// The view's size changed a lot (by more than a fifth either way) since the
+// image was blurred, which was for the size it was shown at then: blur it
+// again for the new size.
+- (void) blurAgainIfResized {
+    if (![self blurs: self.originalImage] || ![self hasSize]) {
+        return;
+    }
+    CGSize view = self.bounds.size;
+    CGSize blurred = self.blurredForSize;
+    if (blurred.width > 0 && blurred.height > 0 &&
+        view.width <= blurred.width * 1.2 && blurred.width <= view.width * 1.2 &&
+        view.height <= blurred.height * 1.2 && blurred.height <= view.height * 1.2) {
+        return;
+    }
+    [self setImage: self.originalImage];
+}
+
+// The image (its first frame, for an animated image) drawn at scale times its
+// size in pixels, and blurred as React Native's Image blurs on iOS: three box
+// blurs, close to a Gaussian blur, with the box size worked out from the
+// radius (in pixels) as the SVG spec describes and halved, as React Native
+// does. A large box blurs a copy 2, 4 or 8 times smaller instead, with a box
+// that much smaller, of at least 11 pixels: away from the edges that matches
+// blurring at full size within a few levels of 255 (about as much as a
+// slightly different radius changes it), for a quarter to a sixty-fourth of
+// the work. It keeps the image's size in points.
+static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, BOOL downscale)
+{
+    if (image.size.width <= 0 || image.size.height <= 0) {
+        return image;
+    }
+    double fullWidth = MAX(1, round(image.size.width * image.scale * scale));
+    double fullHeight = MAX(1, round(image.size.height * image.scale * scale));
+    // At most the image's larger side (a larger box looks the same, and an
+    // absurd radius would overflow).
+    double box = MIN(floor((radius * 3 * sqrt(2 * M_PI) / 4 + 0.5) / 2), MAX(fullWidth, fullHeight));
+    double factor = !downscale ? 1 : box >= 88 ? 8 : box >= 44 ? 4 : box >= 22 ? 2 : 1;
+    size_t width = MAX(1, (size_t) round(fullWidth / factor));
+    size_t height = MAX(1, (size_t) round(fullHeight / factor));
+    // Odd, so it's centered.
+    uint32_t boxSize = factor == 1 ? (uint32_t) box | 1 : (uint32_t) round((box / factor - 1) / 2) * 2 + 1;
+    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
+    CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace,
+                                                 kCGImageAlphaPremultipliedFirst | kCGBitmapByteOrder32Host);
+    CGColorSpaceRelease(colorSpace);
+    if (!context) {
+        return image;
+    }
+    // Drawn as UIKit draws (top-left origin), so it follows the image's
+    // orientation.
+    CGContextTranslateCTM(context, 0, height);
+    CGContextScaleCTM(context, 1, -1);
+    CGContextSetInterpolationQuality(context, kCGInterpolationHigh);
+    UIGraphicsPushContext(context);
+    [image drawInRect: CGRectMake(0, 0, width, height)];
+    UIGraphicsPopContext();
+
+    if (boxSize > 1) {
+        vImage_Buffer buffer = {
+            .data = CGBitmapContextGetData(context),
+            .height = height,
+            .width = width,
+            .rowBytes = CGBitmapContextGetBytesPerRow(context),
+        };
+        vImage_Buffer other = buffer;
+        other.data = malloc(buffer.rowBytes * height);
+        vImage_Error tempSize = vImageBoxConvolve_ARGB8888(&buffer, &other, NULL, 0, 0, boxSize, boxSize, NULL,
+                                                           kvImageGetTempBufferSize | kvImageEdgeExtend);
+        void* temp = tempSize > 0 ? malloc(tempSize) : NULL;
+        if (other.data && temp) {
+            vImageBoxConvolve_ARGB8888(&buffer, &other, temp, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);
+            vImageBoxConvolve_ARGB8888(&other, &buffer, temp, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);
+            vImageBoxConvolve_ARGB8888(&buffer, &other, temp, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);
+            memcpy(buffer.data, other.data, buffer.rowBytes * height);
+        }
+        free(other.data);
+        free(temp);
+    }
+
+    CGImageRef cgImage = CGBitmapContextCreateImage(context);
+    CGContextRelease(context);
+    if (!cgImage) {
+        return image;
+    }
+    // The same size in points, also when it's smaller.
+    UIImage* blurred = [UIImage imageWithCGImage: cgImage scale: width / image.size.width orientation: UIImageOrientationUp];
+    CGImageRelease(cgImage);
+    return blurred;
+}
+
 // The error's description, with the HTTP status code when there is one (as on
 // Android): SDWebImage keeps the code out of the description. Also for preload
 // results.
@@ -381,7 +588,7 @@ NSString *FFFErrorMessage(NSError *error)
         return;
     }
     // Already at full size (it's no larger than the view it was decoded for).
-    UIImage* image = self.untintedImage ?: super.image;
+    UIImage* image = self.originalImage ?: super.image;
     if (self.hasCompleted && CGSizeEqualToSize(image.size, [FFFDownsampledImage sourceSizeOfImage: image])) {
         return;
     }

package/ios/FastImage/FFFastImageViewManager.m

@@ -108,6 +108,7 @@ RCT_EXPORT_VIEW_PROPERTY(loopCount, NSInteger)
 RCT_EXPORT_VIEW_PROPERTY(imageRendering, NSString)
 RCT_EXPORT_VIEW_PROPERTY(paused, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(downsample, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(blurRadius, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageLoadStart, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageProgress, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageError, RCTDirectEventBlock)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-fast-image",
-    "version": "8.20.0",
+    "version": "8.21.0",
     "description": "🚩 FastImage, performant React Native image component.",
     "keywords": [
         "cache",