react-native-fast-image 8.9.0 → 8.11.0

package/README.md

@@ -186,6 +186,16 @@ Changing it restarts the animation.
 
 ---
 
+### `imageRendering?: 'auto' | 'smooth' | 'pixelated'`
+
+How the image is filtered when it's drawn smaller or larger than its size (like CSS's `image-rendering`):
+
+- `'auto'` **(Default)** - The platform's usual filtering.
+- `'smooth'` - iOS only. Keeps a large image drawn much smaller than its size (e.g. a big photo as a thumbnail, or fine lines and text) from looking jagged or noisy. **It uses more memory:** the image is also kept at smaller sizes for drawing, about a third more than the decoded image. On Android it's the same as `'auto'` (images are already decoded at about the view's size there).
+- `'pixelated'` - Sharp pixels, without smoothing, e.g. for pixel art drawn larger than its size. On Android, animated images are still smoothed.
+
+---
+
 ### `onLoadStart?: () => void`
 
 Called when the image starts to load.
@@ -208,9 +218,11 @@ e.g. `onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}`
 
 ---
 
-### `onError?: () => void`
+### `onError?: (event) => void`
+
+Called on an image fetching error, with a message describing it (e.g. the HTTP status code).
 
-Called on an image fetching error.
+e.g. `onError={e => console.log(e.nativeEvent.error)}`
 
 ---
 

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

@@ -41,11 +41,26 @@ public class FastImageRequestListener implements RequestListener<Drawable> {
         }
         FastImageViewWithUrl view = (FastImageViewWithUrl) ((ImageViewTarget) target).getView();
         view.onImageFailed(thumbnail);
-        FastImageEvents.send(view, REACT_ON_ERROR_EVENT);
+        WritableMap event = new WritableNativeMap();
+        event.putString("error", errorMessage(e));
+        FastImageEvents.send(view, REACT_ON_ERROR_EVENT, event);
         FastImageEvents.send(view, REACT_ON_LOAD_END_EVENT);
         return false;
     }
 
+    // The first root cause's message, e.g. "Not Found, status code: 404".
+    // The first root cause's message, e.g. "Not Found, status code: 404" (also
+    // for preload results).
+    static String errorMessage(@androidx.annotation.Nullable GlideException e) {
+        if (e != null) {
+            for (Throwable cause : e.getRootCauses()) {
+                if (cause.getMessage() != null) return cause.getMessage();
+            }
+            if (e.getMessage() != null) return e.getMessage();
+        }
+        return "Failed to load the image";
+    }
+
     @Override
     public boolean onResourceReady(Drawable resource, Object model, final Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
         if (!(target instanceof ImageViewTarget)) {

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

@@ -94,6 +94,11 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
         view.setLoopCount(loopCount);
     }
 
+    @ReactProp(name = "imageRendering")
+    public void setImageRendering(FastImageViewWithUrl view, @Nullable String imageRendering) {
+        view.setImageRendering(imageRendering);
+    }
+
     @ReactProp(name = "resizeMode")
     public void setResizeMode(FastImageViewWithUrl view, String resizeMode) {
         final FastImageViewWithUrl.ScaleType scaleType = FastImageViewConverter.getScaleType(resizeMode);

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

@@ -122,7 +122,7 @@ class FastImageViewModule extends ReactContextBaseJavaModule {
                                     .listener(new RequestListener<Drawable>() {
                                         @Override
                                         public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
-                                            results[index] = failure(errorMessage(e));
+                                            results[index] = failure(FastImageRequestListener.errorMessage(e));
                                             preloadsInFlight--;
                                             finishOne.run();
                                             startPendingPreloads();
@@ -164,17 +164,6 @@ class FastImageViewModule extends ReactContextBaseJavaModule {
         return result;
     }
 
-    // The first root cause's message, e.g. "Not Found, status code: 404".
-    private static String errorMessage(@Nullable GlideException e) {
-        if (e != null) {
-            for (Throwable cause : e.getRootCauses()) {
-                if (cause.getMessage() != null) return cause.getMessage();
-            }
-            if (e.getMessage() != null) return e.getMessage();
-        }
-        return "Failed to load the image";
-    }
-
     @ReactMethod
     public void clearMemoryCache(final Promise promise) {
         final Activity activity = getCurrentActivity();

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

@@ -5,6 +5,7 @@ import static com.dylanvann.fastimage.FastImageRequestListener.REACT_ON_LOAD_END
 
 import android.annotation.SuppressLint;
 import android.content.Context;
+import android.graphics.drawable.BitmapDrawable;
 import android.graphics.drawable.Drawable;
 
 import androidx.annotation.NonNull;
@@ -15,8 +16,10 @@ import androidx.core.view.ViewCompat;
 import com.bumptech.glide.RequestBuilder;
 import com.bumptech.glide.RequestManager;
 import com.bumptech.glide.load.model.GlideUrl;
+import com.bumptech.glide.load.resource.bitmap.DownsampleStrategy;
 import com.bumptech.glide.load.resource.gif.GifDrawable;
 import com.bumptech.glide.request.Request;
+import com.bumptech.glide.request.RequestOptions;
 import com.bumptech.glide.request.target.DrawableImageViewTarget;
 import com.bumptech.glide.request.target.SizeReadyCallback;
 import com.bumptech.glide.request.transition.Transition;
@@ -95,6 +98,13 @@ class FastImageViewWithUrl extends AppCompatImageView {
 
         @Override
         public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
+            if (resource instanceof BitmapDrawable) {
+                if (mPixelated) {
+                    // Scaled by the view without filtering: sharp pixels.
+                    resource = resource.mutate();
+                    resource.setFilterBitmap(false);
+                }
+            }
             if (resource instanceof GifDrawable) {
                 GifDrawable own = FastImageGif.copy(
                         getContext(), (GifDrawable) resource, mLoadingWidth, mLoadingHeight);
@@ -134,6 +144,33 @@ class FastImageViewWithUrl extends AppCompatImageView {
         mNeedsReload = true;
     }
 
+    // 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
+    // averaging it properly would need a full-size decode. Part of the
+    // request, so a change reloads.
+    private boolean mPixelated = false;
+
+    public void setImageRendering(@Nullable String imageRendering) {
+        boolean pixelated = "pixelated".equals(imageRendering);
+        if (pixelated == mPixelated) return;
+        mPixelated = pixelated;
+        mNeedsReload = true;
+    }
+
+    // The scale type's options (what into() would apply), or none when
+    // pixelated.
+    private RequestOptions renderingOptions(Object model) {
+        if (mPixelated) {
+            // Decoded as it is, then scaled by the view without filtering (see
+            // OwnGifTarget).
+            return new RequestOptions()
+                    .downsample(new FastImageSourceSize.Capture(DownsampleStrategy.NONE, String.valueOf(model)))
+                    .dontTransform();
+        }
+        return FastImageSourceSize.scaleTypeOptions(getScaleType(), FastImageSourceSize.capture(getScaleType(), model));
+    }
+
     // 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
@@ -308,7 +345,7 @@ class FastImageViewWithUrl extends AppCompatImageView {
         // (#1028, #945).
         if (mSource != null && (imageSource == null || imageSource.getUri().toString().length() == 0)) {
             WritableMap event = new WritableNativeMap();
-            event.putString("message", "Invalid source prop:" + mSource);
+            event.putString("error", "Invalid source: " + mSource);
             FastImageEvents.send(this, REACT_ON_ERROR_EVENT, event);
             FastImageEvents.send(this, REACT_ON_LOAD_END_EVENT);
 
@@ -353,7 +390,6 @@ class FastImageViewWithUrl extends AppCompatImageView {
         if (requestManager != null) {
             // Records the image's own size when Glide decodes it, for onLoad.
             Object model = imageSource == null ? null : imageSource.getSourceForLoad();
-            FastImageSourceSize.Capture capture = FastImageSourceSize.capture(getScaleType(), model);
             RequestBuilder<Drawable> builder =
                     requestManager
                             // This will make this work for remote and local images. e.g.
@@ -368,8 +404,8 @@ class FastImageViewWithUrl extends AppCompatImageView {
                                     .placeholder(mDefaultSource) // show until loaded
                                     .fallback(mDefaultSource)) // null will not be treated as error
                             // What into() would apply for the scale type, with
-                            // the size capture.
-                            .apply(FastImageSourceSize.scaleTypeOptions(getScaleType(), capture));
+                            // the size capture, for imageRendering.
+                            .apply(renderingOptions(model));
             RequestBuilder<Drawable> request = builder.clone();
 
             boolean thumbnail = shownRequest != null && model != null;

package/dist/index.cjs.js.flow

@@ -13,6 +13,12 @@ export type OnLoadEvent = SyntheticEvent<
     }>,
 >
 
+export type OnErrorEvent = SyntheticEvent<
+    $ReadOnly<{|
+        error: string,
+    |}>,
+>
+
 export type OnProgressEvent = SyntheticEvent<
     $ReadOnly<{|
         loaded: number,
@@ -70,7 +76,7 @@ export type FastImageSource = {
 
 export type FastImageProps = $ReadOnly<{|
     ...ViewProps,
-    onError?: ?() => void,
+    onError?: ?(event: OnErrorEvent) => void,
     onLoad?: ?(event: OnLoadEvent) => void,
     onLoadEnd?: ?() => void,
     onLoadStart?: ?() => void,
@@ -84,6 +90,7 @@ export type FastImageProps = $ReadOnly<{|
     fallback?: ?boolean,
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
+    imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
     testID?: ?string,
 |}>
 

package/dist/index.d.ts

@@ -35,6 +35,11 @@ export interface OnLoadEvent {
         target?: number;
     };
 }
+export interface OnErrorEvent {
+    nativeEvent: {
+        error: string;
+    };
+}
 export interface OnProgressEvent {
     nativeEvent: {
         loaded: number;
@@ -75,10 +80,18 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * or a number of times. Changing it restarts the animation.
      */
     loop?: boolean | number;
+    /**
+     * How the image is filtered when it's drawn smaller or larger than its
+     * size: `'auto'` (default, the platform's usual filtering), `'smooth'`
+     * (iOS only: keeps a large image drawn much smaller from looking jagged
+     * or noisy; uses more memory, see the README) or `'pixelated'` (sharp
+     * pixels, e.g. for pixel art).
+     */
+    imageRendering?: 'auto' | 'smooth' | 'pixelated';
     onLoadStart?(): void;
     onProgress?(event: OnProgressEvent): void;
     onLoad?(event: OnLoadEvent): void;
-    onError?(): void;
+    onError?(event: OnErrorEvent): void;
     onLoadEnd?(): void;
     /**
      * onLayout function

package/dist/index.js.flow

@@ -13,6 +13,12 @@ export type OnLoadEvent = SyntheticEvent<
     }>,
 >
 
+export type OnErrorEvent = SyntheticEvent<
+    $ReadOnly<{|
+        error: string,
+    |}>,
+>
+
 export type OnProgressEvent = SyntheticEvent<
     $ReadOnly<{|
         loaded: number,
@@ -70,7 +76,7 @@ export type FastImageSource = {
 
 export type FastImageProps = $ReadOnly<{|
     ...ViewProps,
-    onError?: ?() => void,
+    onError?: ?(event: OnErrorEvent) => void,
     onLoad?: ?(event: OnLoadEvent) => void,
     onLoadEnd?: ?() => void,
     onLoadStart?: ?() => void,
@@ -84,6 +90,7 @@ export type FastImageProps = $ReadOnly<{|
     fallback?: ?boolean,
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
+    imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
     testID?: ?string,
 |}>
 

package/ios/FastImage/FFFastImageView.h

@@ -25,6 +25,13 @@
 // How many times animated images play: -1 for the file's own loop count (the
 // `loop` prop not set), 0 for forever, or a number of times.
 @property (nonatomic, assign) NSInteger loopCount;
+// How the image is filtered when drawn at another size: auto, smooth or
+// pixelated.
+@property (nonatomic, copy) NSString *imageRendering;
 
 @end
 
+// An error's description, with the HTTP status code when there is one.
+FOUNDATION_EXTERN NSString *FFFErrorMessage(NSError *error);
+
+

package/ios/FastImage/FFFastImageView.m

@@ -2,6 +2,7 @@
 #import <SDWebImage/UIImage+MultiFormat.h>
 #import <SDWebImage/UIView+WebCache.h>
 #import <React/RCTUtils.h>
+#import <SDWebImage/SDWebImageError.h>
 
 @interface FFFastImageView ()
 
@@ -12,6 +13,7 @@
 @property(nonatomic, assign) BOOL needsReload;
 
 @property(nonatomic, strong) NSDictionary* onLoadEvent;
+@property(nonatomic, strong) NSDictionary* onErrorEvent;
 // The image before tinting, kept while a tint is applied so the tint can be
 // changed or removed. nil when there's no tint (super.image is untinted).
 @property(nonatomic, strong) UIImage* untintedImage;
@@ -51,6 +53,24 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
     return self;
 }
 
+- (void) setImageRendering: (NSString*)imageRendering {
+    _imageRendering = [imageRendering copy];
+    if ([imageRendering isEqualToString: @"smooth"]) {
+        // Trilinear: drawn smaller from mipmaps, so a large image drawn much
+        // smaller is smoothed instead of aliased (#445). The mipmaps take
+        // about a third more memory than the decoded image.
+        self.layer.minificationFilter = kCAFilterTrilinear;
+        self.layer.magnificationFilter = kCAFilterLinear;
+    } else if ([imageRendering isEqualToString: @"pixelated"]) {
+        // Nearest neighbor: sharp pixels, e.g. for pixel art (#926).
+        self.layer.minificationFilter = kCAFilterNearest;
+        self.layer.magnificationFilter = kCAFilterNearest;
+    } else {
+        self.layer.minificationFilter = kCAFilterLinear;
+        self.layer.magnificationFilter = kCAFilterLinear;
+    }
+}
+
 - (void) setLoopCount: (NSInteger)loopCount {
     if (_loopCount == loopCount) {
         return;
@@ -120,7 +140,7 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
 - (void) setOnFastImageError: (RCTDirectEventBlock)onFastImageError {
     _onFastImageError = onFastImageError;
     if (self.hasErrored && _onFastImageError) {
-        _onFastImageError(@{});
+        _onFastImageError(self.onErrorEvent);
     }
 }
 
@@ -194,6 +214,26 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
     [self updateContentMode];
 }
 
+// The error's description, with the HTTP status code when there is one (as on
+// Android): SDWebImage keeps the code out of the description. Also for preload
+// results.
+NSString *FFFErrorMessage(NSError *error)
+{
+    NSNumber *statusCode = error.userInfo[SDWebImageErrorDownloadStatusCodeKey];
+    if (statusCode) {
+        return [NSString stringWithFormat: @"%@, status code: %@", error.localizedDescription, statusCode];
+    }
+    return error.localizedDescription ?: @"Failed to load the image";
+}
+
+- (void) sendOnError: (nullable NSString*)message {
+    self.hasErrored = YES;
+    self.onErrorEvent = @{ @"error": message ?: @"Failed to load the image" };
+    if (self.onFastImageError) {
+        self.onFastImageError(self.onErrorEvent);
+    }
+}
+
 - (void) sendOnLoad: (UIImage*)image {
     self.onLoadEvent = @{
             @"width": [NSNumber numberWithDouble: image.size.width],
@@ -258,10 +298,7 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
                 // Not decodable: fail like a remote image, showing defaultSource.
                 [self setImage: _defaultSource];
                 self.showsLoadedImage = NO;
-                self.hasErrored = YES;
-                if (self.onFastImageError) {
-                    self.onFastImageError(@{});
-                }
+                [self sendOnError: @"Failed to decode the image"];
                 if (self.onFastImageLoadEnd) {
                     self.onFastImageLoadEnd(@{});
                 }
@@ -391,10 +428,7 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
                 if (error) {
                     // SDWebImage shows the placeholder (defaultSource or nothing).
                     weakSelf.showsLoadedImage = NO;
-                    weakSelf.hasErrored = YES;
-                    if (weakSelf.onFastImageError) {
-                        weakSelf.onFastImageError(@{});
-                    }
+                    [weakSelf sendOnError: FFFErrorMessage(error)];
                     if (weakSelf.onFastImageLoadEnd) {
                         weakSelf.onFastImageLoadEnd(@{});
                     }

package/ios/FastImage/FFFastImageViewManager.m

@@ -19,6 +19,7 @@ RCT_EXPORT_VIEW_PROPERTY(defaultSource, UIImage)
 RCT_EXPORT_VIEW_PROPERTY(resizeMode, RCTResizeMode)
 RCT_EXPORT_VIEW_PROPERTY(recyclingKey, NSString)
 RCT_EXPORT_VIEW_PROPERTY(loopCount, NSInteger)
+RCT_EXPORT_VIEW_PROPERTY(imageRendering, NSString)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageLoadStart, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageProgress, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageError, RCTDirectEventBlock)
@@ -26,16 +27,6 @@ RCT_EXPORT_VIEW_PROPERTY(onFastImageLoad, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageLoadEnd, RCTDirectEventBlock)
 RCT_REMAP_VIEW_PROPERTY(tintColor, imageColor, UIColor)
 
-// The error's description, with the HTTP status code when there is one.
-static NSString *FFFErrorMessage(NSError *error)
-{
-    NSNumber *statusCode = error.userInfo[SDWebImageErrorDownloadStatusCodeKey];
-    if (statusCode) {
-        return [NSString stringWithFormat:@"%@, status code: %@", error.localizedDescription, statusCode];
-    }
-    return error.localizedDescription ?: @"Failed to load the image";
-}
-
 // Preloads waiting to start, in the order they were added, and the number
 // loading, across all preload calls. Like SDWebImagePrefetcher, at most
 // maxConcurrentPrefetchCount load at a time, so a long list doesn't queue

package/package.json

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