react-native-fast-image 9.3.6 → 10.0.0

package/android/src/main/java/com/{dylanvann/fastimage → fastimage}/FastImageViewWithUrl.java

@@ -1,6 +1,6 @@
-package com.dylanvann.fastimage;
+package com.fastimage;
 
-import static com.dylanvann.fastimage.FastImageRequestListener.REACT_ON_ERROR_EVENT;
+import static com.fastimage.FastImageRequestListener.REACT_ON_ERROR_EVENT;
 
 import android.animation.Animator;
 import android.animation.AnimatorListenerAdapter;
@@ -14,8 +14,8 @@ import android.graphics.Paint;
 import android.graphics.PixelFormat;
 import android.graphics.PorterDuff;
 import android.graphics.PorterDuffXfermode;
+import android.graphics.Rect;
 import android.graphics.RectF;
-import android.graphics.Shader;
 import android.graphics.drawable.AnimatedImageDrawable;
 import android.graphics.drawable.BitmapDrawable;
 import android.graphics.drawable.Drawable;
@@ -28,7 +28,6 @@ import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.annotation.RequiresApi;
 import androidx.appcompat.widget.AppCompatImageView;
-import androidx.core.view.ViewCompat;
 
 import com.bumptech.glide.GenericTransitionOptions;
 import com.bumptech.glide.RequestBuilder;
@@ -49,12 +48,17 @@ import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
+import com.facebook.react.modules.i18nmanager.I18nUtil;
+import com.facebook.react.touch.ReactHitSlopView;
+import com.facebook.react.uimanager.BackgroundStyleApplicator;
+import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.PointerEvents;
 import com.facebook.react.uimanager.ReactPointerEventsView;
+import com.facebook.react.uimanager.style.LogicalEdge;
 
 import javax.annotation.Nonnull;
 
-class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEventsView {
+class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEventsView, ReactHitSlopView {
     private boolean mNeedsReload = false;
     private ReadableMap mSource = null;
     private Drawable mDefaultSource = null;
@@ -66,16 +70,93 @@ 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).
+        // Borders inset the image: its padding is their widths (see
+        // updateBorderPadding). An image larger than that (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
-    // is part of the box, which doesn't take touches). React Native's touch
-    // handling only reads pointerEvents from a ReactPointerEventsView.
-    private PointerEvents mPointerEvents = PointerEvents.AUTO;
+    // The image fills the view inside its borders, and padding doesn't inset
+    // it, as on iOS: the view's padding is the border widths, resolved as
+    // React Native draws the border (its BorderInsets, which isn't public).
+    // React Native passes the layout's padding and borders together, so
+    // FastImageViewManager.setPadding doesn't use them. Called when a border
+    // width or the layout direction changes.
+    void updateBorderPadding() {
+        LogicalEdge left = LogicalEdge.START;
+        LogicalEdge physicalLeft = LogicalEdge.LEFT;
+        LogicalEdge right = LogicalEdge.END;
+        LogicalEdge physicalRight = LogicalEdge.RIGHT;
+        if (getLayoutDirection() == LAYOUT_DIRECTION_RTL) {
+            left = LogicalEdge.END;
+            right = LogicalEdge.START;
+            if (I18nUtil.getInstance().doLeftAndRightSwapInRTL(getContext())) {
+                physicalLeft = LogicalEdge.RIGHT;
+                physicalRight = LogicalEdge.LEFT;
+            }
+        }
+        int paddingLeft = borderWidth(left, physicalLeft, LogicalEdge.HORIZONTAL);
+        int paddingTop = borderWidth(LogicalEdge.BLOCK_START, LogicalEdge.TOP, LogicalEdge.BLOCK, LogicalEdge.VERTICAL);
+        int paddingRight = borderWidth(right, physicalRight, LogicalEdge.HORIZONTAL);
+        int paddingBottom = borderWidth(LogicalEdge.BLOCK_END, LogicalEdge.BOTTOM, LogicalEdge.BLOCK, LogicalEdge.VERTICAL);
+        // Compared with the padding last set here: getPaddingLeft() and the
+        // others resolve the padding, which calls onRtlPropertiesChanged.
+        if (paddingLeft == mBorderPaddingLeft && paddingTop == mBorderPaddingTop
+                && paddingRight == mBorderPaddingRight && paddingBottom == mBorderPaddingBottom) {
+            return;
+        }
+        mBorderPaddingLeft = paddingLeft;
+        mBorderPaddingTop = paddingTop;
+        mBorderPaddingRight = paddingRight;
+        mBorderPaddingBottom = paddingBottom;
+        setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom);
+        // The image was loaded for the box inside the borders: for the new
+        // one, switch to the source that fits it (several sources) or load it
+        // again, as when the view's size changes (the view's own size
+        // doesn't).
+        if (!switchSourceIfResized()) reloadIfResized();
+    }
+
+    // The padding updateBorderPadding last set. No initial values: it runs
+    // during View's constructor, before field initializers would.
+    private int mBorderPaddingLeft;
+    private int mBorderPaddingTop;
+    private int mBorderPaddingRight;
+    private int mBorderPaddingBottom;
+
+    // The first of these edges' border width that's set, else the one for
+    // every edge, in pixels (rounded down, as React Native's layout does).
+    private int borderWidth(LogicalEdge... edges) {
+        Float width = null;
+        for (LogicalEdge edge : edges) {
+            width = BackgroundStyleApplicator.getBorderWidth(this, edge);
+            if (width != null) break;
+        }
+        if (width == null) width = BackgroundStyleApplicator.getBorderWidth(this, LogicalEdge.ALL);
+        return width == null ? 0 : (int) Math.floor(PixelUtil.toPixelFromDIP(width));
+    }
 
+    @Override
+    public void onRtlPropertiesChanged(int layoutDirection) {
+        super.onRtlPropertiesChanged(layoutDirection);
+        updateBorderPadding();
+    }
+
+    // The View style props FastImage handles itself (FastImageViewManager):
+    // it's a single native view, so they're the image's.
+    private PointerEvents mPointerEvents = PointerEvents.AUTO;
+    @Nullable
+    private Rect mHitSlopRect;
+    // overflow: hidden (FastImage's default) or scroll clip the image to the
+    // padding box, with the border radius; visible only to the view.
+    private boolean mOverflowVisible = false;
+    // backfaceVisibility, as React Native's View does it: a view turned away
+    // (rotateX or rotateY past 90°) is hidden with an opacity of 0.
+    private boolean mBackfaceVisible = true;
+    private float mBackfaceOpacity = 1f;
+
+    @NonNull
     @Override
     public PointerEvents getPointerEvents() {
         return mPointerEvents;
@@ -85,6 +166,50 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         mPointerEvents = pointerEvents;
     }
 
+    @Nullable
+    @Override
+    public Rect getHitSlopRect() {
+        return mHitSlopRect;
+    }
+
+    void setHitSlopRect(@Nullable Rect hitSlopRect) {
+        mHitSlopRect = hitSlopRect;
+    }
+
+    void setOverflow(@Nullable String overflow) {
+        mOverflowVisible = "visible".equals(overflow);
+        invalidate();
+    }
+
+    void setOpacityIfPossible(float opacity) {
+        mBackfaceOpacity = opacity;
+        setBackfaceVisibilityDependantOpacity();
+    }
+
+    void setBackfaceVisibility(String backfaceVisibility) {
+        mBackfaceVisible = "visible".equals(backfaceVisibility);
+        setBackfaceVisibilityDependantOpacity();
+    }
+
+    void setBackfaceVisibilityDependantOpacity() {
+        if (mBackfaceVisible) {
+            setAlpha(mBackfaceOpacity);
+            return;
+        }
+        float rotationX = getRotationX();
+        float rotationY = getRotationY();
+        boolean frontFaceVisible =
+                rotationX >= -90f && rotationX < 90f && rotationY >= -90f && rotationY < 90f;
+        setAlpha(frontFaceVisible ? mBackfaceOpacity : 0f);
+    }
+
+    // As React Native's Image: opacity applies to the view and its border and
+    // background as one, without an offscreen layer.
+    @Override
+    public boolean hasOverlappingRendering() {
+        return false;
+    }
+
     public void setSource(@Nullable ReadableMap source) {
         mNeedsReload = true;
         mPropSource = source;
@@ -119,13 +244,24 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         if (mSources == null) mSource = mPropSource;
     }
 
+    // The box the image is drawn in: the view inside its padding, which is the
+    // border widths (see updateBorderPadding).
+    private int contentWidth() {
+        return getWidth() - getPaddingLeft() - getPaddingRight();
+    }
+
+    private int contentHeight() {
+        return getHeight() - getPaddingTop() - getPaddingBottom();
+    }
+
     // Of several sources, the index of the one whose size in pixels (width ×
-    // height × scale²) is closest to the view's (by pixel count), or of the
-    // largest while the view has no size (e.g. one sized from onLoad).
+    // height × scale²) is closest to the box the image is drawn in (by pixel
+    // count), or of the largest while it has no size (e.g. a view sized from
+    // onLoad).
     private int sourceIndexForSize() {
         ReadableArray sources = mSources;
         if (sources == null) return -1;
-        double viewPixels = (double) getWidth() * getHeight();
+        double viewPixels = (double) Math.max(0, contentWidth()) * Math.max(0, contentHeight());
         int best = -1;
         double bestFit = Double.MAX_VALUE;
         for (int i = 0; i < sources.size(); i++) {
@@ -152,10 +288,11 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         return map.hasKey(key) && !map.isNull(key) ? map.getDouble(key) : fallback;
     }
 
-    // Several sources: another one fits the view's new size better. Loads it
-    // (after layout), keeping the image showing until then, without a fade.
+    // Several sources: another one fits the view's new size (or the box inside
+    // its new borders) better. Loads it (after layout), keeping the image
+    // showing until then, without a fade.
     private boolean switchSourceIfResized() {
-        if (mSources == null || mNeedsReload || mWaitsForSize || getWidth() <= 0 || getHeight() <= 0
+        if (mSources == null || mNeedsReload || mWaitsForSize || contentWidth() <= 0 || contentHeight() <= 0
                 || mManager == null || sourceIndexForSize() == mSourceIndex) {
             return false;
         }
@@ -175,12 +312,12 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         mDefaultSource = source;
     }
 
-    // Legacy architecture only (see FastImageShadowNode): the view's layout is
-    // 0×0 at its parent's origin, which React Native never applies. Lay it out
-    // at that size, as the New Architecture does, so Glide stops waiting for a
-    // size and loads it (#865).
-    void onZeroLayout() {
-        if (!ViewCompat.isLaidOut(this)) layout(0, 0, 0, 0);
+    // The events JS has a handler for (the handledEvents prop): the view only
+    // sends those (see FastImageEvents).
+    int handledEvents;
+
+    boolean handles(int events) {
+        return (handledEvents & events) != 0;
     }
 
     // How many times GIFs play: -1 for the file's own loop count (the `loop`
@@ -215,13 +352,11 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
 
     // Pauses GIFs on the frame they're showing (the view's own animation).
     private boolean mPaused = false;
-    // Progress (see FastImageViewManager.onDownloadProgress): whether the image
-    // has an onProgress, the url its current load downloads (null for a local
-    // image, and once the load has ended), the progress key the view gets
-    // progress for (the loading url's, while it has an onProgress), the last
-    // step downloads reported before the load started, and the fraction the
-    // load has had.
-    private boolean mTrackProgress = false;
+    // Progress (see FastImageViewManager.onDownloadProgress): the url its
+    // current load downloads (null for a local image, and once the load has
+    // ended), the progress key the view gets progress for (the loading url's,
+    // while it has an onProgress), the last step downloads reported before the
+    // load started, and the fraction the load has had.
     @Nullable
     private GlideUrl mLoadingUrl;
     @Nullable
@@ -232,8 +367,8 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     // posted to itself don't load anything, or track progress, any more.
     private boolean mDropped = false;
 
-    void setTrackProgress(boolean trackProgress) {
-        mTrackProgress = trackProgress;
+    void setHandledEvents(int events) {
+        handledEvents = events;
         updateProgressTracking();
     }
 
@@ -253,7 +388,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
 
     // Whether a step a download reported is for the current load, and doesn't
     // go back: one reported before it started is for an earlier load, e.g. of
-    // the same url before resizeMode changed, posted while that load still
+    // the same url before objectFit changed, posted while that load still
     // ran, and one below what the load has had is from another download of
     // the key (e.g. one that started after the first had ended).
     boolean takesProgress(long step, long loaded, long total) {
@@ -265,7 +400,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     }
 
     private void updateProgressTracking() {
-        String key = mTrackProgress && mLoadingUrl != null && !mDropped
+        String key = handles(FastImageEvents.PROGRESS) && mLoadingUrl != null && !mDropped
                 ? FastImageSharedDownloads.key(mLoadingUrl)
                 : null;
         if (key == null ? mTrackedKey == null : key.equals(mTrackedKey)) return;
@@ -462,9 +597,26 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         canvas.restoreToCount(count);
     }
 
-    @SuppressWarnings("deprecation")
     @Override
     protected void onDraw(Canvas canvas) {
+        // Clipped as React Native's Image (and the View it used to be in): to
+        // the padding box, with the border radius, unless overflow is visible.
+        int saved = canvas.save();
+        if (mOverflowVisible) {
+            Rect bounds = new Rect();
+            getDrawingRect(bounds);
+            canvas.clipRect(bounds);
+        } else {
+            BackgroundStyleApplicator.clipToPaddingBox(this, canvas);
+        }
+        try {
+            drawImage(canvas);
+        } finally {
+            canvas.restoreToCount(saved);
+        }
+    }
+
+    private void drawImage(Canvas canvas) {
         if (mFade == null) {
             super.onDraw(canvas);
             return;
@@ -475,15 +627,14 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         if (drawFadeWithoutLayers(canvas, alpha)) return;
         if (mFadeFrom == null && mFadeFromDrawable == null) {
             // Fading in over nothing: one layer.
-            int count = canvas.saveLayerAlpha(0, 0, width, height, alpha, Canvas.ALL_SAVE_FLAG);
+            int count = canvas.saveLayerAlpha(0, 0, width, height, alpha);
             super.onDraw(canvas);
             canvas.restoreToCount(count);
             return;
         }
         // Two layers, which add up to the cross-dissolve whatever the image's
         // transparency.
-        // Canvas.ALL_SAVE_FLAG: the saveLayer without flags is API 21+.
-        int count = canvas.saveLayer(0, 0, width, height, null, Canvas.ALL_SAVE_FLAG);
+        int count = canvas.saveLayer(0, 0, width, height, null);
         if (mFadeFromDrawable != null) {
             drawFadeFrom(canvas, mFadeFromDrawable, 255 - alpha);
         } else {
@@ -491,7 +642,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             canvas.drawBitmap(mFadeFrom, 0, 0, mFadeFromPaint);
         }
         mFadeInPaint.setAlpha(alpha);
-        canvas.saveLayer(0, 0, width, height, mFadeInPaint, Canvas.ALL_SAVE_FLAG);
+        canvas.saveLayer(0, 0, width, height, mFadeInPaint);
         super.onDraw(canvas);
         canvas.restoreToCount(count);
     }
@@ -543,9 +694,8 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     // an opacity can change during it.
     // Not the transition alpha, which only Android's Transition fades
     // (android.transition.Fade) set: getTransitionAlpha is public from API 29
-    // only (hidden on Android 5 to 9, and the library compiles against 28
-    // when an app doesn't set compileSdkVersion). React Native's opacity,
-    // Animated, LayoutAnimation and Reanimated set the view's alpha, and
+    // only (hidden on Android 7 to 9). React Native's opacity, Animated,
+    // LayoutAnimation and Reanimated set the view's alpha, and
     // react-native-screens' fragment animations run on a container with a
     // layer of its own.
     private boolean drawnWithAlpha() {
@@ -760,59 +910,129 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         animated.setRepeatCount(mLoopCount == 0 ? AnimatedImageDrawable.REPEAT_INFINITE : mLoopCount - 1);
     }
 
-    // resizeMode repeat: the image (a GIF's first frame) repeated from the
-    // top-left at its own size, scaled down to fit the view if it's larger,
-    // 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
+    // The scale type for objectFit, which Glide decodes the image for and the
+    // blur scales with. For scale-down (CENTER_INSIDE) and none (CENTER), and
+    // contain and cover with an objectPosition other than the 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;
+    private ScaleType mFitScaleType = ScaleType.FIT_CENTER;
 
-    // The scale type the image on screen is laid out for (see
-    // applyResizeMode).
+    // The scale type the image on screen is laid out for, and whether it was
+    // downsampled or pixelated (see applyObjectFit).
     private ScaleType mLayoutScaleType = ScaleType.FIT_CENTER;
+    private boolean mLayoutDownsampled = true;
+    private boolean mLayoutPixelated = false;
 
     // 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, boolean inPixels) {
-        if (scaleType == mResizeScaleType && repeat == mRepeat && inPixels == mInPixels) return;
-        mResizeScaleType = scaleType;
-        mInPixels = inPixels;
-        mRepeat = repeat;
-        mNeedsReload = true;
+    // new objectFit needs a reload to take effect (#762): the image that's
+    // showing, loaded again quietly (see reblur), as for a new blurRadius,
+    // without the load events, as on iOS.
+    public void setObjectFit(ScaleType scaleType) {
+        if (scaleType == mFitScaleType) return;
+        mFitScaleType = scaleType;
+        mFitChanged = 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();
+        if (mShownRequest == null) applyObjectFit();
+    }
+
+    // Lays the view out for objectFit.
+    private void applyObjectFit() {
+        mLayoutScaleType = mFitScaleType;
+        mLayoutDownsampled = mDownsample;
+        mLayoutPixelated = mPixelated;
+        updateScaleType();
+    }
+
+    // objectPosition: on each axis the image's left or top edge is at
+    // (view - image) * fraction + offset (offsets in pixels).
+    private float mPositionX = 0.5f;
+    private float mPositionXOffset = 0;
+    private float mPositionY = 0.5f;
+    private float mPositionYOffset = 0;
+
+    public void setObjectPositionX(float x) {
+        if (x == mPositionX) return;
+        mPositionX = x;
+        onPositionChanged();
+    }
+
+    public void setObjectPositionXOffset(float xOffset) {
+        if (xOffset == mPositionXOffset) return;
+        mPositionXOffset = xOffset;
+        onPositionChanged();
     }
 
-    // Lays the view out for resizeMode.
-    private void applyResizeMode() {
-        mLayoutScaleType = mResizeScaleType;
-        setScaleType(!mInPixels && (mResizeScaleType == ScaleType.CENTER_INSIDE || mResizeScaleType == ScaleType.CENTER)
-                ? ScaleType.MATRIX
-                : mResizeScaleType);
+    public void setObjectPositionY(float y) {
+        if (y == mPositionY) return;
+        mPositionY = y;
+        onPositionChanged();
+    }
+
+    public void setObjectPositionYOffset(float yOffset) {
+        if (yOffset == mPositionYOffset) return;
+        mPositionYOffset = yOffset;
+        onPositionChanged();
+    }
+
+    // Glide crops a cover image at the position (FastImageCrop): the image on
+    // screen is loaded again for it, quietly (see reblur), and until that's
+    // ready it stays as it was cropped (see shownCropped). Others, and cover
+    // images Glide doesn't crop, are only laid out at it, right away.
+    private void onPositionChanged() {
+        if (mFitScaleType == ScaleType.CENTER_CROP && !mPixelated && mDownsample) {
+            mCropChanged = true;
+        }
+        updateScaleType();
+    }
+
+    private boolean isCentered() {
+        return mPositionX == 0.5f && mPositionY == 0.5f && mPositionXOffset == 0 && mPositionYOffset == 0;
+    }
+
+    // Where Glide crops a cover image: CenterCrop at the center (as without
+    // objectPosition), FastImageCrop elsewhere.
+    @Nullable
+    private FastImageCrop positionedCrop() {
+        return mFitScaleType == ScaleType.CENTER_CROP && !isCentered() && !mPixelated && mDownsample
+                ? new FastImageCrop(mPositionX, mPositionXOffset, mPositionY, mPositionYOffset)
+                : null;
+    }
+
+    // Whether the image on screen is a cover one Glide cropped to what the
+    // view shows (CenterCrop or FastImageCrop, at the position it was loaded
+    // for). Glide can't crop animated WebPs and AVIFs, APNGs and
+    // defaultSource, and doesn't crop pixelated images or ones decoded at full
+    // size (downsample false).
+    private boolean shownCropped(Drawable drawable) {
+        return mLayoutScaleType == ScaleType.CENTER_CROP && !mLayoutPixelated && mLayoutDownsampled
+                && drawable != mDefaultSource
+                && (drawable instanceof BitmapDrawable || drawable instanceof GifDrawable);
+    }
+
+    // ImageView's own scale type for the layout, or MATRIX where the view lays
+    // the image out itself (updateImageMatrix): scale-down and none at their
+    // size in dp, and contain and cover at a position other than the center.
+    private void updateScaleType() {
+        ScaleType type = mLayoutScaleType;
+        boolean ownSize = type == ScaleType.CENTER_INSIDE || type == ScaleType.CENTER;
+        boolean positioned = !isCentered()
+                && (ownSize || type == ScaleType.FIT_CENTER || type == ScaleType.CENTER_CROP);
+        boolean laidOut = ownSize || positioned;
+        setScaleType(laidOut ? ScaleType.MATRIX : type);
         updateImageMatrix();
     }
 
-    // Whether the view shows its defaultSource (or its tiled copy, which has
-    // its bitmap): FastImage's own drawable, which Glide doesn't recycle (see
-    // startFade).
+    // Whether the view shows its defaultSource: FastImage's own drawable,
+    // which Glide doesn't recycle (see startFade).
     private boolean mShowsDefaultSource = false;
 
-    // Repeats what the view shows (the loaded image, and defaultSource).
     @Override
     public void setImageDrawable(@Nullable Drawable drawable) {
         mShowsDefaultSource = drawable != null && drawable == mDefaultSource;
-        super.setImageDrawable(mRepeat ? tiled(drawable) : drawable);
+        super.setImageDrawable(drawable);
         updateImageMatrix();
     }
 
@@ -855,12 +1075,16 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         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.
+    // The image laid out as CSS's object-fit and object-position do: its size
+    // for the fit (cover and contain from its shape; none at its own size,
+    // cropped by the view; scale-down at its own size, or scaled down
+    // uniformly to fit if that's larger than the view), with its left and top
+    // edges at (view - image) * fraction + offset. Glide decodes a scale-down
+    // image no larger than that (CenterInside), a none one at its size, and
+    // crops a cover one to what the view shows (FastImageCrop), so it's drawn
+    // at this size. defaultSource (a resource) is already at its size on
+    // screen, and so is a center image (its size in pixels, as ImageView's
+    // CENTER_INSIDE draws it).
     private void updateImageMatrix() {
         if (getScaleType() != ScaleType.MATRIX) return;
         Drawable drawable = getDrawable();
@@ -878,7 +1102,27 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         }
         float width;
         float height;
-        if (drawable == mDefaultSource) {
+        if (shownCropped(drawable)) {
+            // Glide cropped it to what the view shows (FastImageCrop), or for
+            // the previous position or size until the image has loaded again
+            // for this one: it covers the view, scaled uniformly (a crop for
+            // another size isn't stretched), at the position's fractions (its
+            // offsets are already in the crop).
+            float cover = Math.max(viewWidth / drawableWidth, viewHeight / drawableHeight);
+            matrix.setScale(cover, cover);
+            matrix.postTranslate(
+                    Math.round((viewWidth - drawableWidth * cover) * mPositionX),
+                    Math.round((viewHeight - drawableHeight * cover) * mPositionY));
+            setImageMatrix(matrix);
+            return;
+        }
+        if (mLayoutScaleType == ScaleType.CENTER_CROP || mLayoutScaleType == ScaleType.FIT_CENTER) {
+            float x = viewWidth / drawableWidth;
+            float y = viewHeight / drawableHeight;
+            float scale = mLayoutScaleType == ScaleType.CENTER_CROP ? Math.max(x, y) : Math.min(x, y);
+            width = drawableWidth * scale;
+            height = drawableHeight * scale;
+        } else if (drawable == mDefaultSource) {
             width = drawableWidth;
             height = drawableHeight;
         } else if (mImageWidth > 0 && mImageHeight > 0) {
@@ -891,31 +1135,18 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             width = drawableWidth * imageDensity();
             height = drawableHeight * imageDensity();
         }
-        float fit = mLayoutScaleType == ScaleType.CENTER
-                ? 1
-                : Math.min(1, Math.min(viewWidth / width, viewHeight / height));
+        float fit = mLayoutScaleType == ScaleType.CENTER_INSIDE
+                ? Math.min(1, Math.min(viewWidth / width, viewHeight / height))
+                : 1;
         width *= fit;
         height *= fit;
         matrix.setScale(width / drawableWidth, height / drawableHeight);
-        matrix.postTranslate(Math.round((viewWidth - width) / 2), Math.round((viewHeight - height) / 2));
+        matrix.postTranslate(
+                Math.round((viewWidth - width) * mPositionX + mPositionXOffset),
+                Math.round((viewHeight - height) * mPositionY + mPositionYOffset));
         setImageMatrix(matrix);
     }
 
-    @Nullable
-    private Drawable tiled(@Nullable Drawable drawable) {
-        if (!(drawable instanceof BitmapDrawable)) return drawable;
-        BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
-        if (bitmapDrawable.getTileModeX() == Shader.TileMode.REPEAT) return drawable;
-        Bitmap bitmap = bitmapDrawable.getBitmap();
-        if (bitmap == null) return drawable;
-        // A copy of the drawable (not of the bitmap): Glide's may be shown by
-        // other views too.
-        BitmapDrawable tiled = new BitmapDrawable(getResources(), bitmap);
-        tiled.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
-        if (mPixelated) tiled.setFilterBitmap(false);
-        return tiled;
-    }
-
     // imageRendering="pixelated": no resampling by Glide, and drawn without
     // filtering (sharp pixels). "smooth" is iOS only; here it's the same as
     // "auto": Glide decodes a large image at about the view's size (unless
@@ -940,12 +1171,19 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         if (downsample == mDownsample) return;
         mDownsample = downsample;
         mNeedsReload = true;
+        // As for a new objectFit: an image on screen keeps the layout it was
+        // loaded for until the new one is ready.
+        if (mShownRequest == null) applyObjectFit();
     }
 
     // blurRadius, in pixels (0 is no blur). Part of the request (see
     // reblur for a change).
     private float mBlurRadius = 0;
     private boolean mBlurChanged = false;
+    // objectFit changed (setObjectFit).
+    private boolean mFitChanged = false;
+    // objectPosition changed for an image Glide crops (onPositionChanged).
+    private boolean mCropChanged = false;
 
     public void setBlurRadius(float blurRadius) {
         if (blurRadius == mBlurRadius) return;
@@ -958,21 +1196,10 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     // as on iOS.
     private RequestOptions renderingOptions(Object model) {
         FastImageBlur blur = mBlurRadius > 0
-                ? new FastImageBlur(mBlurRadius, mRepeat ? null : mResizeScaleType, mInPixels ? 1 : loadingDensity())
+                ? new FastImageBlur(mBlurRadius, mFitScaleType, loadingDensity())
                 : null;
         RequestOptions options;
-        if (mRepeat) {
-            // Decoded at its own size, or scaled down to fit the view if it's
-            // larger (not cropped or fitted for the scale type), and a GIF as
-            // its first frame (tiled by setImageDrawable).
-            options = new RequestOptions()
-                    .downsample(new FastImageSourceSize.Capture(
-                            mPixelated ? DownsampleStrategy.NONE : DownsampleStrategy.CENTER_INSIDE,
-                            String.valueOf(model)))
-                    .dontTransform()
-                    .dontAnimate();
-            if (blur != null) options = options.optionalTransform(blur);
-        } else if (mPixelated) {
+        if (mPixelated) {
             // Decoded as it is, then scaled by the view without filtering (see
             // OwnGifTarget).
             options = new RequestOptions()
@@ -980,15 +1207,16 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
                     .dontTransform();
             if (blur != null) options = options.optionalTransform(blur);
         } else {
-            options = FastImageSourceSize.scaleTypeOptions(mResizeScaleType,
-                    FastImageSourceSize.capture(mResizeScaleType, model, mDownsample), blur, mDownsample);
-            boolean ownSize = mResizeScaleType == ScaleType.CENTER_INSIDE || mResizeScaleType == ScaleType.CENTER;
+            options = FastImageSourceSize.scaleTypeOptions(mFitScaleType,
+                    FastImageSourceSize.capture(mFitScaleType, model, mDownsample), positionedCrop(), blur,
+                    mDownsample);
+            boolean ownSize = mFitScaleType == ScaleType.CENTER_INSIDE || mFitScaleType == 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) {
+            if (ownSize && blur == null) {
                 options = options.set(FastImageSvg.DENSITY, loadingDensity())
-                        .set(FastImageSvg.FITS, mResizeScaleType == ScaleType.CENTER_INSIDE);
+                        .set(FastImageSvg.FITS, mFitScaleType == ScaleType.CENTER_INSIDE);
             }
         }
         return blur != null ? options.dontAnimate() : options;
@@ -1055,7 +1283,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         mLoadEnded = true;
         endProgress();
         // Before the view shows it (the target does once this returns).
-        applyResizeMode();
+        applyObjectFit();
         mShownRequest = mLoadingRequest;
         mShownWidth = mLoadingWidth;
         mShownHeight = mLoadingHeight;
@@ -1098,8 +1326,8 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
 
     // Whether the image loaded, at a size the view doesn't have now.
     private boolean isResized() {
-        int width = getWidth() - getPaddingLeft() - getPaddingRight();
-        int height = getHeight() - getPaddingTop() - getPaddingBottom();
+        int width = contentWidth();
+        int height = contentHeight();
         return requestManager != null && !mDropped && !mNeedsReload
                 && mShownRequest != null && mShownRequest == mLoadingRequest
                 && mShownWidth > 0 && mShownHeight > 0 && width > 0 && height > 0
@@ -1123,10 +1351,11 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         into(shown, builder, meanwhile, true);
     }
 
-    // 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. If that fails, it shows the image
+    // blurRadius or objectFit changed, and nothing else that needs a reload:
+    // the image that's showing, blurred or fitted again, with no events, as
+    // reloadForSize does: it's decoded again from the cache and blurred or
+    // fitted on Glide's threads, and the view keeps the current image (and its
+    // layout, see onImageLoaded) until then. If that fails, it shows the image
     // from Glide's caches; cache: 'web' skips them, so the view shows
     // defaultSource (or nothing) then. Also while it's loading again that way
     // (e.g. the blur changes every frame): that load is replaced. A load that
@@ -1221,7 +1450,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     void onImageFailed(boolean hadThumbnail) {
         mLoadEnded = true;
         endProgress();
-        applyResizeMode();
+        applyObjectFit();
         mShownRequest = null;
         if (!hadThumbnail) return;
         final int load = mLoadCount;
@@ -1240,8 +1469,10 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             @Nullable RequestManager requestManager) {
         if (mDropped) return;
         mManager = manager;
-        if (mBlurChanged && !mNeedsReload) {
+        if ((mBlurChanged || mFitChanged || mCropChanged) && !mNeedsReload) {
             mBlurChanged = false;
+            mFitChanged = false;
+            mCropChanged = false;
             reblur();
         }
         if (!mNeedsReload)
@@ -1269,9 +1500,11 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             pickSource();
         }
         // Only reload for changes that affect the request (source,
-        // defaultSource, resizeMode), not for every prop update.
+        // defaultSource, objectFit), not for every prop update.
         mNeedsReload = false;
         mBlurChanged = false;
+        mFitChanged = false;
+        mCropChanged = false;
         boolean switching = mSwitchesSource;
         mSwitchesSource = false;
         boolean restarting = mRestarting;