react-native-fast-image 8.24.0 → 8.25.0

package/README.md

@@ -199,6 +199,7 @@ For views that get reused for other content, such as rows in FlashList or recycl
 - `FastImage.resizeMode.cover` **(Default)** - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
 - `FastImage.resizeMode.stretch` - Scale width and height independently, This may change the aspect ratio of the src.
 - `FastImage.resizeMode.center` - Do not scale the image, keep centered.
+- `FastImage.resizeMode.repeat` - Repeat the image 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.
 
 ---
 

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

@@ -127,8 +127,11 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
 
     @ReactProp(name = "resizeMode")
     public void setResizeMode(FastImageViewWithUrl view, String resizeMode) {
-        final FastImageViewWithUrl.ScaleType scaleType = FastImageViewConverter.getScaleType(resizeMode);
-        view.setResizeMode(scaleType);
+        // repeat fills the view with the tiled image (see setImageDrawable).
+        boolean repeat = "repeat".equals(resizeMode);
+        final FastImageViewWithUrl.ScaleType scaleType =
+                repeat ? FastImageViewWithUrl.ScaleType.FIT_XY : FastImageViewConverter.getScaleType(resizeMode);
+        view.setResizeMode(scaleType, repeat);
     }
 
     @Override

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

@@ -12,6 +12,7 @@ import android.graphics.Canvas;
 import android.graphics.Paint;
 import android.graphics.PorterDuff;
 import android.graphics.PorterDuffXfermode;
+import android.graphics.Shader;
 import android.graphics.drawable.BitmapDrawable;
 import android.graphics.drawable.Drawable;
 
@@ -354,14 +355,41 @@ class FastImageViewWithUrl extends AppCompatImageView {
                 : mLoopCount);
     }
 
+    // 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;
+
     // 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) {
-        if (scaleType == getScaleType()) return;
+    public void setResizeMode(ScaleType scaleType, boolean repeat) {
+        if (scaleType == getScaleType() && repeat == mRepeat) return;
         setScaleType(scaleType);
+        mRepeat = repeat;
         mNeedsReload = true;
     }
 
+    // Repeats what the view shows (the loaded image, and defaultSource).
+    @Override
+    public void setImageDrawable(@Nullable Drawable drawable) {
+        super.setImageDrawable(mRepeat ? tiled(drawable) : drawable);
+    }
+
+    @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 already decodes a large image at about the view's size, and
@@ -391,9 +419,20 @@ class FastImageViewWithUrl extends AppCompatImageView {
     // pixelated, and the blur. A blurred animated image shows its first frame,
     // as on iOS.
     private RequestOptions renderingOptions(Object model) {
-        FastImageBlur blur = mBlurRadius > 0 ? new FastImageBlur(mBlurRadius, getScaleType()) : null;
+        FastImageBlur blur = mBlurRadius > 0 ? new FastImageBlur(mBlurRadius, mRepeat ? null : getScaleType()) : null;
         RequestOptions options;
-        if (mPixelated) {
+        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) {
             // Decoded as it is, then scaled by the view without filtering (see
             // OwnGifTarget).
             options = new RequestOptions()

package/dist/constants.d.ts

@@ -3,6 +3,7 @@ export declare const resizeMode: {
     readonly cover: 'cover';
     readonly stretch: 'stretch';
     readonly center: 'center';
+    readonly repeat: 'repeat';
 };
 export declare const priority: {
     readonly low: 'low';

package/dist/index.cjs.js

@@ -32,7 +32,8 @@ const resizeMode = {
 	contain: "contain",
 	cover: "cover",
 	stretch: "stretch",
-	center: "center"
+	center: "center",
+	repeat: "repeat"
 };
 const priority = {
 	low: "low",

package/dist/index.cjs.js.flow

@@ -33,6 +33,7 @@ export type ResizeMode = $ReadOnly<{|
     cover: 'cover',
     stretch: 'stretch',
     center: 'center',
+    repeat: 'repeat',
 |}>
 
 export type Priority = $ReadOnly<{|

package/dist/index.cjs.web.js

@@ -32,7 +32,8 @@ const resizeMode = {
 	contain: "contain",
 	cover: "cover",
 	stretch: "stretch",
-	center: "center"
+	center: "center",
+	repeat: "repeat"
 };
 const priority = {
 	low: "low",

package/dist/index.cjs.web.js.flow

@@ -33,6 +33,7 @@ export type ResizeMode = $ReadOnly<{|
     cover: 'cover',
     stretch: 'stretch',
     center: 'center',
+    repeat: 'repeat',
 |}>
 
 export type Priority = $ReadOnly<{|

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { LayoutChangeEvent, StyleProp, ViewStyle, ImageRequireSource, AccessibilityProps, ViewProps } from 'react-native';
 import { cacheControl, priority, resizeMode } from './constants';
 type ColorValue = NonNullable<ViewStyle['backgroundColor']>;
-export type ResizeMode = 'contain' | 'cover' | 'stretch' | 'center';
+export type ResizeMode = 'contain' | 'cover' | 'stretch' | 'center' | 'repeat';
 export type Priority = 'low' | 'normal' | 'high';
 export type Cache = 'immutable' | 'web' | 'cacheOnly';
 export type Source = {

package/dist/index.js

@@ -5,7 +5,8 @@ const resizeMode = {
 	contain: "contain",
 	cover: "cover",
 	stretch: "stretch",
-	center: "center"
+	center: "center",
+	repeat: "repeat"
 };
 const priority = {
 	low: "low",

package/dist/index.js.flow

@@ -33,6 +33,7 @@ export type ResizeMode = $ReadOnly<{|
     cover: 'cover',
     stretch: 'stretch',
     center: 'center',
+    repeat: 'repeat',
 |}>
 
 export type Priority = $ReadOnly<{|

package/dist/index.web.js

@@ -5,7 +5,8 @@ const resizeMode = {
 	contain: "contain",
 	cover: "cover",
 	stretch: "stretch",
-	center: "center"
+	center: "center",
+	repeat: "repeat"
 };
 const priority = {
 	low: "low",

package/dist/index.web.js.flow

@@ -33,6 +33,7 @@ export type ResizeMode = $ReadOnly<{|
     cover: 'cover',
     stretch: 'stretch',
     center: 'center',
+    repeat: 'repeat',
 |}>
 
 export type Priority = $ReadOnly<{|

package/ios/FastImage/FFFastImageView.m

@@ -24,6 +24,8 @@
 @property(nonatomic, assign) NSUInteger imageCount;
 // The view's size when the image showing was blurred.
 @property(nonatomic, assign) CGSize blurredForSize;
+// The view's size when the image showing was tiled (resizeMode repeat).
+@property(nonatomic, assign) CGSize tiledForSize;
 // The blurred image showing (untinted), so a tint change can re-show it.
 @property(nonatomic, strong) UIImage* blurredImage;
 // The image being blurred fades in once it's blurred (transition).
@@ -211,11 +213,14 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 
 - (void) setResizeMode: (RCTResizeMode)resizeMode {
     if (_resizeMode != resizeMode) {
+        BOOL repeated = _resizeMode == RCTResizeModeRepeat;
         _resizeMode = resizeMode;
         [self updateContentMode];
-        // The blur is made for the size the image is shown at.
-        if ([self blurs: self.originalImage]) {
-            [self setImage: self.originalImage];
+        // The blur is made for the size the image is shown at, and repeat
+        // shows the image tiled: show it again.
+        UIImage* image = self.originalImage ?: super.image;
+        if ([self blurs: self.originalImage] || ((repeated || resizeMode == RCTResizeModeRepeat) && image)) {
+            [self setImage: image];
         }
     }
 }
@@ -227,7 +232,10 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 // view's size.
 - (void) updateContentMode {
     UIViewContentMode contentMode = (UIViewContentMode) _resizeMode;
-    if (_resizeMode == RCTResizeModeCenter) {
+    if (_resizeMode == RCTResizeModeRepeat) {
+        // The tiled image (see tiledImage:) fills the view.
+        contentMode = UIViewContentModeScaleToFill;
+    } else if (_resizeMode == RCTResizeModeCenter) {
         CGSize imageSize = super.image.size;
         CGSize viewSize = self.bounds.size;
         if (imageSize.width > viewSize.width || imageSize.height > viewSize.height) {
@@ -243,6 +251,7 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     [super layoutSubviews];
     [self updateContentMode];
     [self blurAgainIfResized];
+    [self tileAgainIfResized];
     if (self.waitsForSize) {
         if ([self hasSize]) {
             [self reloadImage];
@@ -320,7 +329,8 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
         [self blurImage: image];
         return;
     }
-    self.originalImage = image && self.imageColor ? image : nil;
+    // Kept to tint, or tile (resizeMode repeat), it again.
+    self.originalImage = image && (self.imageColor || _resizeMode == RCTResizeModeRepeat) ? image : nil;
     self.blurredImage = nil;
     self.blursOverNothing = NO;
     // The blur was removed before it was ready: the fade it was waiting for
@@ -342,7 +352,9 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 // template is), or, before SDWebImage 5.20, the first frame shows.
 - (void) showImage: (UIImage*)image {
     UIColor* tint = image ? self.imageColor : nil;
-    BOOL animated = [image conformsToProtocol: @protocol(SDAnimatedImage)] && [(id<SDAnimatedImage>)image animatedImageFrameCount] > 1;
+    // resizeMode repeat tiles an animated image's first frame (tiledImage:).
+    BOOL repeats = image && _resizeMode == RCTResizeModeRepeat;
+    BOOL animated = !repeats && [image conformsToProtocol: @protocol(SDAnimatedImage)] && [(id<SDAnimatedImage>)image animatedImageFrameCount] > 1;
     self.tintColor = tint;
     if ([self tintsFrames]) {
         [self setValue: tint && animated ? [SDImageTintTransformer transformerWithColor: tint] : nil forKey: @"animationTransformer"];
@@ -356,17 +368,54 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
         if (changed) {
             [self.player seekToFrameAtIndex: 0 loopCount: 0];
         }
-    } else if (tint) {
-        if (animated) {
-            image = [UIImage imageWithCGImage: image.CGImage scale: image.scale orientation: image.imageOrientation];
-        }
-        super.image = [image imageWithRenderingMode: UIImageRenderingModeAlwaysTemplate];
     } else {
+        if (tint) {
+            if (animated) {
+                image = [UIImage imageWithCGImage: image.CGImage scale: image.scale orientation: image.imageOrientation];
+            }
+            image = [image imageWithRenderingMode: UIImageRenderingModeAlwaysTemplate];
+        }
+        if (repeats) {
+            image = [self tiledImage: image];
+            self.tiledForSize = self.bounds.size;
+        }
         super.image = image;
     }
     [self updateContentMode];
 }
 
+// resizeMode repeat: the image repeated from the top-left at its own size in
+// pixels (a scaled image, e.g. a bundled @3x one, at its size in points), an
+// animated image's first frame, scaled down to fit the view if it's larger,
+// as React Native's Image does (and Android here).
+- (UIImage*) tiledImage: (UIImage*)image {
+    CGImageRef cgImage = image.CGImage;
+    if (!cgImage) {
+        return image;
+    }
+    CGFloat scale = image.scale > 1 ? image.scale : (self.window.screen.scale ?: [UIScreen mainScreen].scale);
+    CGSize size = CGSizeMake(image.size.width * image.scale / scale, image.size.height * image.scale / scale);
+    CGSize view = self.bounds.size;
+    if (view.width > 0 && view.height > 0 && (size.width > view.width || size.height > view.height)) {
+        scale *= MAX(size.width / view.width, size.height / view.height);
+    }
+    UIImage* still = [[UIImage imageWithCGImage: cgImage scale: scale orientation: image.imageOrientation]
+                      imageWithRenderingMode: image.renderingMode];
+    return [still resizableImageWithCapInsets: UIEdgeInsetsZero resizingMode: UIImageResizingModeTile];
+}
+
+// The view's size changed since the image was tiled, which scales an image
+// larger than the view down to fit it: tile it again.
+- (void) tileAgainIfResized {
+    if (_resizeMode != RCTResizeModeRepeat || CGSizeEqualToSize(self.bounds.size, self.tiledForSize)) {
+        return;
+    }
+    UIImage* image = [self blurs: self.originalImage] ? self.blurredImage : self.originalImage;
+    if (image) {
+        [self showImage: image];
+    }
+}
+
 - (void) setBlurRadius: (CGFloat)blurRadius {
     if (_blurRadius == blurRadius) {
         return;

package/package.json

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