react-native-fast-image 8.6.43 → 8.7.0

package/README.md

@@ -213,7 +213,7 @@ If supplied, changes the color of all the non-transparent pixels to the given co
 
 ## Static Methods
 
-### `FastImage.preload: (source[]) => void`
+### `FastImage.preload: (source[]) => Promise<result[]>`
 
 Preload images to display later. e.g.
 
@@ -230,6 +230,13 @@ FastImage.preload([
 ])
 ```
 
+It resolves when all the images have loaded or failed, with a result for each source, in order: `{ uri, ok, width, height, error }`. `width` and `height` are the image's size (as in `onLoad`), which is also a way to find an image's size without showing it. A few sources load at a time (3, or `SDWebImagePrefetcher`'s `maxConcurrentPrefetchCount` on iOS), so a long list doesn't hold up the images the app is showing, and at low priority unless the source sets `priority`. It never rejects:
+
+```js
+const results = await FastImage.preload(sources)
+const failed = results.filter((result) => !result.ok)
+```
+
 ### `FastImage.clearMemoryCache: () => Promise<void>`
 
 Clear all images from memory cache.

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

@@ -1,24 +1,34 @@
 package com.dylanvann.fastimage;
 
 import android.app.Activity;
-import android.util.Log;
+import android.graphics.drawable.Drawable;
 
 import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
 
 import com.bumptech.glide.Glide;
-import com.bumptech.glide.load.model.GlideUrl;
+import com.bumptech.glide.Priority;
+import com.bumptech.glide.load.DataSource;
+import com.bumptech.glide.load.engine.GlideException;
+import com.bumptech.glide.request.RequestListener;
+import com.bumptech.glide.request.RequestOptions;
+import com.bumptech.glide.request.target.Target;
+import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.views.imagehelper.ImageSource;
+import com.facebook.react.bridge.UiThreadUtil;
+import com.facebook.react.bridge.WritableArray;
+import com.facebook.react.bridge.WritableMap;
+
+import java.util.ArrayDeque;
 
 class FastImageViewModule extends ReactContextBaseJavaModule {
 
     private static final String REACT_CLASS = "FastImageView";
-    private static final String TAG = "FastImage";
 
     FastImageViewModule(ReactApplicationContext reactContext) {
         super(reactContext);
@@ -30,41 +40,141 @@ class FastImageViewModule extends ReactContextBaseJavaModule {
         return REACT_CLASS;
     }
 
+    // At most this many preloaded sources load at a time, across all preload
+    // calls (the same as SDWebImagePrefetcher's default on iOS), so a long
+    // list doesn't queue hundreds of requests ahead of the images the app is
+    // showing (Glide's executors run requests in order within a priority).
+    private static final int PRELOAD_LIMIT = 3;
+    // Preloads waiting to start, in the order they were added, and the number
+    // loading. Only used on the UI thread (Glide calls its listeners there).
+    private static final ArrayDeque<Runnable> pendingPreloads = new ArrayDeque<>();
+    private static int preloadsInFlight = 0;
+
+    // Starts pending preloads while there's room. A listener calls it again,
+    // sometimes from inside run() (Glide reports a memory-cached image
+    // synchronously from preload()). That's fine: the counters are shared and
+    // updated before each run(), so the inner call starts what fits, and the
+    // outer loop sees the updated counters when it checks again.
+    private static void startPendingPreloads() {
+        while (preloadsInFlight < PRELOAD_LIMIT && !pendingPreloads.isEmpty()) {
+            preloadsInFlight++;
+            pendingPreloads.poll().run();
+        }
+    }
+
+    // Resolves with a result per source, in order, once all have loaded or
+    // failed: { ok, width, height } or { ok: false, error }. Never rejects.
     @ReactMethod
-    public void preload(final ReadableArray sources) {
-        final Activity activity = getCurrentActivity();
-        if (activity == null) return;
-        activity.runOnUiThread(new Runnable() {
+    public void preload(final ReadableArray sources, final Promise promise) {
+        final ReactApplicationContext context = getReactApplicationContext();
+        UiThreadUtil.runOnUiThread(new Runnable() {
             @Override
             public void run() {
-                for (int i = 0; i < sources.size(); i++) {
-                    final ReadableMap source = sources.getMap(i);
-                    // Skip sources without a uri (Glide throws on an empty url).
-                    // preload has no way to report errors, so log them.
+                final int count = sources.size();
+                final WritableMap[] results = new WritableMap[count];
+                // Sources of this call still to finish. It starts at the
+                // number of sources, so the promise can't resolve before
+                // they've all been added.
+                final int[] remaining = {count};
+                final Runnable finishOne = new Runnable() {
+                    @Override
+                    public void run() {
+                        if (--remaining[0] > 0) return;
+                        WritableArray array = Arguments.createArray();
+                        for (WritableMap result : results) array.pushMap(result);
+                        promise.resolve(array);
+                    }
+                };
+                for (int i = 0; i < count; i++) {
+                    final int index = i;
+                    final ReadableMap source = sources.isNull(i) ? null : sources.getMap(i);
+                    // Glide throws on an empty url. Invalid sources fail
+                    // without taking a slot.
                     if (!FastImageViewConverter.hasUri(source)) {
-                        Log.w(TAG, "preload: skipping a source without a uri");
+                        results[i] = failure("Invalid source: no uri");
+                        finishOne.run();
                         continue;
                     }
-                    final FastImageSource imageSource = FastImageViewConverter.getImageSource(activity, source);
-                    // Also skip a uri that can't be resolved (e.g. a relative path),
-                    // which resolves to an empty one. The view reports it as an error.
+                    final FastImageSource imageSource = FastImageViewConverter.getImageSource(context, source);
+                    // A uri that can't be resolved (e.g. a relative path) resolves
+                    // to an empty one.
                     if (imageSource.getUri().toString().isEmpty()) {
-                        Log.w(TAG, "preload: skipping a uri that can't be resolved: " + source.getString("uri"));
+                        results[i] = failure("Invalid source: can't resolve " + source.getString("uri"));
+                        finishOne.run();
                         continue;
                     }
+                    RequestOptions options = FastImageViewConverter.getOptions(context, imageSource, source);
+                    // Low priority unless the source sets one, as on iOS (the
+                    // prefetcher's options), so the images the app shows load
+                    // first.
+                    final RequestOptions preloadOptions = source.hasKey("priority") && !source.isNull("priority")
+                            ? options
+                            : options.priority(Priority.LOW);
+                    pendingPreloads.add(new Runnable() {
+                        @Override
+                        public void run() {
+                            Glide
+                                    .with(context)
+                                    // Load it the way the view does, so local images
+                                    // (file://, content://, asset:/) work too.
+                                    .load(imageSource.getSourceForLoad())
+                                    .apply(preloadOptions)
+                                    .listener(new RequestListener<Drawable>() {
+                                        @Override
+                                        public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
+                                            results[index] = failure(errorMessage(e));
+                                            preloadsInFlight--;
+                                            finishOne.run();
+                                            startPendingPreloads();
+                                            return false;
+                                        }
 
-                    Glide
-                            .with(activity.getApplicationContext())
-                            // Load it the way the view does, so local images
-                            // (file://, content://, asset:/) work too.
-                            .load(imageSource.getSourceForLoad())
-                            .apply(FastImageViewConverter.getOptions(activity, imageSource, source))
-                            .preload();
+                                        @Override
+                                        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();
+                                            return false;
+                                        }
+                                    })
+                                    .preload();
+                        }
+                    });
                 }
+                if (count == 0) {
+                    promise.resolve(Arguments.createArray());
+                    return;
+                }
+                startPendingPreloads();
             }
         });
     }
 
+    private static WritableMap failure(String error) {
+        WritableMap result = Arguments.createMap();
+        result.putBoolean("ok", false);
+        result.putString("error", error);
+        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/dist/index.cjs.js

@@ -129,7 +129,16 @@ const FastImage = FastImageComponent;
 FastImage.resizeMode = resizeMode;
 FastImage.cacheControl = cacheControl;
 FastImage.priority = priority;
-FastImage.preload = (sources) => react_native.NativeModules.FastImageView.preload(sources);
+FastImage.preload = (sources) => Promise.resolve(react_native.NativeModules.FastImageView.preload(sources.map((s) => s || {}))).then((results) => sources.map((source, i) => {
+	var _results$i;
+	return {
+		uri: source ? source.uri : void 0,
+		...(_results$i = results === null || results === void 0 ? void 0 : results[i]) !== null && _results$i !== void 0 ? _results$i : {
+			ok: false,
+			error: "No result"
+		}
+	};
+}));
 FastImage.clearMemoryCache = () => react_native.NativeModules.FastImageView.clearMemoryCache();
 FastImage.clearDiskCache = () => react_native.NativeModules.FastImageView.clearDiskCache();
 const styles = react_native.StyleSheet.create({

package/dist/index.cjs.js.flow

@@ -43,7 +43,17 @@ export type ResizeModes = $Values<ResizeMode>
 export type Priorities = $Values<Priority>
 export type CacheControls = $Values<CacheControl>
 
-export type PreloadFn = (sources: Array<FastImageSource>) => void
+export type PreloadResult = {|
+    uri?: string,
+    ok: boolean,
+    width?: number,
+    height?: number,
+    error?: string,
+|}
+
+export type PreloadFn = (
+    sources: Array<FastImageSource>,
+) => Promise<Array<PreloadResult>>
 export type FastImageSource = {
     uri?: string,
     headers?: Object,

package/dist/index.d.ts

@@ -93,11 +93,18 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      */
     children?: React.ReactNode;
 }
+export interface PreloadResult {
+    uri?: string;
+    ok: boolean;
+    width?: number;
+    height?: number;
+    error?: string;
+}
 export interface FastImageStaticProperties {
     resizeMode: typeof resizeMode;
     priority: typeof priority;
     cacheControl: typeof cacheControl;
-    preload: (sources: Source[]) => void;
+    preload: (sources: Source[]) => Promise<PreloadResult[]>;
     clearMemoryCache: () => Promise<void>;
     clearDiskCache: () => Promise<void>;
 }

package/dist/index.js

@@ -106,7 +106,16 @@ const FastImage = FastImageComponent;
 FastImage.resizeMode = resizeMode;
 FastImage.cacheControl = cacheControl;
 FastImage.priority = priority;
-FastImage.preload = (sources) => NativeModules.FastImageView.preload(sources);
+FastImage.preload = (sources) => Promise.resolve(NativeModules.FastImageView.preload(sources.map((s) => s || {}))).then((results) => sources.map((source, i) => {
+	var _results$i;
+	return {
+		uri: source ? source.uri : void 0,
+		...(_results$i = results === null || results === void 0 ? void 0 : results[i]) !== null && _results$i !== void 0 ? _results$i : {
+			ok: false,
+			error: "No result"
+		}
+	};
+}));
 FastImage.clearMemoryCache = () => NativeModules.FastImageView.clearMemoryCache();
 FastImage.clearDiskCache = () => NativeModules.FastImageView.clearDiskCache();
 const styles = StyleSheet.create({

package/dist/index.js.flow

@@ -43,7 +43,17 @@ export type ResizeModes = $Values<ResizeMode>
 export type Priorities = $Values<Priority>
 export type CacheControls = $Values<CacheControl>
 
-export type PreloadFn = (sources: Array<FastImageSource>) => void
+export type PreloadResult = {|
+    uri?: string,
+    ok: boolean,
+    width?: number,
+    height?: number,
+    error?: string,
+|}
+
+export type PreloadFn = (
+    sources: Array<FastImageSource>,
+) => Promise<Array<PreloadResult>>
 export type FastImageSource = {
     uri?: string,
     headers?: Object,

package/ios/FastImage/FFFastImageSource.h

@@ -21,6 +21,8 @@ typedef NS_ENUM(NSInteger, FFFCacheControl) {
 @property (nonatomic) NSURL* url;
 // priority for image request
 @property (nonatomic) FFFPriority priority;
+// whether the source set a priority (preload is low priority otherwise)
+@property (nonatomic) BOOL hasPriority;
 // headers for the image request
 @property (nonatomic) NSDictionary *headers;
 // cache control mode

package/ios/FastImage/FFFastImageViewManager.m

@@ -1,9 +1,9 @@
 #import "FFFastImageViewManager.h"
 #import "FFFastImageView.h"
-#import <React/RCTLog.h>
 
 #import <SDWebImage/SDImageCache.h>
 #import <SDWebImage/SDWebImageManager.h>
+#import <SDWebImage/SDWebImageError.h>
 #import <SDWebImage/SDWebImagePrefetcher.h>
 
 @implementation FFFastImageViewManager
@@ -24,36 +24,119 @@ RCT_EXPORT_VIEW_PROPERTY(onFastImageLoad, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageLoadEnd, RCTDirectEventBlock)
 RCT_REMAP_VIEW_PROPERTY(tintColor, imageColor, UIColor)
 
-RCT_EXPORT_METHOD(preload:(nonnull NSArray<FFFastImageSource *> *)sources)
+// The error's description, with the HTTP status code when there is one.
+static NSString *FFFErrorMessage(NSError *error)
 {
-    SDWebImagePrefetcher *prefetcher = [SDWebImagePrefetcher sharedImagePrefetcher];
-    NSMutableArray *urls = [NSMutableArray arrayWithCapacity:sources.count];
+    NSNumber *statusCode = error.userInfo[SDWebImageErrorDownloadStatusCodeKey];
+    if (statusCode) {
+        return [NSString stringWithFormat:@"%@, status code: %@", error.localizedDescription, statusCode];
+    }
+    return error.localizedDescription ?: @"Failed to load the image";
+}
 
-    [sources enumerateObjectsUsingBlock:^(FFFastImageSource * _Nonnull source, NSUInteger idx, BOOL * _Nonnull stop) {
-        // Skip sources without a url (an empty, missing or null uri). NSArray can't
-        // hold nil, so adding one throws and crashes the app.
-        if (!source.url) {
-            // preload has no way to report errors, so log it.
-            RCTLogWarn(@"FastImage.preload: skipping a source without a valid uri");
-            return;
+// 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
+// hundreds of operations ahead of the images the app is showing. Only used on
+// the main queue (SDWebImageManager calls its completion blocks there).
+static NSMutableArray<dispatch_block_t> *FFFPendingPreloads;
+static NSUInteger FFFPreloadsInFlight;
+
+static NSUInteger FFFPreloadLimit(void)
+{
+    NSUInteger limit = [SDWebImagePrefetcher sharedImagePrefetcher].maxConcurrentPrefetchCount;
+    return MAX(limit, (NSUInteger)1);
+}
+
+// Starts pending preloads while there's room. A completion block calls it
+// again, sometimes from inside start() (a memory cache hit completes
+// synchronously on the main queue). That's fine: the counters are shared and
+// updated before each start(), so the inner call starts what fits, and the
+// outer loop sees the updated counters when it checks again.
+static void FFFStartPendingPreloads(void)
+{
+    while (FFFPreloadsInFlight < FFFPreloadLimit() && FFFPendingPreloads.count > 0) {
+        dispatch_block_t start = FFFPendingPreloads.firstObject;
+        [FFFPendingPreloads removeObjectAtIndex:0];
+        FFFPreloadsInFlight++;
+        start();
+    }
+}
+
+// Resolves with a result per source, in order, once all have loaded or failed:
+// { ok, width, height } or { ok: false, error }. Never rejects.
+RCT_EXPORT_METHOD(preload:(nonnull NSArray<FFFastImageSource *> *)sources
+                  resolve:(RCTPromiseResolveBlock)resolve
+                  reject:(__unused RCTPromiseRejectBlock)reject)
+{
+    // This runs on the UIManager queue; the queue state is only touched on
+    // the main queue.
+    dispatch_async(dispatch_get_main_queue(), ^{
+        if (!FFFPendingPreloads) {
+            FFFPendingPreloads = [NSMutableArray array];
         }
-        if (source.headers.count == 0) {
-            [urls addObject:source.url];
+        NSMutableArray *results = [NSMutableArray arrayWithCapacity:sources.count];
+        // Sources of this call still to finish. It starts at the number of
+        // sources, so the promise can't resolve before they've all been added.
+        __block NSUInteger remaining = sources.count;
+        void (^finishOne)(void) = ^{
+            if (--remaining == 0) {
+                resolve(results);
+            }
+        };
+        // With the prefetcher's options (low priority), but one source at a
+        // time (not SDWebImagePrefetcher), to get each source's result and to
+        // send its headers with its own request only.
+        SDWebImageOptions prefetcherOptions = [SDWebImagePrefetcher sharedImagePrefetcher].options;
+
+        [sources enumerateObjectsUsingBlock:^(FFFastImageSource * _Nonnull source, NSUInteger idx, BOOL * _Nonnull stop) {
+            if (!source.url) {
+                // An empty, missing or null uri (JS sends null sources as {}).
+                // It fails without taking a slot.
+                [results addObject:@{@"ok": @NO, @"error": @"Invalid source: no uri"}];
+                finishOne();
+                return;
+            }
+            [results addObject:[NSNull null]];
+            // A source's own priority replaces the prefetcher's, as on Android.
+            SDWebImageOptions options = prefetcherOptions;
+            if (source.hasPriority) {
+                options &= ~(SDWebImageLowPriority | SDWebImageHighPriority);
+                if (source.priority == FFFPriorityLow) {
+                    options |= SDWebImageLowPriority;
+                } else if (source.priority == FFFPriorityHigh) {
+                    options |= SDWebImageHighPriority;
+                }
+            }
+            [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:@{SDWebImageContextDownloadRequestModifier: source.requestModifier}
+                                                           progress:nil
+                                                          completed:^(UIImage *image, NSData *data, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
+                    if (!finished || done) {
+                        return;
+                    }
+                    done = YES;
+                    results[idx] = image
+                        ? @{@"ok": @YES, @"width": @(image.size.width), @"height": @(image.size.height)}
+                        : @{@"ok": @NO, @"error": FFFErrorMessage(error)};
+                    FFFPreloadsInFlight--;
+                    finishOne();
+                    FFFStartPendingPreloads();
+                }];
+            } copy]];
+        }];
+
+        if (sources.count == 0) {
+            resolve(results);
             return;
         }
-        // Send the headers with this source's request only (setting them on
-        // the shared downloader sent them with every later request). The
-        // prefetcher can't take headers per request in SDWebImage 5.11 (its
-        // context is shared by all prefetches), so load it the way the
-        // prefetcher does, with the same options.
-        [[SDWebImageManager sharedManager] loadImageWithURL:source.url
-                                                    options:prefetcher.options
-                                                    context:@{SDWebImageContextDownloadRequestModifier: source.requestModifier}
-                                                   progress:nil
-                                                  completed:^(UIImage *image, NSData *data, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {}];
-    }];
-
-    [prefetcher prefetchURLs:urls];
+        FFFStartPendingPreloads();
+    });
 }
 
 RCT_EXPORT_METHOD(clearMemoryCache:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)

package/ios/FastImage/RCTConvert+FFFastImage.m

@@ -45,6 +45,8 @@ RCT_ENUM_CONVERTER(FFFCacheControl, (@{
     }
     
     FFFastImageSource *imageSource = [[FFFastImageSource alloc] initWithURL:uri priority:priority headers:headers cacheControl:cacheControl];
+    id priorityJSON = json[@"priority"];
+    imageSource.hasPriority = priorityJSON && priorityJSON != (id)kCFNull;
     
     return imageSource;
 }

package/package.json

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