react-native-fast-image 8.16.2 → 8.17.0

package/README.md

@@ -163,6 +163,12 @@ Not used with `cache: 'web'`, which follows the HTTP cache (keyed by url).
 
 ---
 
+### `source.memoryCache?: boolean`
+
+Whether the decoded image is kept in the memory cache. **Default: true.** With `false` it's only kept on disk: a view doesn't leave it in memory once it stops showing it, and `FastImage.preload` downloads it without decoding it. Use it for large images that are shown once or rarely, like a full-screen photo: a decoded photo can take tens of MB of memory. Images shown again, like a list scrolled back, are decoded from disk again.
+
+---
+
 ### `defaultSource?: number`
 
 - An asset loaded with `require(...)`.
@@ -351,6 +357,12 @@ for (const result of results) {
 
 Each source's `cache` applies, as for a view: with `web` the preload follows the HTTP cache, and with `cacheOnly` it doesn't download. A `cacheOnly` preload resolves `ok` only if the image is cached, and loads it from the disk cache into memory, so a view shows it at once.
 
+A source with `memoryCache: false` is only downloaded to the disk cache, without being decoded into memory, and is decoded when it's shown. Use it to preload many images, or large ones, e.g. the next pages of a feed: a decoded photo can take tens of MB of memory. Other sources are also kept decoded in memory, so they show at once.
+
+```js
+await FastImage.preload(photos.map((uri) => ({ uri, memoryCache: false })))
+```
+
 ### `FastImage.clearMemoryCache: () => Promise<void>`
 
 Clear all images from memory cache.

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

@@ -124,6 +124,27 @@ public class FastImageSource extends ImageSource {
         mWebCache = webCache;
     }
 
+    boolean isWebCache() {
+        return mWebCache;
+    }
+
+    // `memoryCache`: whether the decoded image is kept in the memory cache.
+    private boolean mMemoryCache = true;
+
+    void setMemoryCache(boolean memoryCache) {
+        mMemoryCache = memoryCache;
+    }
+
+    boolean isMemoryCache() {
+        return mMemoryCache;
+    }
+
+    // An http(s) url.
+    boolean isRemote() {
+        String scheme = mUri == null ? null : mUri.getScheme();
+        return "http".equalsIgnoreCase(scheme) || "https".equalsIgnoreCase(scheme);
+    }
+
     // `cacheKey`: the key to cache the image under instead of its url.
     @Nullable
     private String mCacheKey = null;

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

@@ -64,6 +64,9 @@ class FastImageViewConverter {
         if (source == null) return null;
         FastImageSource imageSource = new FastImageSource(context, source.getString("uri"), getHeaders(source));
         imageSource.setWebCache(getCacheControl(source) == FastImageCacheControl.WEB);
+        if (source.hasKey("memoryCache") && source.getType("memoryCache") == ReadableType.Boolean) {
+            imageSource.setMemoryCache(source.getBoolean("memoryCache"));
+        }
         if (source.hasKey("cacheKey") && source.getType("cacheKey") == ReadableType.String) {
             imageSource.setCacheKey(source.getString("cacheKey"));
         }
@@ -116,7 +119,8 @@ class FastImageViewConverter {
         RequestOptions options = new RequestOptions()
                 .diskCacheStrategy(diskCacheStrategy)
                 .onlyRetrieveFromCache(onlyFromCache)
-                .skipMemoryCache(skipMemoryCache)
+                // memoryCache false: only kept on disk.
+                .skipMemoryCache(skipMemoryCache || (imageSource != null && !imageSource.isMemoryCache()))
                 .priority(priority)
                 .placeholder(TRANSPARENT_DRAWABLE);
 

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

@@ -1,6 +1,8 @@
 package com.dylanvann.fastimage;
 
 import android.app.Activity;
+import android.content.Context;
+import android.graphics.BitmapFactory;
 import android.graphics.drawable.Drawable;
 
 import androidx.annotation.NonNull;
@@ -9,6 +11,8 @@ import androidx.annotation.Nullable;
 import com.bumptech.glide.Glide;
 import com.bumptech.glide.Priority;
 import com.bumptech.glide.load.DataSource;
+import com.bumptech.glide.load.ImageHeaderParser;
+import com.bumptech.glide.load.ImageHeaderParserUtils;
 import com.bumptech.glide.load.engine.GlideException;
 import com.bumptech.glide.request.RequestListener;
 import com.bumptech.glide.request.RequestOptions;
@@ -24,8 +28,13 @@ import com.facebook.react.bridge.UiThreadUtil;
 import com.facebook.react.bridge.WritableArray;
 import com.facebook.react.bridge.WritableMap;
 
+import java.io.File;
+import java.io.FileInputStream;
 import java.io.IOException;
+import java.io.InputStream;
 import java.util.ArrayDeque;
+import java.util.concurrent.Executor;
+import java.util.concurrent.Executors;
 
 class FastImageViewModule extends ReactContextBaseJavaModule {
 
@@ -63,8 +72,44 @@ class FastImageViewModule extends ReactContextBaseJavaModule {
         }
     }
 
+    // Reads the size of images preloaded to disk only, off the UI thread.
+    private static final Executor sizeExecutor = Executors.newSingleThreadExecutor();
+
+    // The image's size from its file's header, as a decoded image has it (with
+    // its EXIF orientation), or null if it can't be read.
+    @Nullable
+    private static int[] imageSize(Context context, File file) {
+        BitmapFactory.Options bounds = new BitmapFactory.Options();
+        bounds.inJustDecodeBounds = true;
+        BitmapFactory.decodeFile(file.getPath(), bounds);
+        if (bounds.outWidth <= 0 || bounds.outHeight <= 0) return null;
+        int orientation = ImageHeaderParser.UNKNOWN_ORIENTATION;
+        Glide glide = Glide.get(context);
+        try (InputStream stream = new FileInputStream(file)) {
+            orientation = ImageHeaderParserUtils.getOrientation(
+                    glide.getRegistry().getImageHeaderParsers(), stream, glide.getArrayPool());
+        } catch (IOException e) {
+            // Taken as not rotated.
+        }
+        // 5 to 8 turn the image by 90 degrees.
+        boolean transposed = orientation >= 5 && orientation <= 8;
+        return transposed
+                ? new int[] {bounds.outHeight, bounds.outWidth}
+                : new int[] {bounds.outWidth, bounds.outHeight};
+    }
+
+    private static WritableMap success(int width, int height) {
+        WritableMap result = Arguments.createMap();
+        result.putBoolean("ok", true);
+        result.putInt("width", width);
+        result.putInt("height", height);
+        return result;
+    }
+
     // Resolves with a result per source, in order, once all have loaded or
     // failed: { ok, width, height } or { ok: false, error }. Never rejects.
+    // A remote source with memoryCache false is only downloaded to the disk
+    // cache, without decoding it (its size comes from the header).
     @ReactMethod
     public void preload(final ReadableArray sources, final Promise promise) {
         final ReactApplicationContext context = getReactApplicationContext();
@@ -111,6 +156,58 @@ class FastImageViewModule extends ReactContextBaseJavaModule {
                     final RequestOptions preloadOptions = source.hasKey("priority") && !source.isNull("priority")
                             ? options
                             : options.priority(Priority.LOW);
+                    // A source's result, which frees its slot.
+                    final ResultCallback done = new ResultCallback() {
+                        @Override
+                        public void run(WritableMap result) {
+                            results[index] = result;
+                            preloadsInFlight--;
+                            finishOne.run();
+                            startPendingPreloads();
+                        }
+                    };
+                    // Remote images (web ones are in the HTTP cache instead,
+                    // and local ones are already on disk).
+                    if (!imageSource.isMemoryCache() && !imageSource.isWebCache() && imageSource.isRemote()) {
+                        pendingPreloads.add(new Runnable() {
+                            @Override
+                            public void run() {
+                                Glide
+                                        .with(context)
+                                        .asFile()
+                                        .load(imageSource.getSourceForLoad())
+                                        .apply(preloadOptions)
+                                        .listener(new RequestListener<File>() {
+                                            @Override
+                                            public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<File> target, boolean isFirstResource) {
+                                                done.run(failure(FastImageRequestListener.errorMessage(e)));
+                                                return false;
+                                            }
+
+                                            @Override
+                                            public boolean onResourceReady(final File file, Object model, Target<File> target, DataSource dataSource, boolean isFirstResource) {
+                                                sizeExecutor.execute(new Runnable() {
+                                                    @Override
+                                                    public void run() {
+                                                        final int[] size = imageSize(context, file);
+                                                        UiThreadUtil.runOnUiThread(new Runnable() {
+                                                            @Override
+                                                            public void run() {
+                                                                done.run(size != null
+                                                                        ? success(size[0], size[1])
+                                                                        : failure("Failed to read the image's size"));
+                                                            }
+                                                        });
+                                                    }
+                                                });
+                                                return false;
+                                            }
+                                        })
+                                        .preload();
+                            }
+                        });
+                        continue;
+                    }
                     pendingPreloads.add(new Runnable() {
                         @Override
                         public void run() {
@@ -123,10 +220,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(FastImageRequestListener.errorMessage(e));
-                                            preloadsInFlight--;
-                                            finishOne.run();
-                                            startPendingPreloads();
+                                            done.run(failure(FastImageRequestListener.errorMessage(e)));
                                             return false;
                                         }
 
@@ -134,14 +228,7 @@ class FastImageViewModule extends ReactContextBaseJavaModule {
                                         public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                                             // Preloaded at its original size, so this is
                                             // the image's own size.
-                                            WritableMap result = Arguments.createMap();
-                                            result.putBoolean("ok", true);
-                                            result.putInt("width", resource.getIntrinsicWidth());
-                                            result.putInt("height", resource.getIntrinsicHeight());
-                                            results[index] = result;
-                                            preloadsInFlight--;
-                                            finishOne.run();
-                                            startPendingPreloads();
+                                            done.run(success(resource.getIntrinsicWidth(), resource.getIntrinsicHeight()));
                                             return false;
                                         }
                                     })
@@ -158,6 +245,10 @@ class FastImageViewModule extends ReactContextBaseJavaModule {
         });
     }
 
+    private interface ResultCallback {
+        void run(WritableMap result);
+    }
+
     private static WritableMap failure(String error) {
         WritableMap result = Arguments.createMap();
         result.putBoolean("ok", false);

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

@@ -4,6 +4,7 @@ import static com.dylanvann.fastimage.FastImageRequestListener.REACT_ON_ERROR_EV
 
 import android.annotation.SuppressLint;
 import android.content.Context;
+import android.graphics.Bitmap;
 import android.graphics.drawable.BitmapDrawable;
 import android.graphics.drawable.Drawable;
 
@@ -108,8 +109,20 @@ class FastImageViewWithUrl extends AppCompatImageView {
     // Shows each GIF as this view's own animation. Glide's target also starts
     // and stops it with the Activity, as it does Glide's own GifDrawable.
     private final class OwnGifTarget extends DrawableImageViewTarget {
-        OwnGifTarget() {
+        // Shown instead of the placeholder while loading (see shownCopy).
+        @Nullable
+        private Drawable mMeanwhile;
+
+        OwnGifTarget(@Nullable Drawable meanwhile) {
             super(FastImageViewWithUrl.this);
+            mMeanwhile = meanwhile;
+        }
+
+        @Override
+        public void onLoadStarted(@Nullable Drawable placeholder) {
+            Drawable meanwhile = mMeanwhile;
+            mMeanwhile = null;
+            super.onLoadStarted(meanwhile != null ? meanwhile : placeholder);
         }
 
         @Override
@@ -287,12 +300,35 @@ class FastImageViewWithUrl extends AppCompatImageView {
     private void reloadForSize() {
         RequestBuilder<Drawable> shown = mShownRequest;
         RequestBuilder<Drawable> current = fromCache(shown);
+        Drawable meanwhile = shownCopy(shown);
         mLoadCount++;
         clearView(requestManager);
-        into(shown, shown.clone()
-                .thumbnail(current)
+        RequestBuilder<Drawable> builder = shown.clone()
                 .error(current.clone())
-                .listener(new FastImageRequestListener(null, null, true, false)));
+                .listener(new FastImageRequestListener(null, null, true, false));
+        if (meanwhile == null) builder = builder.thumbnail(current);
+        into(shown, builder, meanwhile);
+    }
+
+    // A copy of the image showing, for the view to show while the next one
+    // loads, when it isn't in Glide's memory cache (source.memoryCache false):
+    // a thumbnail of it would come from the disk, after the view has cleared,
+    // and its own bitmap is reused once its request is cleared. Only the view
+    // keeps the copy, until the next image replaces it. Null when the image
+    // is in the memory cache, or isn't a bitmap (a GIF).
+    @Nullable
+    private Drawable shownCopy(RequestBuilder<Drawable> shown) {
+        if (shown.isMemoryCacheable()) return null;
+        Drawable drawable = getDrawable();
+        if (!(drawable instanceof BitmapDrawable)) return null;
+        Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
+        if (bitmap == null || bitmap.isRecycled()) return null;
+        Bitmap.Config config = bitmap.getConfig();
+        Bitmap copy = bitmap.copy(config != null ? config : Bitmap.Config.ARGB_8888, false);
+        if (copy == null) return null;
+        BitmapDrawable result = new BitmapDrawable(getResources(), copy);
+        if (mPixelated) result.setFilterBitmap(false);
+        return result;
     }
 
     // The shown image, from the cache only (never loaded again), at the size
@@ -304,15 +340,15 @@ class FastImageViewWithUrl extends AppCompatImageView {
         return request;
     }
 
-    // Starts loading the request (built by builder), recording the size Glide
-    // loads it at. The size callback is added first, so it has the size by
+    // Starts loading the request (built by builder), showing meanwhile (if
+    // not null) until it loads, and recording the size Glide loads it at. The size callback is added first, so it has the size by
     // the time the image loads, even from the memory cache.
-    private void into(RequestBuilder<Drawable> request, RequestBuilder<Drawable> builder) {
+    private void into(RequestBuilder<Drawable> request, RequestBuilder<Drawable> builder, @Nullable Drawable meanwhile) {
         final int load = mLoadCount;
         mLoadingRequest = request;
         mLoadingWidth = 0;
         mLoadingHeight = 0;
-        OwnGifTarget target = new OwnGifTarget();
+        OwnGifTarget target = new OwnGifTarget(meanwhile);
         target.getSize(new SizeReadyCallback() {
             @Override
             public void onSizeReady(int width, int height) {
@@ -399,6 +435,9 @@ class FastImageViewWithUrl extends AppCompatImageView {
             untrackUrl(viewsForUrlsMap);
         }
 
+        // Before the view clears (see shownCopy).
+        Drawable meanwhile = shownRequest != null && imageSource != null ? shownCopy(shownRequest) : null;
+
         // Cancel existing request.
         this.glideUrl = glideUrl;
         clearView(requestManager);
@@ -440,7 +479,8 @@ class FastImageViewWithUrl extends AppCompatImageView {
                             .apply(renderingOptions(model));
             RequestBuilder<Drawable> request = builder.clone();
 
-            boolean thumbnail = shownRequest != null && model != null;
+            if (model == null) meanwhile = null;
+            boolean thumbnail = shownRequest != null && model != null && meanwhile == null;
             if (thumbnail) {
                 builder = builder.thumbnail(fromCache(shownRequest));
             }
@@ -448,7 +488,7 @@ class FastImageViewWithUrl extends AppCompatImageView {
             if (key != null)
                 builder.listener(new FastImageRequestListener(key, imageSource, thumbnail, true));
 
-            into(request, builder);
+            into(request, builder, meanwhile);
         }
     }
 

package/dist/index.cjs.js.flow

@@ -77,6 +77,7 @@ export type FastImageSource = {
     priority?: Priorities,
     cache?: CacheControls,
     cacheKey?: string,
+    memoryCache?: boolean,
 }
 
 export type FastImageProps = $ReadOnly<{|

package/dist/index.d.ts

@@ -33,6 +33,14 @@ export type Source = {
      * an expiry: use something stable, like the image's id.
      */
     cacheKey?: string;
+    /**
+     * Whether the decoded image is kept in the memory cache (default true).
+     * With false it's only kept on disk: a view doesn't leave it in memory
+     * once it stops showing it, and `FastImage.preload` downloads it without
+     * decoding it. For large images shown once, like a full-screen photo; a
+     * list scrolled back decodes them again.
+     */
+    memoryCache?: boolean;
 };
 export interface OnLoadEvent {
     nativeEvent: {

package/dist/index.js.flow

@@ -77,6 +77,7 @@ export type FastImageSource = {
     priority?: Priorities,
     cache?: CacheControls,
     cacheKey?: string,
+    memoryCache?: boolean,
 }
 
 export type FastImageProps = $ReadOnly<{|

package/ios/FastImage/FFFastImageSource.h

@@ -32,6 +32,10 @@ typedef NS_ENUM(NSInteger, FFFCacheControl) {
 @property (nonatomic) FFFCacheControl cacheControl;
 // The key to cache the image under instead of its url, or nil.
 @property (nonatomic, copy) NSString *cacheKey;
+// Whether the decoded image is kept in the memory cache (`memoryCache`,
+// default YES). Without it, it's only kept on disk: views don't leave it in
+// memory, and preload doesn't decode it.
+@property (nonatomic) BOOL memoryCache;
 
 - (instancetype)initWithURL:(NSURL *)url
                    priority:(FFFPriority)priority

package/ios/FastImage/FFFastImageSource.m

@@ -18,6 +18,7 @@ static NSUInteger const FFFWebCacheSize = 50 * 1024 * 1024;
         _priority = priority;
         _headers = headers;
         _cacheControl = cacheControl;
+        _memoryCache = YES;
     }
     return self;
 }

package/ios/FastImage/FFFastImageView.m

@@ -515,10 +515,19 @@ NSString *FFFErrorMessage(NSError *error)
     self.decodedCover = [self decodeCovers];
     if (CGSizeEqualToSize(box, CGSizeZero)) {
         context[SDWebImageContextAnimatedImageClass] = [SDAnimatedImage class];
+        if (!_source.memoryCache) {
+            // Only on disk, also when it comes from there.
+            context[SDWebImageContextStoreCacheType] = @(SDImageCacheTypeDisk);
+        }
         return context;
     }
     NSString* key = _source.cacheKeyFilter ? _source.cacheKey : _source.url.absoluteString;
     [FFFDownsampledImage addToContext: context forKey: key box: box cover: self.decodedCover];
+    if (!_source.memoryCache) {
+        // The smaller copy is only kept in memory, so it isn't kept (the
+        // downloaded file is still on disk).
+        context[SDWebImageContextStoreCacheType] = @(SDImageCacheTypeNone);
+    }
     return context;
 }
 

package/ios/FastImage/FFFastImageViewManager.m

@@ -69,7 +69,9 @@ static void FFFStartPendingPreloads(void)
 }
 
 // Resolves with a result per source, in order, once all have loaded or failed:
-// { ok, width, height } or { ok: false, error }. Never rejects.
+// { ok, width, height } or { ok: false, error }. Never rejects. A source with
+// memoryCache false is only stored on disk, without decoding it (its size
+// comes from the header).
 RCT_EXPORT_METHOD(preload:(nonnull NSArray<FFFastImageSource *> *)sources
                   resolve:(RCTPromiseResolveBlock)resolve
                   reject:(__unused RCTPromiseRejectBlock)reject)
@@ -115,13 +117,20 @@ RCT_EXPORT_METHOD(preload:(nonnull NSArray<FFFastImageSource *> *)sources
                 }
             }
             options |= [source cacheOptions];
+            SDWebImageMutableContext *context = FFFPreloadContext(source);
+            if (!source.memoryCache) {
+                // Not decoded (only its header is read, for the size), and not
+                // kept in memory, also when it comes from the disk cache.
+                options |= SDWebImageAvoidDecodeImage;
+                context[SDWebImageContextStoreCacheType] = @(SDImageCacheTypeDisk);
+            }
             [FFFPendingPreloads addObject:[^{
                 // Once per slot: SDWebImage calls this once with finished set
                 // (a progressive load calls it more, without).
                 __block BOOL done = NO;
                 [[SDWebImageManager sharedManager] loadImageWithURL:source.url
                                                             options:options
-                                                            context:[FFFPreloadContext(source) copy]
+                                                            context:[context copy]
                                                            progress:nil
                                                           completed:^(UIImage *image, NSData *data, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
                     if (!finished || done) {

package/ios/FastImage/RCTConvert+FFFastImage.m

@@ -49,6 +49,8 @@ RCT_ENUM_CONVERTER(FFFCacheControl, (@{
     imageSource.hasPriority = priorityJSON && priorityJSON != (id)kCFNull;
     NSString *cacheKey = [self NSString:json[@"cacheKey"]];
     imageSource.cacheKey = cacheKey.length > 0 ? cacheKey : nil;
+    id memoryCache = json[@"memoryCache"];
+    imageSource.memoryCache = memoryCache && memoryCache != (id)kCFNull ? [self BOOL:memoryCache] : YES;
     
     return imageSource;
 }

package/package.json

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