react-native-fast-image 9.2.2 → 9.3.1

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

package/dist/index.cjs.js

@@ -46,30 +46,61 @@ const cacheControl = {
 	cacheOnly: "cacheOnly"
 };
 //#endregion
-//#region src/index.tsx
-const resolveDefaultSource = (defaultSource) => {
-	if (!defaultSource) return null;
-	if (react_native.Platform.OS === "android") {
-		const resolved = react_native.Image.resolveAssetSource(defaultSource);
-		if (resolved) return resolved.uri;
-		return null;
-	}
-	return defaultSource;
-};
-function tintColorFromStyle(style) {
+//#region src/objectFit.ts
+function fromStyle(style, key) {
 	if (Array.isArray(style)) {
 		for (let i = style.length - 1; i >= 0; i--) {
-			const found = tintColorFromStyle(style[i]);
+			const found = fromStyle(style[i], key);
 			if (found !== void 0) return found;
 		}
 		return;
 	}
 	if (typeof style === "number") {
 		const flattened = react_native.StyleSheet.flatten(style);
-		return flattened ? flattened.tintColor : void 0;
+		return flattened ? flattened[key] : void 0;
 	}
-	return style && typeof style === "object" ? style.tintColor : void 0;
+	return style && typeof style === "object" ? style[key] : void 0;
+}
+const RESIZE_MODE_FIT = {
+	contain: "contain",
+	cover: "cover",
+	stretch: "fill",
+	center: "center",
+	repeat: "repeat"
+};
+const FITS = {
+	fill: true,
+	contain: true,
+	cover: true,
+	none: true,
+	"scale-down": true
+};
+function resolveObjectFit(objectFit, style, resizeMode) {
+	var _RESIZE_MODE_FIT$resi;
+	const fit = objectFit != null ? objectFit : fromStyle(style, "objectFit");
+	if (fit && FITS[fit] === true) return fit;
+	return (_RESIZE_MODE_FIT$resi = RESIZE_MODE_FIT[resizeMode]) !== null && _RESIZE_MODE_FIT$resi !== void 0 ? _RESIZE_MODE_FIT$resi : "cover";
 }
+//#endregion
+//#region src/index.tsx
+const resolveDefaultSource = (defaultSource) => {
+	if (!defaultSource) return null;
+	if (react_native.Platform.OS === "android") {
+		const resolved = react_native.Image.resolveAssetSource(defaultSource);
+		if (resolved) return resolved.uri;
+		return null;
+	}
+	return defaultSource;
+};
+const NATIVE_RESIZE_MODE = {
+	fill: "stretch",
+	contain: "contain",
+	cover: "cover",
+	none: "none",
+	"scale-down": "scale-down",
+	center: "center",
+	repeat: "repeat"
+};
 function loopCount(loop) {
 	if (loop === void 0) return -1;
 	if (loop === true) return 0;
@@ -111,7 +142,7 @@ 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, transition, forwardedRef, onLayout, pointerEvents, hitSlop, onStartShouldSetResponder, onStartShouldSetResponderCapture, onMoveShouldSetResponder, onMoveShouldSetResponderCapture, onResponderGrant, onResponderReject, onResponderStart, onResponderMove, onResponderEnd, onResponderRelease, onResponderTerminationRequest, onResponderTerminate, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, onTouchEndCapture, ...viewProps }) {
+function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, fallback, children, objectFit, resizeMode = "cover", loop, transition, forwardedRef, onLayout, pointerEvents, hitSlop, onStartShouldSetResponder, onStartShouldSetResponderCapture, onMoveShouldSetResponder, onMoveShouldSetResponderCapture, onResponderGrant, onResponderReject, onResponderStart, onResponderMove, onResponderEnd, onResponderRelease, onResponderTerminationRequest, onResponderTerminate, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, onTouchEndCapture, ...viewProps }) {
 	const { onClick, ...props } = viewProps;
 	const fallbackResult = (0, react.useRef)(void 0);
 	const wrapperProps = {
@@ -141,7 +172,8 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		...props,
 		pointerEvents: pointerEvents === "box-none" ? "none" : void 0
 	};
-	const resolvedTintColor = tintColor != null ? tintColor : tintColorFromStyle(style);
+	const resolvedTintColor = tintColor != null ? tintColor : fromStyle(style, "tintColor");
+	const mode = NATIVE_RESIZE_MODE[resolveObjectFit(objectFit, style, resizeMode)];
 	if (fallback) {
 		const cleanedSource = typeof source === "number" ? source : Array.isArray(source) ? source.map(withoutCache) : withoutCache(source);
 		const resolvedSource = react_native.Image.resolveAssetSource(cleanedSource);
@@ -179,7 +211,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 					error: "Failed to load the image"
 				});
 			}),
-			resizeMode
+			resizeMode: mode === "none" || mode === "scale-down" ? "center" : mode
 		}), children);
 	}
 	const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
@@ -205,7 +237,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		onFastImageLoad: onLoad,
 		onFastImageError: onError,
 		onFastImageLoadEnd: onLoadEnd && ((event) => onLoadEnd(loadResult(event.nativeEvent))),
-		resizeMode
+		resizeMode: mode
 	}), children);
 }
 const FastImageMemo = (0, react.memo)(FastImageBase);

package/dist/index.cjs.js.flow

@@ -49,6 +49,7 @@ export type CacheControl = $ReadOnly<{|
 |}>
 
 export type ResizeModes = $Values<ResizeMode>
+export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
 export type Priorities = $Values<Priority>
 export type CacheControls = $Values<CacheControl>
 
@@ -123,6 +124,8 @@ export type FastImageProps = $ReadOnly<{|
     defaultSource?: ?number,
 
     tintColor?: number | string,
+    objectFit?: ?ObjectFit,
+    // Deprecated: use objectFit.
     resizeMode?: ?ResizeModes,
     fallback?: ?boolean,
     recyclingKey?: ?string,