react-native-fast-image 8.20.0 → 8.22.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.
@@ -222,6 +243,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,26 @@ 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 = "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);