react-native-fast-image 9.2.2 → 9.3.0

package/README.md

@@ -91,7 +91,7 @@ const YourImage = () => (
             headers: { Authorization: 'someAuthToken' },
             priority: 'normal',
         }}
-        resizeMode="contain"
+        objectFit="contain"
     />
 )
 ```
@@ -235,16 +235,36 @@ On Android, `defaultSource` doesn't show in debug builds: there the dev server s
 
 ---
 
+#### `objectFit`
+
+**Type:** `ObjectFit` · **Default:** `'cover'`
+
+How the image fits the view, as CSS's `object-fit` does.
+
+- `'cover'`: scales it uniformly (keeping its aspect ratio) so it covers the view (minus padding), cropping what doesn't fit.
+- `'contain'`: scales it uniformly (keeping its aspect ratio) so all of it fits in the view (minus padding).
+- `'fill'`: scales its width and height separately to fill the view, which can change its aspect ratio.
+- `'none'`: shows it at its own size, centered, cropped if it's larger than the view.
+- `'scale-down'`: shows it at its own size, centered, or scaled down uniformly to fit if it's larger than the view (the smaller of `'none'` and `'contain'`).
+
+An image's own size is its size in pixels, as points (dp on Android), as CSS counts an image's pixels: a 300 × 200 image is 300 × 200 points. A bundled image (`require()`) is its size in points.
+
+It can also be set in `style`; the prop wins. Either one overrides `resizeMode`.
+
+---
+
 #### `resizeMode`
 
 **Type:** `ResizeMode` · **Default:** `'cover'`
 
+**Deprecated:** Use `objectFit` instead, except for `'repeat'`, which has no `objectFit` value and isn't deprecated.
+
 How the image fills the view.
 
-- `'contain'`: scales it uniformly (keeping its aspect ratio) so all of it fits in the view (minus padding).
-- `'cover'`: scales it uniformly (keeping its aspect ratio) so it covers the view (minus padding), cropping what doesn't fit.
-- `'stretch'`: scales its width and height separately to fill the view, which can change its aspect ratio.
-- `'center'`: centers it at its own size, scaled down uniformly to fit if it's larger than the view.
+- `'contain'`: as `objectFit="contain"`.
+- `'cover'`: as `objectFit="cover"`.
+- `'stretch'`: as `objectFit="fill"`.
+- `'center'`: as `objectFit="scale-down"`, except that on Android an image smaller than the view is shown at its size in pixels on the screen, so smaller than on iOS and the web.
 - `'repeat'`: repeats it to cover the view, from its top-left corner, at the image's own size in pixels (a bundled image at its size in points), scaled down to fit if it's larger than the view. An animated image repeats its first frame, and `defaultSource` repeats too.
 
 ---
@@ -686,6 +706,14 @@ A load's result, as `onLoadEnd` gets it: `ok` with the image's size, or not `ok`
 
 ---
 
+### `ObjectFit`
+
+**Type:** `'fill' | 'contain' | 'cover' | 'none' | 'scale-down'`
+
+How the image fits the view: see [`objectFit`](#objectfit).
+
+---
+
 ### `OnErrorEvent`
 
 `onError`'s event: `nativeEvent.error` says what went wrong, e.g. an HTTP status code or an image that can't be decoded.
@@ -826,9 +854,10 @@ FastImage works on the web with [react-native-web](https://necolas.github.io/rea
 
 Support is minimal:
 
-- Props that work: `source` (a `uri`, a `require()`d image, or several sizes), `defaultSource`, `resizeMode`, `tintColor`, `blurRadius`, `style`, children, `onLoadStart`, `onLoad`, `onError`, `onLoadEnd`, and View props such as `testID`, accessibility props, `onLayout` and `pointerEvents`.
+- Props that work: `source` (a `uri`, a `require()`d image, or several sizes), `defaultSource`, `objectFit`, `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`.
-- Several sizes are shown with a lazily loaded `<img>` whose `srcset` lists them, with `sizes="auto, 100vw"`: the browser loads the one for the width the image is shown at, in device pixels (usually the smallest that's at least as wide). Browsers that don't support `sizes="auto"` use the viewport's width. `tintColor`, `defaultSource` and `resizeMode="repeat"` don't apply to them.
+- The image is an `<img>` element that fills the view inside its borders, with `objectFit` as its CSS `object-fit` (and `resizeMode`'s `stretch` as `fill`, `center` as `scale-down`). With `resizeMode="repeat"`, it's a repeated CSS background, with a transparent `<img>` over it. `tintColor` is an SVG filter and `blurRadius` a CSS `blur()`, and `defaultSource` is another `<img>`, under the image until it has loaded. A new `source` gets a new `<img>`, so the previous image doesn't stay while it loads (with several sizes, the browser shows it until the new one has loaded).
+- Several sizes are shown with a lazily loaded `<img>` whose `srcset` lists them, with `sizes="auto, 100vw"`: the browser loads the one for the width the image is shown at, in device pixels (usually the smallest that's at least as wide). Browsers that don't support `sizes="auto"` use the viewport's width. `resizeMode="repeat"` shows them as `cover`.
 - `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

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

@@ -32,10 +32,17 @@ final class FastImageBlur extends BitmapTransformation {
     // In pixels on screen.
     private final float radius;
     private final ImageView.ScaleType scaleType;
+    // Pixels on screen per pixel of the image at its own size (scale-down and
+    // none show it at that size: see FastImageViewWithUrl.updateImageMatrix;
+    // 1 for resizeMode center).
+    private final float density;
 
-    FastImageBlur(float radius, ImageView.ScaleType scaleType) {
+    FastImageBlur(float radius, ImageView.ScaleType scaleType, float density) {
         this.radius = radius;
         this.scaleType = scaleType;
+        this.density = scaleType == ImageView.ScaleType.CENTER_INSIDE || scaleType == ImageView.ScaleType.CENTER
+                ? density
+                : 1;
     }
 
     @Override
@@ -80,7 +87,9 @@ final class FastImageBlur extends BitmapTransformation {
             case FIT_XY:
                 return (float) Math.sqrt(x * y);
             case CENTER_INSIDE:
-                return Math.min(Math.min(x, y), 1);
+                return Math.min(Math.min(x, y), density);
+            case CENTER:
+                return density;
             default:
                 return 1;
         }
@@ -197,17 +206,21 @@ final class FastImageBlur extends BitmapTransformation {
     public boolean equals(Object o) {
         return o instanceof FastImageBlur
                 && ((FastImageBlur) o).radius == radius
-                && ((FastImageBlur) o).scaleType == scaleType;
+                && ((FastImageBlur) o).scaleType == scaleType
+                && ((FastImageBlur) o).density == density;
     }
 
     @Override
     public int hashCode() {
-        return ID.hashCode() * 31 + Float.floatToIntBits(radius) * 31 + (scaleType == null ? 0 : scaleType.ordinal());
+        return (ID.hashCode() * 31 + Float.floatToIntBits(radius) * 31 + (scaleType == null ? 0 : scaleType.ordinal())) * 31
+                + Float.floatToIntBits(density);
     }
 
     @Override
     public void updateDiskCacheKey(@NonNull MessageDigest messageDigest) {
         messageDigest.update(ID_BYTES);
-        messageDigest.update((radius + "," + scaleType).getBytes(Charset.forName("UTF-8")));
+        String key = radius + "," + scaleType;
+        if (density != 1) key += "," + density;
+        messageDigest.update(key.getBytes(Charset.forName("UTF-8")));
     }
 }

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

@@ -82,6 +82,8 @@ public class FastImageRequestListener implements RequestListener<Drawable> {
         boolean local = !(model instanceof FastImageUrl);
         int[] size = FastImageSourceSize.get(resource, model, local,
                 dataSource == DataSource.RESOURCE_DISK_CACHE);
+        // Before the view shows it (the target does once this returns).
+        view.onImageSize(size);
         if (size != null) {
             sendLoad(view, size);
             return false;
@@ -92,7 +94,9 @@ public class FastImageRequestListener implements RequestListener<Drawable> {
         FastImageSourceSize.readLocal(view.getContext(), source, resource, model, new FastImageSourceSize.Callback() {
             @Override
             public void onSize(int[] size) {
-                if (target.getRequest() == request) sendLoad(view, size);
+                if (target.getRequest() != request) return;
+                view.onImageSize(size);
+                sendLoad(view, size);
             }
         });
         return false;

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

@@ -128,6 +128,8 @@ final class FastImageSourceSize {
     private static DownsampleStrategy strategy(@Nullable ImageView.ScaleType scaleType) {
         if (scaleType == null) return DownsampleStrategy.DEFAULT;
         switch (scaleType) {
+            case CENTER:
+                return FULL_SIZE;
             case CENTER_CROP:
                 return DownsampleStrategy.CENTER_OUTSIDE;
             case CENTER_INSIDE:
@@ -142,6 +144,26 @@ final class FastImageSourceSize {
         }
     }
 
+    // At the image's own size (objectFit none shows it at that size, whatever
+    // the view's), or scaled down to at most MAX_PIXELS pixels, which a
+    // bitmap can be drawn at (Android won't draw one over 100 MB).
+    static final DownsampleStrategy FULL_SIZE = new FullSize();
+
+    private static final float MAX_PIXELS = 4096f * 4096f;
+
+    private static final class FullSize extends DownsampleStrategy {
+        @Override
+        public float getScaleFactor(int sourceWidth, int sourceHeight, int requestedWidth, int requestedHeight) {
+            float pixels = (float) sourceWidth * sourceHeight;
+            return pixels > MAX_PIXELS ? (float) Math.sqrt(MAX_PIXELS / pixels) : 1;
+        }
+
+        @Override
+        public SampleSizeRounding getSampleSizeRounding(int sourceWidth, int sourceHeight, int requestedWidth, int requestedHeight) {
+            return SampleSizeRounding.QUALITY;
+        }
+    }
+
     // The image's size, or null when it has to be read from a local image's
     // header first (see readLocal).
     @Nullable

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

@@ -6,6 +6,7 @@ import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
 import com.bumptech.glide.Registry;
+import com.bumptech.glide.load.Option;
 import com.bumptech.glide.load.Options;
 import com.bumptech.glide.load.ResourceDecoder;
 import com.bumptech.glide.load.engine.Resource;
@@ -17,6 +18,7 @@ import java.io.IOException;
 import java.io.InputStream;
 import java.nio.ByteBuffer;
 import java.nio.charset.StandardCharsets;
+import java.security.MessageDigest;
 import java.util.Locale;
 
 // SVG images (static), drawn with AndroidSVG, which FastImage includes
@@ -36,6 +38,31 @@ final class FastImageSvg {
     @Nullable
     private static Boolean available;
 
+    // objectFit scale-down and none show an image at its own size in dp
+    // (FastImageViewWithUrl.updateImageMatrix): an SVG is drawn at that size,
+    // the screen's pixels per dp (DENSITY) times its own, rather than at its
+    // size in pixels and then enlarged. With scale-down (FITS), no larger than
+    // the view. Part of the disk cache key, since the bitmap's size depends on
+    // them. Unset (0) for the other fits, which draw it for the view's size.
+    static final Option<Float> DENSITY = Option.disk(
+            "com.dylanvann.fastimage.FastImageSvg.Density", 0f,
+            new Option.CacheKeyUpdater<Float>() {
+                @Override
+                public void update(@NonNull byte[] keyBytes, @NonNull Float value, @NonNull MessageDigest messageDigest) {
+                    messageDigest.update(keyBytes);
+                    messageDigest.update(ByteBuffer.allocate(4).putFloat(value).array());
+                }
+            });
+    static final Option<Boolean> FITS = Option.disk(
+            "com.dylanvann.fastimage.FastImageSvg.Fits", false,
+            new Option.CacheKeyUpdater<Boolean>() {
+                @Override
+                public void update(@NonNull byte[] keyBytes, @NonNull Boolean value, @NonNull MessageDigest messageDigest) {
+                    messageDigest.update(keyBytes);
+                    messageDigest.update((byte) (value ? 1 : 0));
+                }
+            });
+
     private FastImageSvg() {
     }
 

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

@@ -70,6 +70,16 @@ final class FastImageSvgRenderer {
         float scale = strategy != null
                 ? strategy.getScaleFactor(sourceWidth, sourceHeight, targetWidth, targetHeight)
                 : 1f;
+        // objectFit scale-down and none: at its own size in dp (see
+        // FastImageSvg.DENSITY), and for scale-down no larger than the view.
+        Float density = options.get(FastImageSvg.DENSITY);
+        if (density != null && density > 0) {
+            scale = density;
+            if (Boolean.TRUE.equals(options.get(FastImageSvg.FITS))) {
+                scale = Math.min(scale, Math.min(
+                        targetWidth / (float) sourceWidth, targetHeight / (float) sourceHeight));
+            }
+        }
         if (Float.isNaN(scale) || Float.isInfinite(scale) || scale <= 0) scale = 1f;
         float pixels = sourceWidth * scale * sourceHeight * scale;
         if (pixels > MAX_PIXELS) scale *= (float) Math.sqrt(MAX_PIXELS / pixels);

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

@@ -49,6 +49,11 @@ class FastImageViewConverter {
                 put("cover", ScaleType.CENTER_CROP);
                 put("stretch", ScaleType.FIT_XY);
                 put("center", ScaleType.CENTER_INSIDE);
+                // objectFit="scale-down": as center, laid out in dp (see
+                // FastImageViewWithUrl.setResizeMode).
+                put("scale-down", ScaleType.CENTER_INSIDE);
+                // objectFit="none": the image at its own size, centered.
+                put("none", ScaleType.CENTER);
             }};
 
     // Whether the source has a uri to load (not null, missing or blank).

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

@@ -184,7 +184,7 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> {
         boolean repeat = "repeat".equals(resizeMode);
         final FastImageViewWithUrl.ScaleType scaleType =
                 repeat ? FastImageViewWithUrl.ScaleType.FIT_XY : FastImageViewConverter.getScaleType(resizeMode);
-        view.setResizeMode(scaleType, repeat);
+        view.setResizeMode(scaleType, repeat, "center".equals(resizeMode));
     }
 
     @Override

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

@@ -9,6 +9,7 @@ import android.annotation.SuppressLint;
 import android.content.Context;
 import android.graphics.Bitmap;
 import android.graphics.Canvas;
+import android.graphics.Matrix;
 import android.graphics.Paint;
 import android.graphics.PorterDuff;
 import android.graphics.PorterDuffXfermode;
@@ -60,6 +61,9 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     public FastImageViewWithUrl(Context context, @Nullable RequestManager requestManager) {
         super(context);
         this.requestManager = requestManager;
+        // An image larger than the view (objectFit none) is cropped to it,
+        // also when the view doesn't clip its content (overflow visible).
+        setCropToPadding(true);
     }
 
     // FastImage sends "none" when it has pointerEvents="box-none" (the image
@@ -609,19 +613,134 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     // as React Native's Image does. The view fills with it (FIT_XY).
     private boolean mRepeat = false;
 
+    // The scale type for resizeMode, which Glide decodes the image for and the
+    // blur scales with. For scale-down (CENTER_INSIDE) and none (CENTER) the
+    // view is MATRIX: it lays the image out itself (see updateImageMatrix).
+    // Starts as ImageView's.
+    private ScaleType mResizeScaleType = ScaleType.FIT_CENTER;
+
+    // resizeMode center: CENTER_INSIDE as ImageView draws it, an image smaller
+    // than the view at its size in pixels on the screen (scale-down: in dp).
+    private boolean mInPixels = false;
+
+    // The scale type the image on screen is laid out for (see
+    // applyResizeMode).
+    private ScaleType mLayoutScaleType = ScaleType.FIT_CENTER;
+
     // Glide crops or fits the bitmap for the scale type when it loads, so a
     // new resizeMode needs a reload to take effect (#762).
-    public void setResizeMode(ScaleType scaleType, boolean repeat) {
-        if (scaleType == getScaleType() && repeat == mRepeat) return;
-        setScaleType(scaleType);
+    public void setResizeMode(ScaleType scaleType, boolean repeat, boolean inPixels) {
+        if (scaleType == mResizeScaleType && repeat == mRepeat && inPixels == mInPixels) return;
+        mResizeScaleType = scaleType;
+        mInPixels = inPixels;
         mRepeat = repeat;
         mNeedsReload = true;
+        // A loaded image on screen was cropped or fitted for the old scale
+        // type: it keeps its layout until the image for the new one is ready
+        // (onImageLoaded), or the load fails. Laid out for the new one, a
+        // cover crop would be stretched to the image's own size.
+        if (mShownRequest == null) applyResizeMode();
+    }
+
+    // Lays the view out for resizeMode.
+    private void applyResizeMode() {
+        mLayoutScaleType = mResizeScaleType;
+        setScaleType(!mInPixels && (mResizeScaleType == ScaleType.CENTER_INSIDE || mResizeScaleType == ScaleType.CENTER)
+                ? ScaleType.MATRIX
+                : mResizeScaleType);
+        updateImageMatrix();
     }
 
     // Repeats what the view shows (the loaded image, and defaultSource).
     @Override
     public void setImageDrawable(@Nullable Drawable drawable) {
         super.setImageDrawable(mRepeat ? tiled(drawable) : drawable);
+        updateImageMatrix();
+    }
+
+    @Override
+    protected boolean setFrame(int l, int t, int r, int b) {
+        boolean changed = super.setFrame(l, t, r, b);
+        updateImageMatrix();
+        return changed;
+    }
+
+    // The loaded image's own size in pixels (as onLoad has it), and its scale
+    // (a bundled image's, so it's its size in points; 1 for others, as on
+    // iOS), for scale-down and none. 0 until it's known.
+    private int mImageWidth = 0;
+    private int mImageHeight = 0;
+    private double mImageScale = 1;
+    // The loading source's scale.
+    private double mLoadingScale = 1;
+    @Nullable
+    private Matrix mImageMatrix;
+
+    // The loading image's own size, from FastImageRequestListener as it's
+    // ready (null until a local image's has been read).
+    void onImageSize(@Nullable int[] size) {
+        mImageWidth = size != null ? size[0] : 0;
+        mImageHeight = size != null ? size[1] : 0;
+        mImageScale = mLoadingScale;
+        updateImageMatrix();
+    }
+
+    // Pixels on screen per pixel of the loaded image at its own size: an image
+    // is its size in pixels in dp (a bundled one in points, its pixels divided
+    // by its scale), as on iOS.
+    private float imageDensity() {
+        return (float) (getResources().getDisplayMetrics().density / mImageScale);
+    }
+
+    // The same for the loading image.
+    private float loadingDensity() {
+        return (float) (getResources().getDisplayMetrics().density / mLoadingScale);
+    }
+
+    // scale-down: the image at its own size, centered, or scaled down
+    // uniformly to fit if that's larger than the view. Glide decodes it no
+    // larger than that (CenterInside), and it's drawn at this size. none: the
+    // image at its own size, centered, whatever its size (cropped by the view;
+    // Glide decodes it at its size). defaultSource (a resource) is already at
+    // its size on screen.
+    private void updateImageMatrix() {
+        if (getScaleType() != ScaleType.MATRIX) return;
+        Drawable drawable = getDrawable();
+        if (drawable == null) return;
+        int drawableWidth = drawable.getIntrinsicWidth();
+        int drawableHeight = drawable.getIntrinsicHeight();
+        float viewWidth = getWidth() - getPaddingLeft() - getPaddingRight();
+        float viewHeight = getHeight() - getPaddingTop() - getPaddingBottom();
+        if (mImageMatrix == null) mImageMatrix = new Matrix();
+        Matrix matrix = mImageMatrix;
+        if (drawableWidth <= 0 || drawableHeight <= 0 || viewWidth <= 0 || viewHeight <= 0) {
+            matrix.reset();
+            setImageMatrix(matrix);
+            return;
+        }
+        float width;
+        float height;
+        if (drawable == mDefaultSource) {
+            width = drawableWidth;
+            height = drawableHeight;
+        } else if (mImageWidth > 0 && mImageHeight > 0) {
+            width = mImageWidth * imageDensity();
+            height = mImageHeight * imageDensity();
+        } else {
+            // Its size isn't known yet (a local image's is read after it
+            // loads): Glide decoded it at its size unless it's larger than
+            // the view, which shows it scaled down to fit either way.
+            width = drawableWidth * imageDensity();
+            height = drawableHeight * imageDensity();
+        }
+        float fit = mLayoutScaleType == ScaleType.CENTER
+                ? 1
+                : Math.min(1, Math.min(viewWidth / width, viewHeight / height));
+        width *= fit;
+        height *= fit;
+        matrix.setScale(width / drawableWidth, height / drawableHeight);
+        matrix.postTranslate(Math.round((viewWidth - width) / 2), Math.round((viewHeight - height) / 2));
+        setImageMatrix(matrix);
     }
 
     @Nullable
@@ -668,7 +787,9 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     // 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, mRepeat ? null : getScaleType()) : null;
+        FastImageBlur blur = mBlurRadius > 0
+                ? new FastImageBlur(mBlurRadius, mRepeat ? null : mResizeScaleType, mInPixels ? 1 : loadingDensity())
+                : null;
         RequestOptions options;
         if (mRepeat) {
             // Decoded at its own size, or scaled down to fit the view if it's
@@ -690,7 +811,15 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             if (blur != null) options = options.optionalTransform(blur);
         } else {
             options = FastImageSourceSize.scaleTypeOptions(
-                    getScaleType(), FastImageSourceSize.capture(getScaleType(), model), blur);
+                    mResizeScaleType, FastImageSourceSize.capture(mResizeScaleType, model), blur);
+            boolean ownSize = mResizeScaleType == ScaleType.CENTER_INSIDE || mResizeScaleType == ScaleType.CENTER;
+            // scale-down and none show it at its own size in dp: an SVG is
+            // drawn at that size, so it's sharp (not with a blur, which hides
+            // the difference).
+            if (ownSize && !mInPixels && blur == null) {
+                options = options.set(FastImageSvg.DENSITY, loadingDensity())
+                        .set(FastImageSvg.FITS, mResizeScaleType == ScaleType.CENTER_INSIDE);
+            }
         }
         return blur != null ? options.dontAnimate() : options;
     }
@@ -708,12 +837,13 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     // 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
-    // flashing blank (#747). This is Glide's safe way to do that: the previous
-    // bitmap can't be kept in the view itself, since Glide reuses it once its
-    // request is cleared.
+    // The request for the image the view shows (from when it has loaded until
+    // another image or defaultSource replaces it), 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 flashing blank
+    // (#747), also if the source changes again meanwhile. This is Glide's safe
+    // way to do that: the previous bitmap can't be kept in the view itself,
+    // since Glide reuses it once its request is cleared.
     @Nullable
     private RequestBuilder<Drawable> mShownRequest;
     @Nullable
@@ -751,6 +881,8 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     void onImageLoaded() {
         mLoadEnded = true;
         endProgress();
+        // Before the view shows it (the target does once this returns).
+        applyResizeMode();
         mShownRequest = mLoadingRequest;
         mShownWidth = mLoadingWidth;
         mShownHeight = mLoadingHeight;
@@ -905,6 +1037,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     void onImageFailed(boolean hadThumbnail) {
         mLoadEnded = true;
         endProgress();
+        applyResizeMode();
         mShownRequest = null;
         if (!hadThumbnail) return;
         final int load = mLoadCount;
@@ -961,15 +1094,17 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         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.
+        // shows at once, and a next image that fades starts from it. The
+        // image on screen stays the shown one while the next loads (as its
+        // thumbnail, or a copy), so a change before then keeps it too.
         RequestBuilder<Drawable> shownRequest = mShownRequest;
-        mShownRequest = null;
         mLoadingRequest = null;
         mBaseRequest = null;
         mModel = null;
 
         // Nothing to show.
         if (mSource == null && mDefaultSource == null) {
+            mShownRequest = null;
             // Cancel existing requests.
             clearView(requestManager);
 
@@ -980,6 +1115,9 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             return;
         }
 
+        mLoadingScale = mSource != null && mSource.hasKey("__packager_asset")
+                ? Math.max(number(mSource, "scale", 1), 0.01)
+                : 1;
         //final GlideUrl glideUrl = FastImageViewConverter.getGlideUrl(view.getContext(), mSource);
         final FastImageSource imageSource = FastImageViewConverter.hasUri(mSource)
                 ? FastImageViewConverter.getImageSource(getContext(), mSource)
@@ -995,6 +1133,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             FastImageEvents.send(this, REACT_ON_ERROR_EVENT, event);
             FastImageEvents.sendLoadEnd(this, error);
 
+            mShownRequest = null;
             // Cancel existing requests.
             clearView(requestManager);
 
@@ -1053,7 +1192,11 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             RequestBuilder<Drawable> builder = base.clone().apply(renderingOptions(model));
             RequestBuilder<Drawable> request = builder.clone();
 
-            if (model == null) meanwhile = null;
+            // Only defaultSource: it replaces the image.
+            if (model == null) {
+                meanwhile = null;
+                mShownRequest = 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